异步加载JS脚本

10 Aug

JavaScript脚本对现代网站来说是必不可少的。当用户访问站点,需要下载各种资源,例如JS脚本,CSS,图片,iframe等。

浏览器下载除JS外的资源时,会并行下载,以提高性能。但下载JS脚本时,会禁止并行下载(称为脚本阻塞Scripts Block Downloads)。浏览器遇到JS时,必须等JS下载,解析,执行完后,才能继续并行下载下一个资源。原因是JS可能会改变页面或改变JS间的依赖关系,例如A.js中用document.write改变页面,B.js依赖于A.js。因此要严格保证顺序,不能并行下载。

(你可以点击这里,试一下本篇中所有例子)

因此不推荐将JS放到<head>标签里,你可以点击例子页面试一下。浏览器遇到<script>标签会下载,解析,执行完脚本后,才继续处理剩余的页面部分。而且浏览器在遇到<body>标签前是不会渲染页面的,因此例子中处理JS用了2s,页面会白屏2s。

为了避免白屏,通常的建议是将JS放到<body>标签底下,可以有最佳的用户体验,你可以点击例子页面试一下。如果你放到了<body>标签的上部,因为脚本阻塞,可能会影响用户体验。例子中位于<body>上部的JS耗时2s,因此位于JS下面的两张img图片,会等2s后才开始加载。

将JS放在<body>底下的建议没有错,几乎成了前端的普世规则。但对于追求极致用户体验的站点,或大型网站来说,这还不够。虽然JS脚本由于存在的依赖关系,需要按顺序执行,但并不需要按顺序下载。本篇就介绍一下让JS与其他组件并行下载的方法,即异步处理脚本。

  • 异步处理外部脚本:(按推荐度从高到低排列)
    • Dynamic Script Element
    • Script async
    • Script defer
    • XHR Eval
    • XHR Inject
    • Script in iframe
    • 直接写入HTML
    • document.write Script
  • 忙指示器
  • 异步处理外部脚本总结
  • 异步处理行内脚本

Dynamic Script Element

通常我们加载JS脚本会在HTML里:

<script type="text/javascript" src="A.js"></script>

这属于静态脚本元素,浏览器执行到这里发现script元素,会按上面所说的,下载解析执行脚本,同时阻塞其他资源文件的下载。而动态脚本元素如下:

var script = document.createElement('script');	//创建script标签
script.type = "text/javascript";
script.src = "A.js";
document.getElementsByTagName('head')[0].appendChild(script);	//塞进页面

先用document.createElement(‘script’)生成一个script标签,再设置它的src属性,最后将其插入到<head>中。

script标签被插入到页面的DOM树后,就会开始下载src属性指定的脚本。而且通过动态脚本元素下载脚本是异步的,不会阻塞页面的其他下载和处理过程,因此script标签插入<head>中也没问题。

当JS下载完毕后,就会立即执行。如果多个JS间有依赖关系,一下载完马上执行可能会出现error。因此通常来说你应该将有依赖关系的JS合并成一个文件,虽然合并后JS文件会变大,但由于是异步下载,你几乎不会有什么损失。

如果实在不方便将有依赖关系的文件合并。你需要自己指定先后顺序,通过监听load事件(IE是onreadystatechange)来确保依次加载脚本:

function loadScript(url, callback){
    var script = document.createElement ("script")
    script.type = "text/javascript";

    if (script.readyState){ //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

//严格确保A->B->C,依次下载脚本文件
loadScript("A-delay.js", function(){
    loadScript("B-delay.js", function(){
        loadScript("C-delay.js", function(){
            console.log("All files are loaded!");
        });
    });
});

该技术不但简单,而且通用,且可以跨域,应该成为你的首选。

Script async

HTML5里为script标签里新增了async属性,用于异步加载脚本:

<script type="text/javascript" src="alert.js" async="async"></script>

浏览器解析到HTML里的该行script标签,发现指定为async,会异步下载解析执行脚本。

例子页面的DOM结构里由于script在img图片之前,如果你的浏览器支持async的话,就会异步加载脚本。此时DOM里已经有img元素了,所以脚本里能顺利取到img的src并弹框。

该方式可以跨域。缺点是HTML5里新增属性,如果你需要继续支持旧版本浏览器可能需要打些补丁。

Script defer

script标签里可以设置defer,表示延迟加载脚本:

<script type="text/javascript" src="alert.js" defer="defer"></script>

浏览器解析到HTML里的该行script标签,发现指定为defer,会暂缓下载解析执行脚本。而是等到页面加载完毕后,才加载脚本(更精确地说,是在DOM树构建完成后,在window.onload触发前,加载defer的脚本)。

例子页面的DOM结构里由于script在img图片之前,如果你的浏览器支持defer的话,就会延迟到页面加载完后才下载脚本。此时DOM里已经有img元素了,所以脚本里能顺利取到img的src并弹框。

该方式可以跨域。缺点是虽然不像async属于HTML5的新属性,但defer仍旧有旧版本浏览器不支持。(根据w3cschool的说法,只有IE浏览器支持defer,试验下来其他浏览器新版均已支持defer,所以w3cschool的说法已经过时)

XHR Eval

通过传统的Ajax方式,用XMLHttpRequest(低版本IE中是ActiveXObject)异步获得脚本内容后,通过eval执行脚本:

function createRequest() {  
    try {  
        request = new XMLHttpRequest();  
    } catch (tryMS) {  
        try {             
            request = new ActiveXObject("Msxml2.XMLHTTP");    
        } catch (otherMS) {   
            try {  
                request = new ActiveXObject("Microsoft.XMLHTTP");  
            } catch (failed) {  
                request = null;  
            }  
        }  
    }
    return request;  
}  

var request = createRequest();    //获得一个请求对象
request.onreadystatechange = function() {
    if (request.readyState == 4) {
        if ((request.status >= 200 && request.status < 300) || request.status == 304) {
            eval(request.responseText);
        }
    }
};
request.open("GET", "alert.js", true);
request.send(null);

这种Ajax方式能让浏览器异步加载脚本,不会阻塞其他资源的下载。缺点是不支持跨域,因此脚本和页面必须在同一个域。

例子页面的DOM结构里由于脚本在img图片之前,如果不是异步加载脚本的话,是无法alert出图片的URL地址的。

另外应该会有人表示eval有性能上的问题,理论上确实如此,但还是得以实测为准,可能需要你在几ms的性能问题和异步下载带来的优势之间做出权衡。还有人表示eval有安全隐患,理论上确实如此。但因为不能跨域,通常站点里的脚本你应该有绝对的控制权。如果JS里不涉及input元素,我不认为会出现什么安全隐患…当然如果你对eval深恶痛绝,也可以换成XHR Inject方式。

XHR Inject

和XHR Eval的区别是:用传统Ajax方式下载脚本后,不再通过eval,而是动态创建script元素后塞进页面。将XHR Eval里的eval部分替换成下面代码即可:

var script = document.createElement("script");
script.type = "text/javascript";
script.text = request.responseText;
document.body.appendChild(script);

动态创建的script元素将被塞到body底部,塞进去之后就会开始执行脚本。优缺点基本同XHR Eval,同样不能跨越。虽然避免了eval性能和安全的问题,但效率可能比XHR Eval稍微低一点。

Script in iframe

利用iframe可以和其他组件并行下载的特性,将脚本嵌入到iframe里实现异步加载。缺点同样是不能跨越,脚本和页面必须在同一个域中。

<iframe src='alert.html' width=0 height=0 frameborder=0 id='iframe1'></iframe>

创建iframe,注意src里是alert.html,而非alert.js。需要新建一个alert.html,将alert.js内容内嵌进去。

该技术的缺点除了不能跨域外,还包括iframe的共通问题。例如iframe的开销比其他DOM元素高很多。iframe会阻塞onload事件,而我们通常希望onload能尽快触发,因为onload触发时浏览器会停止忙指示器,能让用户感觉快了一点。

直接写入HTML

简单粗暴无内涵,将外部脚本的内容拷贝粘贴进HTML:

<script type="text/javascript">
    function(...);
    ...
</script>

这个方法的优点是可以严格保证JS顺序,还能减少HTTP请求。缺点是不能享受不到浏览器缓存。由于缓存对站点来说如此的重要,因此不推荐这个方法。况且该方法会增大HTML体积,因此只有极少数情况下,例如网站首页非常重要的内容,且JS代码较少时,才会考虑将JS直接写入HTML里。

document.write Script

在IE中可以用document.write把script元素写入HTML可以实现并行下载脚本,但下载脚本时仍旧会对其他资源造成脚本阻塞:

document.write("<script type=\"text/javascript\" src=\"A-delay.js\"><\/script>");
document.write("<script type=\"text/javascript\" src=\"B-delay.js\"><\/script>");

该特性适用范围很窄,我只在IE9上确认过。基本不推荐。

忙指示器

浏览器在加载时有4种方式提示用户:标签页前的菊花转(见下图),左下角显示”已连接到 xxxx”(见下图),底部中央显示进度条,鼠标成漏斗状。后两者因为太丑,在现代浏览器中已被隐藏,老式浏览器比较明显。

jsload1

上面介绍的异步方式中,通过script技术下载脚本会触发浏览器这些忙指示器。但XHR方式不会触发浏览器的忙指示器。你需要权衡哪些需要让用户知道正在下载,哪些不需要让用户知道。

异步处理外部脚本总结

对上面介绍的方法做一下总结。具有共通性的跨域,和忙指示器见下图:

jsload2

通常来说你应该放弃document.write Script方式。只有在很少情况下才会选用直接写入HTML的方式。

如果资源需要跨域,你需要放弃XHR Eval,XHR Inject,Script in iframe方式

如果需要兼容旧式浏览器,你可能需要放弃Script async,Script defer

常规的<script type=”text/javascript” src=”xxx.js”></script>方式加载外部脚本,因为有脚本阻塞问题,可能会出现白屏,页面卡等问题。程度视加载脚本耗时而定。用本篇介绍的方法来加载外部脚本可以大大改善用户体验。

异步处理行内脚本

直接写进HTML的JS代码虽然不存在下载的问题,但需要考虑执行速度。如果执行速度慢,同样会有脚本阻塞的问题。但相比外部脚本,处理行内脚本就简单多了。常见的方式如下:(按推荐度从高到低排列)

行内脚本移到HTML底部:不赘述。

异步执行行内脚本:耗时小用setTimeout,等价于移到了HTML底部。耗时多用window.onload。例如:

<script type="text/javascript">
    function doSomething() {…}
    setTimeout(doSomething, 0);
</script>

如果行内代码执行的速度很快,像上面那样将setTimeout的时间设成0就行了。如果执行很耗时,为了逐步渲染,你可以用绑定到window.onload事件上:

<script type="text/javascript">
    function doSomething() {…}
    window.onload = doSomething;
</script>

Script defer:defer属性同样适用于行内脚本,具体参照上面,不赘述。

总结

看到这里你可能会很疑惑,现在大型前端开发中加载JS,会用一些现成的加载工具,如AMD的requirejs,seajs, mass,oyejs等,它们既能异步下载,又能保证顺序,用起来又方便。知道这些有什么用呢?这就看得你的追求了,好比用jQuery能让新手很快速上手进行开发,但JavaScript基础不好,估计也只能用jQuery做点简单开发。理解了本篇,对你查看seajs等源码有好处,能让你对这些工具有更感性的认识。

Leave a Reply

Your email address will not be published. Required fields are marked *