脚本的加载和执行

2018-02-11 14:09:56来源:segmentfault作者:zwwtj2014人点击

分享

在打开一个站点的时候,浏览器会去加载各种资源。现在对JS的使用非常普遍,任何一个站点都会请求大量的JS脚本,而加载和执行的方式也是各不相同,希望读完这篇文章可以对常用的加载和执行方式有一个整体的认识。


首先介绍的是html中直接使用<script>标签。这也是我们最常见的一种加载脚本的方式。



// 直接使用script内嵌脚本
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
// 使用script的src属性引用外部脚本
<script src="myscripts.js"></script>

这种方式在主流的浏览器可以是并行加载的,但是执行脚本的顺序还是同步的,再加上浏览器是顺序解析页面,所以对于脚本的位置是有一定讲究的:


如果脚本B需要使用到脚本A中的数据(比如fn或者变量),那脚本B必须放在脚本A后面。
因为执行引擎是单线程的,所以在执行JS的时候会阻塞DOM的渲染,导致页面长时间空白。如果不想的话可以考虑把JS放在文档的后面(比如body标签的底部)。
一个外链脚本就涉及到一个请求,再小的请求肯定都会有性能开销,比如请求头,网络时延等等。所以在优化站点性能的时候减少外链也是要考虑的一个点。
【注】:可并行加载的浏览器包括:IE8+、firefox3.5+、safari4+和chrome2+。不同浏览器对于同一个域名下的最大连接数有不同的限制,基本在6个左右。具体可以参见这篇文章。


在程序的世界中,很多场景下同步阻塞就意味着性能问题。在这些场景下其实无阻塞脚本就可以搞定,主进程还是去干当前最主要的事情,即加载和渲染DOM,而无阻塞的脚本可以等到页面加载完再去加载执行,这些场景正是性能优化的点。

这就引申出来了几种无阻塞脚本的方案。


方案一:defer属性 【w3c】【MDN】



这个属性的是承诺用src引的脚本中不会修改DOM。放心的让这个脚本延迟执行吧。具体延迟到文档完成解析后,触发 DOMContentLoaded 事件前执行。


【注1】执行是被延迟了,但是下载还是根据script在页面中的位置。解析到时会去并行下载,但是不会执行。
【注2】由上述定义可以看出来需由src的存在,对于内嵌的脚本是无效的。
【注3】配了defer属性的脚本之间是按照顺序执行的

【测试】 chrome 64.0.3282.119



<script src="./demo.js" defer></script>
<script defer>
console.log('script with defer');
</script>
<script>
console.log('script withour defer');
</script>
<script>
window.addEventListener("load",function (event) {
console.log("All resources finished loading!");
});
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
</body>
// demo.js
console.log('inner demo.js');

结果:




方案二:async属性 【w3c】【MDN】



配置了async属性是告诉浏览器,这个脚本异步去并行加载,加载完立即异步执行,但是加载的时机是不确定的,所以这个属性比defer更开放。相关测试代码


【注1】因为异步加载完就立即异步执行,所以配了这个属性的脚本之间的关系也是不确定的。所以不能存在依赖async脚本内容的情况。
【注2】执行的时机智能确定在load事件之前,和DOMContentLoaded的时机不能确定
【注3】优先级是高于defer的
【注4】和defer一样,对内嵌脚本无效;不能有document.write改写dom的代码


方案三:动态脚本

动态脚本是我们比较常用的异步加载和执行JS的方式。这种实现要特别注意浏览器的兼容性。简单的实现方式如下:


function loadJs(url,callback) {
var callback = callback || (() => {});
var script = document.createElement('script');
script.type = "text/javascript";
script.src = url;if(script.readyState){ //IE
script.onreadystatechange = function () {
if(script.readyState == "loaded" || script.readyState == 'complete'){
console.log('inner onreadystatechange');
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = function () {
console.log('inner onload');
callback();
};
}document.getElementsByTagName("head")[0].appendChild(script); // 开始下载并执行
}loadJs("./server.js");

这种创建的方式,文件在该元素被添加到页面时开始下载,加载完开始执行,并且文件的下载和执行过程不会阻塞其它进程。可以认为这种创建默认加了async属性。我们还可以通过设置async = false的方式取消异步的特性。正因为这个特性,绝大多数场景下都是有益的,但是当我们想使用这种方式去加载多个JS时,并且有先后顺序的时候,可以尝试在callbak里去迭代发请求。


loadJs('f1.js',()=>{
loadJs('f2.js',()=>{
loadJs(xxx);
})
});
方案四:XMLHttpRequest(XHR)注入脚本
搞过Ajax的对XHR应该都很熟悉了,在这就不详细介绍了,需要的去Google一把。

XHR主要是请求脚本,然后我们可以控制请求回来的脚本,在我们需要的时候通过上述动态创建脚本的方式注入到页面中。这种方式最大的好处就是兼容性好。弊端也很明显,必须同源。下面是一个简单实现,没有考虑在创建xhr的兼容性,比如ActiveXObject,有需要的可以去google一把:


var xhr = new XMLHttpRequest(); // 创建xhr对象
xhr.open("get",'./server.js',true); // 初始化一个请求, 支持CRUD
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 3000 || xhr.status == 304){
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = xhr.responseText;
document.body.appendChild(script);
}
}
}
xhr.send(null); // 发送请求

这地方说明一下xhr.status:































状态描述
0UNSENT (未打开)open()方法还未被调用.
1OPENED (未发送)open()方法已经被调用.
2HEADERS_RECEIVED (已获取响应头)send()方法已经被调用, 响应头和响应状态已经返回
3LOADING (正在下载响应体)响应体下载中; responseText中已经获取了部分数据.
4DONE (请求完成)整个请求过程已经完毕.

其它方案:
document.write

对于document.write,一般都不推荐使用的,主要是因为存在write方法的脚本可能会在解析的过程中修改DOM,导致一些脚本无法预加载,甚至会导致一些已经预解析和预加载失效。网上也很多关于为什么要避免使用document.write的文章,感兴趣的可以去google一把。


innerHtml

对于innerHtml和outerHTML, 只会以字符串的形式来承载,不会去执行对应的脚本的。

总结:上文主要介绍了动态创建脚本和XHR的方式去创建异步加载和执行脚本的方式。在某些性能调优的情况下还是很有用的,而XHR更是Ajax的核心。

参考

高性能Javascript

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台