js文件加载优化

时间 2019-11-08

原文原文链接

在js引擎部分，咱们能够了解到，当渲染引擎解析到script标签时，会将控制权给JS引擎，若是script加载的是外部资源，则须要等待下载完后才能执行。因此，在这里，咱们能够对其进行不少优化工做。javascript

放置在body底部

为了让渲染引擎可以及早的将DOM树给渲染出来，咱们须要将script放在body的底部，让页面尽早脱离白屏的现象，即会提前触发DOMContentLoaded事件. 可是因为在IOS Safari, Android browser以及IOS webview里面即便你把js脚本放到body尾部，结果仍是同样。因此这里须要另外的操做来对js文件加载进行优化.css

defer加载

这是HTML4中定义的一个script属性，它用来表示的是，当渲染引擎遇到script的时候，若是script引用的是外部资源，则会暂时挂起，并进行加载。渲染引擎继续解析下面的HTML文档，解析完时，则会执行script里面的脚本。java

<script src="outside.js" defer></script>

他的支持度是<=IE9的.
而且，他的执行顺序，是严格依赖的，即:react

<script src="outside1.js" defer></script>
<script src="outside2.js" defer></script>

当页面解析完后，他便会开始按照顺序执行 outside1 和 outside2文件。
若是你在IE9如下使用defer的话，可能会遇到它们两个不是顺序执行的，这里须要一个hack进行处理，即在两个中间加上一个空的script标签jquery

<script src="outside1.js" defer></script>
<script></script> //hack
<script src="outside2.js" defer></script>

可是，若是你将defer属性用在inline的script脚本里面，在Chrome和FF下是没有效果的。
即:webpack

<script type="text/javascript" defer = "defer">   //没有效果
      console.log("defer doesn't make sense");
    </script>

async加载

async是H5新定义的一个script 属性。他是另一种js的加载模式。web

渲染引擎解析文件，若是遇到script(with async)ajax
继续解析剩下的文件，同时并行加载script的外部资源数组
当script加载完成以后，则浏览器暂停解析文档，将权限交给JS引擎，指定加载的脚本。浏览器
执行完后，则恢复浏览器解析脚本

能够看出async也能够解决阻塞加载这个问题。不过，async执行的时候是异步执行，形成的是，执行文件的顺序不一致。即:

<script src="outside1.js" async></script>
<script src="outside2.js" async></script>

这时，谁先加载完，就先执行谁。因此，通常依赖文件就不该该使用async而应该使用defer.
defer的兼容性比较差，为IE9+,不过通常是在移动端使用，也就不存在这个problem了。
其实，defer和async的原理图，如图同样。(包括放在head中的script标签)

脚本异步

脚本异步是一些异步加载库(好比require)使用的基本加载原理. 直接上代码:

function asyncAdd(src){
    var script = document.createElement('script');
    script.src = src;
    document.head.appendChild(script);
}
//加载js文件
asyncAdd("test.js");

这时候，能够异步加载文件，不会形成阻塞的效果.
可是，这样加载的js文件是无序的，没法正常加载依赖文件。
若是你想要js文件按照你自定义的顺序执行，则要将async设置为false. 可是会阻塞其它文件的加载

var asyncAdd = (function(){
    var head = document.head,
        script;
    return function(src){
        script = document.createElement('script');
        script.src= src;
        script.async=false;
        document.head.appendChild(script);
    }
})();
//加载文件
asyncAdd("first.js");
asyncAdd("second.js");
//或者简便一点
["first.js","second.js"].forEach((src)=>{async(src);});

可是，使用脚本异步加载的话，须要等待css文件加载完后，才开始进行加载，不能充分利用浏览器的并发加载优点。而使用静态文本加载async或者defer则不会出现这个问题。
使用脚本异步加载时，只能等待css加载完后才会加载

使用静态的async加载时，css和js会并发一块儿加载

(from 妙净)

关于这三种如何取舍，那就主要看leader给咱们目标是什么，是兼容IE8,9仍是手机端，仍是桌面浏览器，或者两两组合。
可是对于单独使用某一个技能的场景，使用时须要注意一些tips。
js文件放置位置应该放置到body末尾
若是使用async的话，最后加上defer以求向下兼容

<script src="test.js" async defer></script> //若是二者都支持，async会默认覆盖掉defer
//若是只支持一个，则执行对应的便可

一般，咱们使用的加载都是defer加载(由于很强的依赖关系).
但，上面的简单js文件依赖加载只针对于，依赖关系不强，或者说，相互关联性不强的js文件。先在js模块化思想已经成为主流，若是这样手动添加defer或者async是没有太大的实际意义的。
缘由就在于，好复杂~
因此，才有了webpack,requireJS等模块打包工具。这也是给咱们在性能和结构上寻找一个平衡点的尝试。
这里也给你们安利一些建议:
业务逻辑代码使用模块化书写，测试代码或者监听代码使用async,或者defer填充。这也是比较好的实践。

深刻脚本异步加载

最简单的脚本异步就是在head里添加一个script标签.

var asyncAdd = (function(){
    var head = document.head,
        script;
    return function(src){
        script = document.createElement('script');
        script.async=false;
        document.head.appendChild(script);
    }
})();
asyncAdd("test.js"); //异步加载文档

这样写，其实还不如，直接加async. 这样简单的异步加载，是不能知足咱们模块化书写的庞大业务逻辑的。这里，咱们将一步一步的优化咱们的代码，实现，异步js文件加载的模块化.

串行加载js文件

对上述简单js异步脚本的升级版就是使用串行方式，加载js脚本。首先，咱们须要了解一下，DOMreadyState和onload事件，这里先安利一下Nicholas大神推荐的一份检测onload的脚本:

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.body.appendChild(script);
}

但从IE11开始，已经支持onload事件，不过，如今这份代码的价值仍是很是大的, 目前主流兼容IE8+。
固然，咱们可使用loadScript中进行回调加载.

loadScript("test1.js",loadScript("test2.js",loadScript("test3.js")));

不过，这简直就是没人性的写法。因此，这里咱们能够进行优化一下。咱们可使用之前的模式，进行重构，这里我选择命令模式和链式调用。
直接贴代码吧:

var loadJs = (function() {
        var script = document.createElement('script');
        if (script.readyState) {
            return function(url, cb) {
                script = document.createElement('script');
                script.src = url;
                document.body.appendChild(script);
                script.onreadystatechange = function() {
                    if (script.readyState == "loaded" ||
                        script.readyState == "complete") {
                        script.onreadystatechange = null; //解除引用
                        cb();
                    }
                };
            }
        } else {
            return function(url, cb) {
                script = document.createElement('script');
                script.src = url;
                document.body.appendChild(script);
                script.onload = function() {
                    cb();
                };
            }
        }
    })();

    //测试用例: commandJs.add("test.js",[test.js,test1.js]).exe();
    //或者 commandJs.add("test.js").add("test1.js").add([test1.js,test2,js]).exe();
    var commandJs = (function() {
        var group = [],
            len = 0;
        //类型检测
        //数组
        var isArray = function(para) {
                return (para instanceof Array);
            }
            //String类型
        var isString = function(para) {
                return Object.prototype.toString.call(para) === "[object String]";
            }
            //集合检测
        var correctType = function(para) {
                return isString(para) || isArray(para);
            }
            //添加src内容
        var add = function() {
            for (var i = 0, js; js = arguments[i++];) {
                if (!correctType(js)) {
                    throw new Error(`the ${i}th js file's type is not correct`);
                }
                group.push(js);
            }
            return this;
        }
        var isFinish = function() {
                len--;
                if (len === 0) {
                    exe(); //开始加载下一组js文件
                }
            }
            //并行加载js文件
        var loadArray = function(urls) {
            urls.forEach((url) => {
                loadJs(url, (function() {
                    isFinish(); //判断是否执行彻底
                }).bind(this));
            });
        }
        var exe = function() {
            if (group.length === 0) return; //遍历完全部的urls时，退出执行
            var js = group.shift();
            if (isArray(js)) {
                len = js.length;
                loadArray(js);
            } else {
                len = 1;
                loadArray([js]);
            }
            return this;
        }
        return {
            exe,
            add
        }
    })();

OK，咱们来验证同样，串行执行的测试结果:

commandJs.add('./js/loader01.js').add('./js/loader02.js').exe();
//或者
commandJs.add('./js/loader01.js','./js/loader02.js').exe();
//这两种写法都是能够的

最后的结果是:

ok~ 能够经过，这样能够自定义加载不少依赖文件。可是，形成结果是，时间成本耗费太大。有时候，一个主文件的main 有不少依赖js模块, 那么咱们考虑一下，可否把这些js模块并行加载进来呢？

其实，上面的那一串代码，已经将串行和并行给结合起来了。那并行是怎么作的呢？其实就是，同时向页面中添加script tag而后监听，是否全部的tag都已经加载完整。若是是，开始加载下一组js文件。

其实，最主要的代码块是这里:

var isFinish = function() {
                len--;
                if (len === 0) {
                    exe(); //开始加载下一组js文件
                }
            }
            //并行加载js文件
        var loadArray = function(urls) {
            urls.forEach((url) => {
                loadJs(url, (function() {
                    isFinish(); //判断是否执行彻底
                }).bind(this));
            });
        }
//执行顺序就是,而后中间加了一些trick进行，类型的判断.
//exe=> loadArray => isFinish ~>exe

并行加载js

OK，上面咱们已经测试了js的异步加载，这里咱们测试一下js并行加载的效果:

commandJs.add(['./js/loader01.js','./js/loader02.js']).exe();

上图时间:

咱们对比一下异步加载的:

从上面很容易知道，异步和同步加载的区别，由于这个文件较小体现的价值不是很大，咱们换一个比较大的文件进行加载:

//并行:
 commandJs.add(['http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js','https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom-server.js']).exe();
 //串行
commandJs.add('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js','https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom-server.js').exe();

看一下图:
//并行

//串行

你们能够钩钩手指，算一下二者的时间差，一个是取max，一个是取add. 结果是显而易见的。固然，模块加载插件好比requireJS,labJS,他们所要作的功能比这里的要丰满的多，当你多个文件引入同一个依赖的时候，只须要加载一次(判断惟一性), 以及引用模块的ID 的标识等。
js 脚本异步加载还有不少方法，好比xhr, iframe ,以及使用img 的 src进行加载，这些都是可行的，可是他们的局限性也很大， xhr,iframe的同域要求，使用img还不如直接使用script。我这里列一下他们的大概状况表吧

加载方式	实现效果
xhr	脚本并行下载，要求同域，不会阻塞其余资源
iframe	要求同域，脚本并行下载，不阻塞其余资源，但损耗较大，目前业界推崇淘汰
img	惨无人道，你们知道有就好了

其实，你们看到这里也就能够了。下文，主要是我对上面代码的一个优化，或者说是Promise实践. 因为懒得开篇幅了，因此就直接接着写。

使用Promise异步加载

前面说了，若是使用像loadScript这种，直接进行回调串行的话，形成的结果是，callback hell;
即

loadScript("test1.js",loadScript("test2.js",loadScript("test3.js")));

若是了解Promise的童鞋，应该知道,使用Promise就能够彻底解决这个问题。这里，咱们使用Promise对上面进行代码进行重构

var loadJs = (function() {
        var script = document.createElement('script');
        if (script.readyState) {
            return function(url) {
                return new Promise(function(res, rej) {
                    script = document.createElement('script');
                    script.src = url;
                    document.body.appendChild(script);
                    script.onreadystatechange = function() {
                        if (script.readyState == "loaded" ||
                            script.readyState == "complete") {
                            script.onreadystatechange = null; //解除引用
                            res();
                        }
                    };
                })
            }
        } else {
            return function(url) {
                return new Promise(function(res, rej) {
                    script = document.createElement('script');
                    script.src = url;
                    document.body.appendChild(script);
                    script.onload = function() {
                        res();
                    };
                })
            }
        }
    })();

接着，咱们来调用代码看看:

loadJs('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js')
    .then(function(){
        return loadJs('./js/loader01.js');
    }).then(function(){
        console.log("finish loading");
    })

结果是:

那若是咱们想并行加载的话，怎么办呢？很简单使用Promise提供的all函数就能够了.
show u the code:

Promise.all([loadJs('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js'),loadJs('./js/loader01.js')])

结果为:
OK~ 平时，咱们加载模块的时候，就可使用Promise来进行练习，这样能够减小不少没必要要的逻辑代码。简直，赞~\(≧▽≦)/~