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>

猜你喜欢

转载自blog.csdn.net/kalinux/article/details/81913928