加载和实行JS的准确姿态

2019年8月31日 171次阅读 来源: kyrieliu

媒介

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代码并注入页面中。

分享一个还算风趣的前端er:——微信民众号：刘凯里（kkkyrieliu）
    原文作者：kyrieliu
    原文地址: https://segmentfault.com/a/1190000008481413
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞