Javascript 异步加载详解

本文总结一下浏览器在 javascript 的加载方式。
关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属性, defer 属性
一、同步加载与异步加载的形式

  1. 同步加载
    我们平时最常使用的就是这种同步加载形式:
    <script src="http://yourdomain.com/script.js"></script>
    同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。
    js 之所以要同步执行,是因为 js 中可能有输出 document 内容、修改dom、重定向等行为,所以默认同步执行才是安全的。
    以前的一般建议是把<script>放在页面末尾</body>之前,这样尽可能减少这种阻塞行为,而先让页面展示出来。
    简单说:加载的网络 timeline 是瀑布模型,而异步加载的 timeline 是并发模型。
  2. 常见异步加载(Script DOM Element)
(function() {
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.async = true;
     s.src = 'http://yourdomain.com/script.js';
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
 })();

异步加载又叫非阻塞,浏览器在下载执行 js 同时,还会继续进行后续页面的处理。
这种方法是在页面中<script>标签内,用 js 创建一个 script 元素并插入到 document 中。这样就做到了非阻塞的下载 js 代码。
async属性是HTML5中新增的异步支持,见后文解释,加上好(不加也不影响)。
此方法被称为 Script DOM Element 法,不要求 js 同源。
将js代码包裹在匿名函数中并立即执行的方式是为了保护变量名泄露到外部可见,这是很常见的方式,尤其是在 js 库中被普遍使用。
例如 Google Analytics 和 Google+ Badge 都使用了这种异步加载代码:
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();

但是,这种加载方式在加载执行完之前会阻止 onload 事件的触发,而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等,所以还是会阻塞部分页面的初始化处理。

  1. onload 时的异步加载
    (function() {
    function async_load(){
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://yourdomain.com/script.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
    window.attachEvent('onload', async_load);
    else
    window.addEventListener('load', async_load, false);
    })();

这和前面的方式差不多,但关键是它不是立即开始异步加载 js ,而是在 onload 时才开始异步加载。这样就解决了阻塞 onload 事件触发的问题。
补充:DOMContentLoaded 与 OnLoad 事件
DOMContentLoaded : 页面(document)已经解析完成,页面中的dom元素已经可用。但是页面中引用的图片、subframe可能还没有加载完。
OnLoad:页面的所有资源都加载完毕(包括图片)。浏览器的载入进度在这时才停止。
这两个时间点将页面加载的timeline分成了三个阶段。
4.异步加载的其它方法
由于Javascript的动态特性,还有很多异步加载方法:
XHR Eval
XHR Injection
Script in Iframe
Script Defer
document.write Script Tag
还有一种方法是用 setTimeout 延迟0秒 与 其它方法组合。
XHR Eval :通过 ajax 获取js的内容,然后 eval 执行。
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');

Script in Iframe:创建并插入一个iframe元素,让其异步执行 js 。
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();

GMail Mobile:页内 js 的内容被注释,所以不会执行,然后在需要的时候,获取script元素中 text 内容,去掉注释后 eval 执行。
<script type="text/javascript">
/*
var ...
*/
</script>

详见参考资料中2010年的Velocity 大会 Steve Souders 和淘宝的那两个讲义。
二、async 和 defer 属性

  1. defer 属性
    <script src="file.js" defer></script>
    defer属性声明这个脚本中将不会有 document.write 或 dom 修改。
    浏览器将会并行下载 file.js 和其它有 defer 属性的script,而不会阻塞页面后续处理。
    defer属性在IE 4.0中就实现了,超过13年了!Firefox 从 3.5 开始支持defer属性 。
    注:所有的defer 脚本保证是按顺序依次执行的。

  2. async 属性
    <script src="file.js" async></script>
    async属性是HTML5新增的。作用和defer类似,但是它将在下载后尽快执行,不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
    Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer,这样IE 4之后的所有 IE 都支持异步加载。

  3. 详细解释
    <script> 标签在 HTML 4.01 与 HTML5 的区别:
    type 属性在HTML 4中是必须的,在HTML5中是可选的。
    async 属性是HTML5中新增的。
    个别属性(xml:space)在HTML5中不支持。
    说明:
    没有 async 属性,script 将立即获取(下载)并执行,然后才继续后面的处理,这期间阻塞了浏览器的后续处理。
    如果有 async 属性,那么 script 将被异步下载并执行,同时浏览器继续后续的处理。
    HTML4中就有了defer属性,它提示浏览器这个 script 不会产生任何文档元素(没有document.write),因此浏览器会继续后续处理和渲染。
    如果没有 async 属性 但是有 defer 属性,那么script 将在页面parse之后执行。
    如果同时设置了二者,那么 defer 属性主要是为了让不支持 async 属性的老浏览器按照原来的 defer 方式处理,而不是同步方式。
    另参见官方说明:script async
    个人补充:
    既然 HTML5 中已经支持异步加载,为什么还要使用前面推荐的那种麻烦(动态创建 script 元素)的方式?
    答:为了兼容尚不支持 async 老浏览器。如果将来所有浏览器都支持了,那么直接在script中加上async 属性是最简单的方式。
    三、延迟加载(lazy loading)
    前面解决了异步加载(async loading)问题,再谈谈什么是延迟加载。
    延迟加载:有些 js 代码并不是页面初始化的时候就立刻需要的,而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js,而是在需要的时候或稍后再通过js 的控制来异步加载。
    也就是将 js 切分成许多模块,页面初始化时只加载需要立即执行的 js ,然后其它 js 的加载延迟到第一次需要用到的时候再加载。
    特别是页面有大量不同的模块组成,很多可能暂时不用或根本就没用到。
    就像图片的延迟加载,在图片出现在可视区域内时(在滚动条下拉)才加载显示图片。
    四、script 的两阶段加载 与 延迟执行(lazy execution)
    JS的加载其实是由两阶段组成:下载内容(download bytes)和执行(parse and execute)。
    浏览器在下载完 js 的内容后就会立即对其解析和执行,不管是同步加载还是异步加载。
    前面说的异步加载,解决的只是下载阶段的问题,但代码在下载后会立即执行。
    而浏览器在解析执行 JS 阶段是阻塞任何操作的,这时的浏览器处于无响应状态。
    我 们都知道通过网络下载 script 需要明显的时间,但容易忽略了第二阶段,解析和执行也是需要时间的。script的解析和执行所花的时间比我们想象的要多,尤其是script 很多很大的时候。有些是需要立刻执行,而有些则不需要(比如只是在展示某个界面或执行某个操作时才需要)。
    这些script 可以延迟执行,先异步下载缓存起来,但不立即执行,而是在第一次需要的时候执行一次。
    利用特殊的技巧可以做到 下载 与 执行的分离 (再次感谢 javascript 的动态特性)。比如将 JS 的内容作为 Image或 object 对象加载缓存起来,所以就不会立即执行了,然后在第一次需要的时候再执行。
    此部分的更多解释 请查看末尾参考资料中 ControlJS 的相关链接。
    小技巧:

  4. 模拟较长的下载时间:
    写个后端脚本,让其 sleep 一定时间。如在 jsp 中 Thread.sleep(5000); ,这样5秒后才能收到内容。

  5. 模拟较长的 js 代码执行时间(因为这步一般比较快不容易观察到):
    var t_start = Number(new Date());
    while ( t_start + 5000 > Number(new Date()) ) {}
    这个代码将使 js 执行5秒才能完成!
    五、script 标签使用的历史

  6. script 放在 HEAD 中
    <head>
    <script src=“…”></script>
    </head>

阻止了后续的下载;
在IE 6-7 中 script 是顺序下载的,而不是现在的 “并行下载、顺序执行” 的方式;
在下载和解析执行阶段阻止渲染(rendering);

  1. script 放在页面底部(2007)
    ...
    <script src=“…”></script>
    </body>

不阻止其它下载;
在IE 6-7 中 script 是顺序下载的;
在下载和解析执行阶段阻止渲染(rendering);

  1. 异步加载script(2009)
    var se = document.createElement
    ('script');
    se.src = 'http://anydomain.com/A.js';
    document.getElementsByTagName('head')
    [0].appendChild(se);

这就是本文主要说的方式。
不阻止其它下载;
在所有浏览器中,script都是并行下载;
只在解析执行阶段阻止渲染(rendering);

  1. 异步下载 + 按需执行 (2010)
    var se = new Image();
    se.onload = registerScript();
    se.src = 'http://anydomain.com/A.js';
    把下载 js 与 解析执行 js 分离出来
    不阻止其它下载;
    在所有浏览器中,script都是并行下载;
    不阻止渲染(rendering)直到真正需要时;
    六、异步加载的问题
    在异步加载的时候,无法使用 document.write 输出文档内容。
    在同步模式下,document.write 是在当前 script 所在的位置输 出文档的。而在异步模式下,浏览器继续处理后续页面内容,根本无法确定 document.write 应该输出到什么位置,所以异步模式下 document.write 不可行。而到了页面已经 onload 之后,再执行 document.write 将导致当前页面的内容被清空,因为它会自动触发 document.open 方法。
    实际上document.write的名声并不好,最好少用。
    替代方法:
  2. 虽然异步加载不能用 document.write,但还是可以onload之后执行操作dom(创建dom或修改dom)的,这样可以实现一些自己的动态输出。比如要在页面异步创建一个浮动元素,这和它在页面中的位置就没关系了,只要创建出该dom元素添加到 document 中即可。
  3. 如果需要在固定位置异步生成元素的内容,那么可以在该固定位置设置一个dom元素作为目标,这样就知道位置了,异步加载之后就可以对这个元素进行修改。
    六、JS 模块化管理
    异步加载,需要将所有 js 内容按模块化的方式来切分组织,其中就存在依赖关系,而异步加载不保证执行顺序。
    另外,namespace 如何管理 等相关问题。这部分已超出本文内容,可参考:
    RequireJS 、 CommonJS 以及 王保平(淘宝)的 SeaJS 及其博客 。
    七、JS最佳实践:
  4. 最小化 js 文件,利用压缩工具将其最小化,同时开启http gzip压缩。工具:
  5. 尽量不要放在 <head> 中,尽量放在页面底部,最好是</body>之前的位置
  6. 避免使用 document.write 方法
  7. 异步加载 js ,使用非阻塞方式,就是此文内容。
  8. 尽量不直接在页面元素上使用 Inline Javascript,如onClick 。有利于统一维护和缓存处理。
    参考资料:
    Lazy Loading Asyncronous Javascript
    Load Non-blocking JavaScript with HTML5 Async and Defer
    2010年 Velocity China 上的两个讲义:
    Steve Souders(Google)的 Even Faster Web Sites (pdf)
    李穆(淘宝)的 第三方广告代码稳定性和性能优化实战 (pdf)

http://www.cnblogs.com/tiwlin/archive/2011/12/26/2302554.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容

  • 首先我们先来看一下Script标签的各项属性: script标签也支持HTML中的全局属性: 下面我们来看看一看j...
    tobAlier阅读 1,002评论 0 2
  • Tif_Lib阅读 463评论 0 1
  • 1、json:轻量级的数据交换格式;[前后端数据传输都是json格式的,对象里面的键必须要有双引号,不可省略;传输...
    官清岁月阅读 733评论 0 2
  • JavaScript脚本对现代网站来说是必不可少的。当用户访问站点,需要下载各种资源,例如JS脚本,CSS,图片,...
    张歆琳阅读 9,053评论 0 24
  • 在《四季》一文中,春天来了,书中说道:“草芽尖尖。”你觉得春天还有什么特点吗?桃花开了。没错,那能不能改成文中句子...
    小智哒哒阅读 348评论 0 1