JavaScript性能优化随记

1、将脚本放在底部；

2、减少页面中外链脚本的数量；

3、无阻塞加载：在 window的onload事件触发后再下载脚本；

4、带有defer属性的<script>标签可以放置在文档的任何位置。对应的 JavaScript 文件将在页面解析到<script>标签时 开始下载，但不会执行，直到 DOM 加载完成，即onload事件触发前才会被执行；

defer 属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持

<script type="text/javascript" src="script1.js" defer></script>  

 

5、动态脚本元素：动态脚本加载是非阻塞 JavaScript 下载中最常用的模式，因为它可以跨浏览器，而且简单易用；

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.getElementsByTagName("head")[0].appendChild(script);
}

 

6、使用 XHR 对象下载 JavaScript 代码并注入页面中。

 

via：http://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/index.html