【上车】加载和执行 JS 的正确姿势

阅读 987
收藏 47
2017-02-25
原文链接:kyrieliu.cn

前言

kyrieliuの《高性能JavaScript》读书笔记。

script标签是一个很“霸道”的狠角色,它的每次出现都让页面等待脚本的解析和执行。也就是说,不管当前的javascript代码是内嵌还是包含在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。
其实,script标签的“霸道”是必须的,因为页面的生存周期中,脚本的执行可能会修改页面的内容。
总之,在解析和执行js的这个过程中,页面渲染和用户交互完全被阻塞了。

脚本位置

说起脚本的位置,脑海里不禁想起来那两句真言:

  1. css放在<head>
  2. js放在</body>

至于why呢,举个栗砸:

<html>
    <head>
        <title>一个栗子</title>
        <script type='text/javascript' src='js_file_1.js'></script>
        <script type='text/javascript' src='js_file_2.js'></script>
        <script type='text/javascript' src='js_file_3.js'></script>
        <link rel='stylesheet' type='text/css' href='css_file.css' />
    </head>

    <body>
        <p>hello from kyrieliu.</p>
    </body>
</html>

这一段看似正常的代码实际上有着肥肠严重的性能问题:在head中加载了三个js文件。
前面我有说到,js文件会阻塞页面渲染,知道它们全部下载并执行完毕后,页面渲染才能继续(无情无耻无理取闹)。
纵观一份html文档,用户真正看得见的内容基本上都写在body标签里,也就是说,浏览器在解析到body标签之前,不会渲染页面的任何部分。现在又写了三个脚本到head标签里面,好嘞,这下子渲染的延迟更明显了,用户在打开这样的一个页面时,看到了what?白屏!用户不能浏览页面的内容,更无法与页面进行交互。

场景还原

第一个js文件开始下载,与此同时阻塞了页面其他文件的下载。等呀等,ok,第一个js文件终于下载完了,第二个js按捺不住自己喜悦的心情,正要开始下载,突然,第一个js文件说:“且慢,老子还没有完事呢”,第二个js文件吓了一跳,站在原地不动。第一个js文件开始执行,等到执行完毕,第二个js文件才得以开始下载。
总之,每个文件必须等到前一个文件下载并执行完成才会开始下载
在这些文件”one by one”的下载执行过程中,用户看到的则是一片空白。

不是那么好的好消息

IE8/Firefox3.5/Safari 4/Chrome 2都允许并行下载js文件,也就是说,script标签在下载外部资源时,不会阻塞其他的script标签。
遗憾的是:

  1. js文件的下载过程仍然会阻塞其他资源的下载,比如图片。
  2. 页面仍然必须等到所有js代码下载并执行完毕才能继续渲染。

因此,尽管浏览器通过允许并行下载提高了性能,但脚本阻塞仍然是一个问题
综上,推荐将所有的script标签尽可能的放在body标签的底部,以尽量减少对整个页面渲染的影响。

组织脚本

既然每个script标签初始下载时都会阻塞页面渲染,那么我们可以通过减少页面上script标签的数量来改善这一情况。不光是外链的脚本,内嵌脚本的数量同样也要限制(毕竟执行js代码也会阻塞页面的渲染)。
对于外链的脚本,这里的情况有一点需要额外注意的地方:考虑HTTP请求会带来额外的性能开销,所以下载单个100kb的文件要比下载四个25kb的文件更快。从这个角度出发,更能说明减少外链脚本文件的数量将会改善性能。
What u should do?合并脚本!

无阻塞的脚本

随着web应用的功能越丰富,所需要的js代码就越多,所以精简源代码也并不总是可行。尽管下载单个较大的js文件只产生一次HTTP请求,但这样做却会锁死浏览器一大段时间。
为了避免这种情况,需要向页面中逐步加载js文件,这样做,在某种程度上来说不会阻塞浏览器。

延迟的脚本

HTML4为script标签定义了一个扩展属性:defer。Defer表明本元素所含的脚本不会修改DOM,因此代码能安全的延迟执行
带有defer属性的script标签可以放在文档的任何位置(不会阻塞浏览器的其他进程,此类文件可以与页面中的其他资源并行下载),对应的js代码将在页面解析到script标签时开始下载,但并不会执行,(onload事件被出发前)才会执行。
PS:截至这本书的第一版(2010年11月),这个属性对IE和Firefox的支持性比较好(我的天居然有IE),如果真要投入到实际的项目中,不妨先去检查一下浏览器的兼容性先~

动态脚本元素

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'js_file.js';
document.getElementsByTagName('body')[0].appendChild(script);

Firefox/Opera/Chrome和Safari 3+会在script元素接收完成时出发一个load事件,所以你可以通过监听这个事件来获得脚本加载完成时的状态:

script.onload = function(){
    console.log('script loaded.');
}

一向特立独行的IE自然有他的另一套:触发一个readystatechange事件。script元素提供一个readyState属性,有以下五种取值:

  1. “uninitialized”
  2. “loading”
  3. “loaded”
  4. “interactive” 数据完成下载但尚不可用
  5. “complete”

所以,

script.onreadystatechange = function(){
    if (script.readyState == 'loaded' || script.readyState == 'complete'){
        script.onreadystatechange = null;
        console.log('script loaded.');
    }
}

至此,我们得到了一个可以应用于广泛浏览器的动态加载脚本用的函数:

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{
        script.onload = function(){
            callback();
        }
    }
}

可以这么用:

loadScript('file.js',function(){
    console.log('script loaded.');
});

也可以这么用:

loadScript('file_1.js',function(){
    loadScript('file_2.js',function(){
        loadScript('file_3.js',function(){
            console.log('all files are loaded.');
        });
    });
});

XMLHttpRequest脚本注入

标题看起来很高大上的样子,其实就是Ajax。

var xhr = new XMLHttpRequest();
xhr.open('get','file.js',true);
xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.text = xhr.responseText;
            document.body.appendChild(script);
        }
    }
};
xhr.send(null);

局限:跨域问题。

小结

  • body闭合标签之前,将所有的script标签放到页面底部。这样能确保在脚本执行前页面已经完成了渲染。
  • 合并脚本。页面中的script标签越少,加载也就越快,响应也更迅速。
  • 无阻塞下载js:
    1. script标签的defer属性
    2. 动态创建script元素来下载并执行代码
    3. 使用XHR对象下载js代码并注入页面中。
劉凯里 wechat

个人微信公众号「刘凯里」,分享前端、随笔以及一些有趣的东西,感谢关注

评论