script的两个属性——async和defer:
① 没有defer或async,浏览器会立即加载并执行指定的JS脚本,不等待后续文档元素,读到JS脚本就加载并执行。
② 有async,加载后续文档元素的过程将和JS的加载与执行并行进行(异步)。
③ 有defer,加载后续文档元素的过程将和JS的加载并行进行(异步),但JS的执行要在所有文档元素解析完成之后,DOMContentLoaded 事件触发之前完成。
二者的详细对比请见:http://blog.csdn.net/zhouziyu2011/article/details/60149590
script放在底部的原理:
script没有async和defer时,JS文件将在下载后立即执行。这种情况下,script放在顶部会阻塞页面呈现,在网速慢的情况下会导致“白屏”,直到脚本下载完毕才继续呈现页面。因此,script放在底部可以让页面尽快呈现。
script全部放在head中会出现的问题:
在需要操作body中的某元素时,可能找不到该元素,因此,若要放在head中,一般需要绑定一个监听windows.onload=function(){ ... },当文档全部解析完之后再执行script代码。
测试实例:
测试demo:http://stevesouders.com/hpws/move-scripts.php
页面中嵌入2个iframe,左边是script放在顶部的情况,右边是script放在底部的情况。