浅谈前端性能优化（四）——将script放在底部

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放在底部的情况。