DOMContentLoaded

DOM文档通常加载的步骤：
1.解析HTML结构。
2.加载外部脚本和样式表文件。
3.解析并执行脚本代码。
4.DOM树构建完成。//DOMContentLoaded
5.加载图片等外部资源。
6.页面加载完毕。//load
js代码执行的前提是它所需要的DOM必须渲染完毕，要不就会报错；使用window.onload时就是在页面完全加载完毕（包括图片等资源）后就执行，由于图片加载比较慢，致使脚本执行延后，拉低用户体验；而js脚本的执行不依赖图片等资源的加载，就是说在DOM树构建完成就可以执行；
此时给document绑定一个事件就可以了，如下：

document.addEventListener('DOMContentLoaded',function(){
    //需要执行的代码；
  },false)

而IE低版本浏览器又没有这个事件，而所有浏览器均支持的onreadystatechange 事件能辨识readyState 属性的改变，在readyState 属性为complete时，DOM树构建完毕，这样就可以封装一个兼容低版本的框架

function DOMReady(fn){
    if(document.addEventListener){   //高级浏览器支持
        document.addEventListener('DOMContentLoaded',function(){
            fn && fn();
        },false)
    }else{                    //低版本浏览器使用
        document.onreadystatechange = function(){
            if(document.readyState == 'complete'){
                fn && fn();
            }
        };
    }
}