js脚本放到哪里

代码1：将代脚本放到查找标签的后面，结果正常显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>算数运算</title>
</head>
<body>
    <p id="sum"></p>
    <p id="jian"></p>
    <p id="cheng"></p>
    <p id="chu"></p>
    <p id="yu"></p>
    <script>
        //代码补充
        var a = 4,b = 5;
        var sum = a + b;
        var jian = a - b;
        var cheng = a * b;
        var chu = a / b;
        var yu = a % b;
        document.getElementById('sum').innerHTML=sum;
        document.getElementById('jian').innerHTML=jian;
        document.getElementById('cheng').innerHTML=cheng;
        document.getElementById('chu').innerHTML=chu;
        document.getElementById('yu').innerHTML=yu;
    </script>

</body>
</html>

代码2：将代脚本放到查找标签的前面，结果不能正常显示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>算数运算</title>
</head>
<body>
   
    <script>
        //代码补充
        var a = 4,b = 5;
        var sum = a + b;
        var jian = a - b;
        var cheng = a * b;
        var chu = a / b;
        var yu = a % b;
        document.getElementById('sum').innerHTML=sum;
        document.getElementById('jian').innerHTML=jian;
        document.getElementById('cheng').innerHTML=cheng;
        document.getElementById('chu').innerHTML=chu;
        document.getElementById('yu').innerHTML=yu;
    </script>
 <p id="sum"></p>
    <p id="jian"></p>
    <p id="cheng"></p>
    <p id="chu"></p>
    <p id="yu"></p>
</body>
</html>

代码3：将js放到head标签内，结果不能正常现实

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>算数运算</title>
    <script type = "text/javascript">
        //代码补充
        var a = 4,b = 5;
        var sum = a + b;
        var jian = a - b;
        var cheng = a * b;
        var chu = a / b;
        var yu = a % b;
        document.getElementById('sum').innerHTML=sum;
        document.getElementById('jian').innerHTML=jian;
        document.getElementById('cheng').innerHTML=cheng;
        document.getElementById('chu').innerHTML=chu;
        document.getElementById('yu').innerHTML=yu;
    </script>
</head>
<body>
   
    
 <p id="sum"></p>
    <p id="jian"></p>
    <p id="cheng"></p>
    <p id="chu"></p>
    <p id="yu"></p>
</body>
</html>

问：

我记得一般js代码都放到head标签里，或者是从其他页面导入的，请问为啥不好用？
如果只能放在HTML代码后面那么一般都是放到哪里？

轩辕小齐V 2018-11-22

源自：JavaScript入门 1-14 编程练习

收起

1回答

guly 回答被采纳获得+3积分 2018-11-23 09:58:40

你好，这个关于html,css,js加载顺序的问题，

1.js放在head中会立即执行，阻塞后续的资源下载与执行。因为js有可能会修改dom，如果不阻塞后续的资源下载，dom的操作顺序不可控。

正常的网页加载流程是这样的。

浏览器一边下载HTML网页，一边开始解析

解析过程中，发现<script>标签

暂停解析，网页渲染的控制权转交给JavaScript引擎

如果<script>标签引用了外部脚本，就下载该脚本，否则就直接执行

执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页

　　如果外部脚本加载时间很长（比如一直无法完成下载），就会造成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。html需要等head中所有的js和css加载完成后才会开始绘制，但是html不需要等待放在body最后的js下载执行就会开始绘制,因此将js放在body的最后面，可以避免资源阻塞，同时使静态的html页面迅速显示。将脚本文件都放在网页尾部加载，还有一个好处。在DOM结构生成之前就调用DOM，JavaScript会报错，如果脚本都在网页尾部加载，就不存在这个问题，因为这时DOM肯定已经生成了。

2.js的执行依赖前面的样式。即只有前面的样式全部下载完成后才会执行js，但是此时外链css和外链js是并行下载的。css需要分块，首页的css独立，其余的css需要动态加载，因为html的绘制会被css阻塞，这样可以减少首次进入时的白屏时间。

3.外链的js如果含有defer="true"属性，将会并行加载js，到页面全部加载完成后才会执行，会按顺序执行。defer属性的作用是，告诉浏览器，等到DOM加载完成后，再执行指定脚本。

浏览器开始解析HTML网页，解析过程中，发现带有defer属性的script标签，浏览器继续往下解，HTML网页，同时并行下载script标签中的外部脚本，浏览器完成解析HTML网页，此时再执行下载的脚本，　对于内置而不是连接外部脚本的script标签，以及动态生成的script标签，defer属性不起作用。

4.外链的js如果含有async="true"属性，将不会依赖于任何js和css的执行，此js下载完成后立刻执行，不保证按照书写的顺序执行。因为async="true"属性会告诉浏览器，js不会修改dom和样式，故不必依赖其它的js和css。　

async属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染。

浏览器开始解析HTML网页

解析过程中，发现带有async属性的script标签

浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本

脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本

脚本执行完毕，浏览器恢复解析HTML网页

async属性可以保证脚本下载的同时，浏览器继续渲染。需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。另外，使用async属性的脚本文件中，不应该使用document.write方法。

一般来说，如果脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。

如果解决您的问题请采纳，祝学习愉快！

收起回答