无阻塞加载脚本分析[全]


Posted in Javascript onJanuary 20, 2011

由于浏览器是单线程的,因此脚本在载的时候会阻塞下载其它资源;虽然在现在浏览器已经有所改善,但仍然有待改进。
很显然,脚本必须按顺序执行,但没有必要按顺序下载,解决方法:
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
在大多数情况下,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
本文参考《高性能网站建设进阶指南》
Javascript 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
javascript中setInterval的用法
Jul 19 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
jquery实现数字输入框
Feb 22 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
js精确的加减乘除实例
Nov 14 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
vue实现扫码功能
Jan 17 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 #Javascript
jqeury eval将字符串转换json的方法
Jan 20 #Javascript
通过Jquery遍历Json的两种数据结构的实现代码
Jan 19 #Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 #Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 #Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 #Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 #Javascript
You might like
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
一个简单的js树形菜单
2011/12/09 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python 中迭代器与生成器实例详解
2017/03/29 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Django REST framework 分页的实现代码
2019/06/19 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
python微信公众号开发简单流程实现
2020/03/09 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
怎么写有吸引力的自荐信
2013/11/17 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
《狐假虎威》教学反思
2014/02/07 职场文书
大四自我鉴定
2014/02/08 职场文书
五一手机促销方案
2014/03/08 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
本科生就业推荐信
2014/05/19 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
生活小常识广播稿
2014/09/16 职场文书
个人工作总结范文2014
2014/11/07 职场文书
出国导师推荐信
2015/03/25 职场文书