无阻塞加载脚本分析[全]
更新时间：2011年01月20日 22:49:37 作者：
script标签的阻塞行为会对页面性能产生负面影响，大多数浏览器在下载或执行脚本的同时，会阻塞下载位于它之后的资源，也会阻塞渲染位于它之后的元素。
由于浏览器是单线程的，因此脚本在载的时候会阻塞下载其它资源；虽然在现在浏览器已经有所改善，但仍然有待改进。
很显然，脚本必须按顺序执行，但没有必要按顺序下载，解决方法：
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图标以及鼠标。
当你加载多个彼此间有依赖关系的脚本时，还需要一种能够保证执行顺序的技术。
在大多数情况下，Script DOM Element是一个好的选择。这种方式适用于所有的浏览器，而且没有跨域的限制，实现起来也非常的简单和易于理解。唯一的缺点是不能保证各个脚本的执行顺序。如果需要加载多个有依赖关系的脚本，应该将这些脚本拼成一个来保证其按需要的顺序执行，或者使用别的技术。
目前异步加载时保持执行顺序的方法有下面几种，由于篇幅原因，暂不详细描述。
单个脚本
1、Hardcoded Callback
2、Window Onload
3、Timer
4、Script Onload
5、Degrading Script Tags
多个脚本
1、Managed XHR
2、DOM Element and Doc Write
本文参考《高性能网站建设进阶指南》
很显然，脚本必须按顺序执行，但没有必要按顺序下载，解决方法：
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图标以及鼠标。
当你加载多个彼此间有依赖关系的脚本时，还需要一种能够保证执行顺序的技术。
|
技术
|
并行下载
|
可以跨域
|
存在Script标签
|
忙碌指示 |
顺序保证 |
大小 (bytes) |
|
XHR Eval |
IE, FF, Saf, Chr, Op |
no |
no |
Saf, Chr |
- |
~500 |
|
XHR Injection |
IE, FF, Saf, Chr, Op |
no |
yes |
Saf, Chr |
- |
~500 |
|
Script in Iframe |
IE, FF, Saf, Chr, Op |
no |
no |
IE, FF, Saf, Chr |
- |
~50 |
|
Script DOM Element |
IE, FF, Saf, Chr, Op |
yes |
yes |
FF, Saf, Chr |
FF, Op |
~200 |
|
Script Defer |
IE, Saf4, Chr2, FF3.1 |
yes |
yes |
IE, FF, Saf, Chr, Op |
IE, FF, Saf, Chr, Op |
~50 |
|
document.write Script Tag |
IE, Saf4, Chr2, Op |
yes |
yes |
IE, FF, Saf, Chr, Op |
IE, FF, Saf, Chr, Op |
~100 |
目前异步加载时保持执行顺序的方法有下面几种，由于篇幅原因，暂不详细描述。
单个脚本
1、Hardcoded Callback
2、Window Onload
3、Timer
4、Script Onload
5、Degrading Script Tags
多个脚本
1、Managed XHR
2、DOM Element and Doc Write
本文参考《高性能网站建设进阶指南》
您可能感兴趣的文章:
相关文章
本文主要给大家详细总结了下javascript中的运算符，包括常见的算数运算符、比较运算符和逻辑运算符。十分的清晰，有需要的小伙伴可以参考下。2015-06-06
这篇文章主要为大家详细介绍了微信小程序实现签到功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了PWA介绍及快速上手搭建一个PWA应用的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要为大家介绍了WebGL 绘制与变换使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
javascript suggest效果 自动完成实现代码分享
像百度与google，当我们往搜索框输入东西时就会出现一排列表提示用户有什么热门或适合的候选词，这种效果就叫suggest。本文将一步步教你如何设计它2012-02-02
这篇文章主要介绍了JavaScript数据结构之数组的表示方法,从数据结构线性表的角度分析了数组的原理并结合实例形式分析了javascript数组的定义与使用方法,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了详解使用Nuxt.js快速搭建服务端渲染(SSR)应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
这篇文章主要介绍了详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
本文主要介绍了微信小程序开发之选项卡(窗口底部TabBar)页面切换的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
在 ES5 中，类的继承可以有多种方式，然而过多的选择有时反而会成为障碍，ES6 统了类继承的写法，避免开发者在不同写法的细节之中过多纠缠，但在介绍新方法之前，还是有必要先回顾下ES5中类的继承方式2022-08-08
最新评论