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


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 相关文章推荐
解决js正则匹配换行问题实现代码
Dec 10 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
JS制作简单的三级联动
Mar 18 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
善用事件代理,警惕闭包的性能陷阱。
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
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
2011/07/31 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
python 调用c语言函数的方法
2017/09/29 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
python访问hdfs的操作
2020/06/06 Python
Django权限控制的使用
2021/01/07 Python
幼儿园开学家长寄语
2014/01/19 职场文书
电台实习生求职信
2014/02/25 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
党建工作汇报材料
2014/12/24 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书