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();
}
};
}
}
