DOMContentLoaded与load的区别
在js中DOMContentLoaded方法是在HTML文档被完全的加载和解析之后才会触发的事件，他并不需要等到（样式表/图像/子框架）加载完成之后再进行。
在看load事件（onload事件），用于检测一个加载完全的页面。
如果通过上面两句话让你觉得很乱，那我们应该讲一讲DOM完整的解析过程：
1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。//js之类的
4. DOM树构建完成。//DOMContentLoaded
5. 加载图片等外部文件。
6. 页面加载完毕。//load
在第4步的时候DOMContentLoaded事件会被触发。
在第6步的时候load事件会被触发。
证明方法：（把下面代码打印到控制台会发现，他们执行的先后顺序是DOMContentLoaded先被触发）
console.log('传奇狗：观察脚本加载的顺序')
document.addEventListener("DOMContentLoaded", function() {
console.log('DOMContentLoaded回调') // 不兼容老的浏览器，兼容写法见[jQuery中ready与load事件] ，原理看下文
}, false);
window.addEventListener("load", function() {
console.log('load事件回调')
}, false);
我们在证实一下他和第三步（解析并执行脚本代码）的关系：
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
//这个简单的DOMContentLoaded很快就被执行了。
});
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
for(var i=0; i<1000000000; i++){
//循环 1000000000 次，为了使这个同步脚本将延迟DOM的解析。
//所以DOMContentLoaded事件等待了一段时间（解析完所有js）才会被执行。
}
DOMContentLoaded兼容性
document.ready的核心是DOMContentLoaded事件，firefox、chrome、opera、safari、ie9+都可以使用addEventListener(‘DOMContentLoaded',fn,false)进行事件绑定。
而ie6~8不支持DOMContentLoaded事件，所以要针对ie6~8做兼容性处理。
1.在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕。
2.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态。
场景1：
我们在写js代码的时候，一般都会添加window.onload事件，主要是为了在DOM加载完后可以使用getElementById，getElementsByTagName等方法选取DOM元素进行操作，但是window.load会等到加载完DOM、脚本、CSS，最后加载完图片甚至是iframe中的所有资源才会触发，很多时候网页的图片较多较大，要等最后图片这个耗时大户加载完才执行js明显有些太迟了，很多时候都会影响用户体验。
场景2：
如果DOMContentLoaded里面的事件太多，也会影响到页面不能及早渲染出来，当然这样的情况不会太多。
所以，我们使用window.onload事件还是DOMContentLoaded要针对情况，不要盲目使用，影响用户体验。
JQ中ready和load的区别
我想，通过上面对两个事件的介绍，大家很容易就明白了在JQ中的ready和load的区别。
Js原生的写法
document.addEventListener("DOMContentLoaded", function() {
// ...代码...
}, false);
window.addEventListener("load", function() {
// ...代码...
}, false);
JQ的写法
//DOMContentLoaded
$(document).ready(function() {
// ...代码...
});
//load
$(document).load(function() {
// ...代码...
});
说白了，ready就是用DOMContentLoaded来实现功能的，而load使用onload来实现的，他们执行的先后顺序不同，JQ中ready方法比load方法执行顺序靠前，而且load需要等待页面元素加载完毕才会执行。嘎嘎嘎~~~下课！
