javascript性能优化（1）

加载

1 .javascript的第一条定律：将脚本（js）放到底部。
2 .每一个http请求都会造成额外的性能负担，下载一个100k的文件比下载四个25k的文件要快；减少引用外部脚本的数量
3 .延期脚本defer <script type="text/javascript" src="./a.js" defer></script>；HTML 4.0定义了一个扩展属性：defer。（任何带有defer属性的<script>元素在dom加载完成之前不会被执行，不论是内联脚本还是外部脚本文件，都是这样。）

<script type="text/javascript" src="./a.js" defer></script>
<script type="text/javascript" src="./b.js"></script>
<script>
    console.log("html")
</script>

结果是：

b.js
html
a.js

1. 动态添加js文件

function loadScript(url,cb){
    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;
                (typeof cb=="function")&&(cb());
            }
        }
    }else {  //其他
        script.onload=function(){
            (typeof cb=="function")&&(cb());
        }
    }
    script.src=url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("./b.js",function(){
    console.log(add(3,4))
})

b.js的内容

console.log("b.js");
function add(a,b){
    return a+b;
}

结果：b.js 7
多个文件的次序十分重要，最好是将这些文件按照正确的次序合并成一个文件，独立的文件可以一次性下载所有的代码（由于这是异步进行的，使用一个大的文件是可以的）
动态js加载是非阻塞javascript下载中最常用的模式，因为它可以跨浏览器，而且简单易用。
5. xhr脚本注入

首先创建一个XHR对象；然后下载js文件，接着用一个动态的<script>元素，将js代码注入到页面。

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

但是这个方法需要在同一域名下使用，所以，不能使用cdn，不建议使用该方法。

6.非阻塞注入

先引入dom渲染的js（通过<script src="">引入），一些功能js通过，动态加载js文件，如上面的loadScript();也可以用一些js插件实现，比如LazyLoad.js、lab.js；