JavaScript性能优化随记

1、将脚本放在底部;

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

3、无阻塞加载:在 windowonload事件触发后再下载脚本;

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

相关推荐