script标签到底放哪

1，就速度而言：

将<script>放头部，会先下载js文件再执行html,给用户感觉卡；

将<script>放最后，对于高度依赖js的html,会显得慢。

async和defer属性让浏览器一边下载js，一边解析html。

带async属性的script会异步执行，只要下载完就执行，这会导致script2.js可能先于script1.js执行。

defer就能保证script有序执行，script1.js先执行，script2.js后执行

 2，就执行函数任务而言：

如果函数中有用到html中的属性，值等，需要等待html被解析完再执行函数（因为浏览器是按顺序执行，解析代码的）。例如：

若在head头部调用函数aler();

function alert（）{

var x1=document.getElementById("div1");

alert(x1.value);

}

aler(); //浏览器毫无反应

html:

<div id="div1">HELLO</div>

若在被使用了属性的标签之后调用函数：

function aler(){

........}

html:

<div id="div1">HELLO</div>

<script>

aler(); //HELLO;

</script>

3，最好的做法是将script标签放在head中，并使用async/defer属性。这样浏览器就能一边下载JS，一边解析其他的HTML。