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


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 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 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实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
大学校园生活自我鉴定
2014/01/13 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
寻找成龙观后感
2015/06/12 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS