如何高效的懒加载多个JS文件

原文链接: https://blog.csdn.net/zhehuaxuan/article/details/78336386

1.解决javascript性能问题的本质：
    在javascript中，浏览器使用单一进程来处理UI和javascript脚本，在同一个时刻只能做一件事情，所以javascript的脚本执行耗时越久，那么性能就越差 
   无论是外链还是内链，页面的初始化都需要在脚本初始化之后显示。浏览器从上到下解析html的DOM，当遇到script脚本时，浏览器会停止页面的解析渲染，转去解析js代码，如果js的性能很差，那么就会影响页面的渲染速度，降低用户的体验

2.如何加快页面渲染速度
1）将脚本外链，并放在body的地步：优先加载html的DOM
2）合并脚本，多个脚本合并成一个：使用脚本合并工具
注：在Athena项目中，后期将能够合并的外链js文件都合并掉

3. 无阻塞脚本
1） 延迟的脚本

<script src=”xxx.js” type=”text/javascript” defer></script> 

 一般只在IE4+和FireFox 3.5+支持 带有defer的script标签可以放在文档的任何位置 对应的javascript文件将在页面解析到script标签时开始下载，并且在onload事件开始之前执行。

2）动态脚本元素

function loadScript(url,callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    if(script.readyState){
        script.onreadystatechange = function(){
            if(script.readyState=="loaded"||script.readyState=="complete"){
                script.onreadystatechange = null;
                callback();
            }
        }
    }else{
        script.onload = function(){
            callback();
        }
    }

    script.src= null;
    document.getElementsByTagName("head")[0].appendChild(script);
}

   使用上述的方法动态的加载脚本，文件在执行完该函数时启动下载，文件的下载和执行过程不会阻塞页面的其他进程。 
动态脚本加载因为在浏览器的兼容性和易用性的优势中，成为最通用的无阻塞加载的解决方案。

3）XMLHttpRequest脚本注入

 var xhr = new XMLHttpRequest();
    xhr.open("get","***.js",true);
    xhr.onreadystatechange = function(){
        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);

局限性：js文件只能来自相同的域，不能从SDN下载

4. 推荐使用的无阻塞模式
1）使用3中的2）方式，在body标签结束之前loadScript(url,callback)待加载执行的js文件
2）YUI3方式：待研究
3）LazyLoad 使用LazyLoad加载js文件，用法与1）相同，源码位于http://github.com/rgrove/lazyload/中，后续可以进行研究
4）LABjs

<script type="text/javascript" src="lab.js"></script>
<script type="text/javascript">
    $LAB.script("xxx.js").script("xxx.js").wait(function(){

    })

    $LAB.script("xxx.js").wait().script("xxx.js").wait(function(){

    })
</script>

综合上述，个人觉得使用2）和3）都合适，推荐使用3），2）值得研究源码

总结
</body> 闭合之前，将所有的<script>标签放在页面底部,确保在执行脚本之前完成渲染
合并脚本，页面中的脚本标签越少，页面的加载也越快
使用无阻塞的javascript加载方式：使用LazyLoad或者LABjs库
本文是由《高性能JAVASCRIPT》整理而来