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


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 相关文章推荐
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
详解Node全局变量global模块
Sep 28 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 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链表用法实例分析
2015/07/09 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
js星星评分效果
2014/07/24 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python爬取51job中hr的邮箱
2016/05/14 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
Python连接Redis的基本配置方法
2018/09/13 Python
详解Python中的测试工具
2019/06/09 Python
python字典改变value值方法总结
2019/06/21 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
用python绘制樱花树
2020/10/09 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
化工工艺专业求职信
2013/09/22 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
安全大检查反思材料
2014/01/31 职场文书
企业授权委托书范本
2014/09/22 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
统计员岗位职责范本
2015/04/14 职场文书
班主任工作总结范文
2015/08/13 职场文书
用Python实现Newton插值法
2021/04/17 Python