《高性能javascript》随记 - Loading and Excecution

当浏览器碰到<script>标签时,页面的加载、介些都邑停下来,运转此javascript代码,然后再继承加载。这类事变同样会发作在那些以”src”属性挪用的外部剧本,浏览器起首下载外部文件的代码,这要占用一些时候,然后在运转这些代码,这又要占用一些时候。此历程当中,页面的剖析与用户的交互都是壅塞的。

剧本的位置

不管是内联剧本照样外部剧本,都应该只管放在<body>标签完毕之前(除非某些剧本需要在页面加载完之前挪用),如许能够保证在运转剧本之前,页面已基础加载完成。

非壅塞剧本

  • 延时剧本
    能够给script标签增加一个属性 – defer ,这个属性表明:元素中的剧本不盘算修正DOM,因而代码能够稍后实行。带有这个属性的任何script元素中的剧本都不会在DOM加载完之前实行,如果是外部剧本,这些剧本起首并行下载,而不会实行,所以不会壅塞页面的加载。实例代码以下:
    <script src="./script/file1.js" defer>

  • 动态剧本元素
    DOM许可你经由历程剧原本建立script元素,像下面如许:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "./script/file1.js";
document.getElementsByTagName("head")[0].appendChild(script);

此文件元素增加到页面后马上最先下载。此手艺的重点在于:不管在那边启动下载,剧本的下载和运转都不会壅塞页面的处置惩罚历程。
为方便运用,我整合了一个动态加载剧本的要领:

function loadJS(url, callback) {
var script = document.creatElement("script");
    script.type = "text/script";
if(script.readyState) {
        script.onreadystatechange = function() {
            if(script.readyState == "loaded" || script.readyState == "complete") {
                script.onreadystatechange = null;
                callback;
            }
        };
    }else {
        script.onload = function() {
            callback();
        };
    }
script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
  • XMLHttpRequest 剧本注入
    另一个以非壅塞的体式格局取得剧本的要领是运用XHR对象将剧本注入到页面中。此手艺先建立一个XHR对象,然后下载剧本文件,接着用一个动态的script元素将javascript代码注入页面:

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

此要领的限定是,你必需下载同一个域下的文件,不能从CDN下载。

    原文作者:MockingBird
    原文地址: https://segmentfault.com/a/1190000000616520
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞