网站性能优化(三)异步加载脚本
原则上来说，HTML在使用<script>标签加载外部脚本文件时，会顺序下载，顺序执行，并阻碍其他资源文件的下载，比如图片（当然，如今主流浏览器是可以实现JS和CSS文件并行下载）。
code1.png
（在Chrome下测试，三张图片只会有两张被阻塞。我猜测，Chrome是想做某些优化的，但是，显然优化的不够彻底。不同浏览器表现还是不一致的）
loading1.png
为了加速页面渲染，不让脚本文件阻塞其他资源下载，可以考虑“异步加载脚本”的技术。
后续的测试都基于Chrome浏览器（版本56.0.2924.87）。
1. Script DOM Element
这恐怕是最常见的异步加载脚本方法，即，动态创建一个script标签，并设置其src值。如下：
function createScript(url){
var scrElem = document.createElement('script');
srcElem.src = url;
document.getElementsByTagName('head')[0].appendChild(scrElem);
}用createScript方式加载JS文件，不会阻塞下载其他资源。
loading2.png
但是这种方式会阻塞window.onload事件，参考chrome developer timeline:
timeline-script.png
优点:：
- 支持跨域加载脚本文件
- 兼容性最好、普适性最高的方案
缺点:：
- 脚本无序执行
- 会阻塞onload事件
2. XMLHttpRequest
通过XMLHttpRequest的方式下载脚本文件，然后使用eval或者动态添加<script>标签并设置其text属性来执行脚本。
// 不考虑IE
var xhrObj = new XMLHttpRequest();
xhrObj .onreadystatechange = function(){
if (xhrObj .readyState == 4) {
eval(xhrObj.responseText);
或者
var scrElem = document.createElement('script');
srcElem.text= xhrObj.responseText;
document.getElementsByTagName('head')[0].appendChild(scrElem);
}
}
xhrObj .open('GET', 'a.js', true);
xhrObj .send('');稍微修改下上面的例子：
index.html
<html>
...
<body>
<script type="application/javascript" src="js1.js"></script>
</body>
</html>
js1.js
var xhrObj = new XMLHttpRequest();
xhrObj .onreadystatechange = function(){
if (xhrObj .readyState == 4) {
var scrElem = document.createElement('script');
srcElem.text= xhrObj.responseText;
document.getElementsByTagName('head')[0].appendChild(scrElem);
}
};
xhrObj .open('GET', 'js2.js', true);
xhrObj .send('');查看chrome developer timeline：
timeline-xhr.png
优点:：
- 将脚本下载和脚本执行分离开，可以在适当的时候再执行脚本。
- 不会阻塞onload事件
缺点:：
- 通过XMLHttpRequest获取的脚本文件必须和主页面是同一个域名下。也就是说，不支持跨域下载脚本。因此不适合加载第三方文件。
- 脚本无序执行。
3. Script defer和async
两者都支持异步加载文件，不同之处是，defer会在全部资源下载完毕后才执行JS文件；async在脚本文件下载完就立刻执行，并且，async模式加载的JS文件无法依序执行，对于有顺序依赖的脚本来说，不应该采用这种方式。defer相对友好一些，并可以保证JS文件按照顺序执行。
稍微对程序做些修改：
code2.png
loading3.png
优点:：
- defer和async优点：支持跨域加载脚本文件。
- defer优点：可以保证JS文件按照顺序执行。
缺点:：
- defer和async缺点：IE10以上（包括IE10）才支持。
- async缺点：JS文件无法依序执行。
- 会阻塞onload事件
4. Script in Iframe
创建了一个隐藏的iframe标签，设置其src值为JS代码，然后插入到主页面中。
这种方式在实际项目中很少用到，因为iframe是开销最高的DOM元素。常用场景是显示广告（广告一般需要运行在隔离环境中，iframe很合适）。
<iframe src=“a.html” frameborder="1" name="rightFrame" id="rightFrame"></iframe>注意，src的值是a.html，而不是a.js，因为iframe默认其返回值为HTML文档。所以需要在HTML文档中把外部脚本转成行内脚本。
和XMLHttpRequest一样，iframe不支持跨域加载脚本，且脚本无序执行。
5. 小结
异步加载脚本还普遍存在另一个问题：无法保持多个脚本的执行顺序（除了defer）。
为了脚本依序执行，可以采用如下方法：
1）定时器
利用setTimeout或setInterval监控第一个脚本执行情况，一旦发现被执行完，再继续执行下一个脚本。
- Script Onload
利用script元素的
onload和onreadystatechange事件处理程序，例子如下：
<script>
var scrElem = document.createElement('script');
scrElem.src = 'a.js';
scrElem.onloadDone = false;
scrElem.onload = function () {
scrElem.onloadDone = true;
// 执行第二个脚本
};
//针对IE浏览器
scrElem.onreadystatechange = function () {
if ((scrElem.readyState === 'loaded' || scrElem.readyState === 'complete') && !scrElem.onloadDone) {
scrElem.onloadDone = true;
//执行第二个脚本
}
};
document.getElementsByTagName('head')[0].appendChild(scrElem);
</script>注意：script.onload/onreadystatechange事件同样会阻塞window.onload
腾讯云开发者
