无阻塞加载脚本分析[全] |
|||||||||||||||||||||||||||||||||||||||||||||||||
|
本文标签：无阻塞,加载脚本 由于浏览器是单线程的，因此脚本在载的时候会阻塞下载其它资源；虽然在现在浏览器已经有所改善，但仍然有待改进 。 很显然，脚本必须按顺序执行，但没有必要按顺序下载，解决方法： 1 。内嵌JS 通常由于页面大小和缓存能带来更多好处，因此外部文件引入JS更好一些； 在少数情况下，比如首页、少量JS情况下尚可接受 。 2 。XHR Eval 通过XMLHttpRequest从服务器端获取脚本 。 主要缺陷是，通过XHR获取的脚本必须部署在和主页面相同的域中 。 复制代码 代码如下: Ajax.get("test.js", function (xhr) { eval(xhr.responseText); }); 3 。XHR注入 使用XHR获取脚本并创建script标签 。 同样，通过XHR获取的脚本必须部署在和主页面相同的域中 。 复制代码 代码如下: Ajax.get(test.js, function (xhr) { injectscript(xhr.responseText); }); function injectscript(scriptText) { var s = document.createElement(script); s.text = scriptText; document.getElementsByTagName(head)[0].appendChild(s); } 4 。Script in Iframe 将需要的脚本放入到一个页面中，然后通过iframe来加载该页面 。 缺点是iframe本身的开销比较大，另外浏览器安全机制不允许iframe中的js访问跨域的父页面，反之亦然 。 5 。Script DOM Element JS动态创建script DOM元素并设置其src属性 。 复制代码 代码如下: var scriptElem = document.createElement(script); scriptElem.src = http://domain.com/test.js; document.ge(head)[0].appendChild(scriptElem); 6 。Script Defer 给script标签添加defer属性 。 缺点是只有IE和一些新浏览器支持 。 复制代码 代码如下: <script defer src=test.js></script> 7 。document.write Script Tag 使用document.write把HTML标签script写入页面 。 缺点是只有在IE中是并行加载脚本的 。 复制代码 代码如下: document.write("<script type=text/javascript src=test.js><\/script>"); 有一个大家不曾广泛讨论的不同点是对于浏览器忙碌状态的影响，包括浏览器的状态栏、进度条、Tab图标以及鼠标 。 当你加载多个彼此间有依赖关系的脚本时，还需要一种能够保证执行顺序的技术 。
目前异步加载时保持执行顺序的方法有下面几种，由于篇幅原因，暂不详细描述 。 单个脚本 1、Hardcoded Callback 2、Window Onload 3、Timer 4、Script Onload 5、Degrading Script Tags 多个脚本 1、Managed XHR 2、DOM Element and Doc Write 本文参考《高性能网站建设进阶指南》 |
