高性能JavaScript读书笔记

参考：《高性能JavaScript》

一、加载和执行

1. 无论当前的JavaScript代码是内嵌还是包含在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成

2. 浏览器在解析到标签之前，不会渲染页面的任何部分（因此将脚本放到body标签底部，可以减少对页面的阻塞时间）

3. 确定该脚本不会修改DOM元素，可以使用defer属性异步加载脚本

• defer下载完成后不会马上执行，直到DOM加载完成，onload事件被触发前才执行
• async--HTML5的属性，也是异步加载脚本，一加载完就执行

4. ==动态脚本==加载凭借着它在跨浏览器兼容性和易用的优势，成为==最通用的无阻塞加载解决方案==

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 { //其它浏览器
        script.onload = function(){
            callback();
        }
    }

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

5. 常见无阻塞脚本加载工具：

• YUI3
• LazyLoad类库
• LABjs

小结

减少对JavaScript对页面加载性能影响的几种办法：

• 标签闭合之前，将所有的