DOMContentLoaded與load的區(qū)別
????在js中DOMContentLoaded方法是在HTML文檔被完全的加載和解析之后才會(huì)觸發(fā)的事件，他并不需要等到（樣式表/圖像/子框架）加載完成之后再進(jìn)行。
? ? 在看load事件（onload事件），用于檢測(cè)一個(gè)加載完全的頁(yè)面。
????如果通過(guò)上面兩句話讓你覺得很亂，那我們應(yīng)該講一講DOM完整的解析過(guò)程：
1.? 解析HTML結(jié)構(gòu)。
2.? 加載外部腳本和樣式表文件。
3.? 解析并執(zhí)行腳本代碼。//js之類的
4.? DOM樹構(gòu)建完成。//DOMContentLoaded
5.? 加載圖片等外部文件。
6.? 頁(yè)面加載完畢。//load
在第4步的時(shí)候DOMContentLoaded事件會(huì)被觸發(fā)。
在第6步的時(shí)候load事件會(huì)被觸發(fā)。
證明方法：（把下面代碼打印到控制臺(tái)會(huì)發(fā)現(xiàn)，他們執(zhí)行的先后順序是DOMContentLoaded先被觸發(fā)）
console.log('傳奇狗：觀察腳本加載的順序')
document.addEventListener("DOMContentLoaded", function() {
????????console.log('DOMContentLoaded回調(diào)') // 不兼容老的瀏覽器，兼容寫法見[jQuery中ready與load事件] ，原理看下文
}, false);
window.addEventListener("load", function() {
????????console.log('load事件回調(diào)')
}, false);
我們?cè)谧C實(shí)一下他和第三步（解析并執(zhí)行腳本代碼）的關(guān)系：
document.addEventListener("DOMContentLoaded", function(event) {
????????console.log("DOM fully loaded and parsed"); ?
? ??????//這個(gè)簡(jiǎn)單的DOMContentLoaded很快就被執(zhí)行了。
});
document.addEventListener("DOMContentLoaded", function(event) {
????????console.log("DOM fully loaded and parsed");
});
for(var i=0; i<1000000000; i++){
????????//循環(huán) 1000000000 次，為了使這個(gè)同步腳本將延遲DOM的解析。
????????//所以DOMContentLoaded事件等待了一段時(shí)間（解析完所有js）才會(huì)被執(zhí)行。
}
DOMContentLoaded兼容性
????document.ready的核心是DOMContentLoaded事件，firefox、chrome、opera、safari、ie9+都可以使用addEventListener(‘DOMContentLoaded',fn,false)進(jìn)行事件綁定。
????而ie6~8不支持DOMContentLoaded事件，所以要針對(duì)ie6~8做兼容性處理。
1.在IE8中,可以使用readystatechange事件來(lái)檢測(cè)DOM文檔是否加載完畢。
2.在更早的IE版本中,可以通過(guò)每隔一段時(shí)間執(zhí)行一次document.documentElement.doScroll("left")來(lái)檢測(cè)這一狀態(tài)。
場(chǎng)景1：
????我們?cè)趯慾s代碼的時(shí)候，一般都會(huì)添加window.onload事件，主要是為了在DOM加載完后可以使用getElementById，getElementsByTagName等方法選取DOM元素進(jìn)行操作，但是window.load會(huì)等到加載完DOM、腳本、CSS，最后加載完圖片甚至是iframe中的所有資源才會(huì)觸發(fā)，很多時(shí)候網(wǎng)頁(yè)的圖片較多較大，要等最后圖片這個(gè)耗時(shí)大戶加載完才執(zhí)行js明顯有些太遲了，很多時(shí)候都會(huì)影響用戶體驗(yàn)。
場(chǎng)景2：
? ? 如果DOMContentLoaded里面的事件太多，也會(huì)影響到頁(yè)面不能及早渲染出來(lái)，當(dāng)然這樣的情況不會(huì)太多。
? ? 所以，我們使用window.onload事件還是DOMContentLoaded要針對(duì)情況，不要盲目使用，影響用戶體驗(yàn)。
JQ中ready和load的區(qū)別
????我想，通過(guò)上面對(duì)兩個(gè)事件的介紹，大家很容易就明白了在JQ中的ready和load的區(qū)別。
Js原生的寫法
document.addEventListener("DOMContentLoaded", function() {
????????// ...代碼...
}, false);
window.addEventListener("load", function() {
????????// ...代碼...
}, false);
JQ的寫法
//DOMContentLoaded
$(document).ready(function() {
????????// ...代碼...
});
//load
$(document).load(function() {
????????// ...代碼...
});
????說(shuō)白了，ready就是用DOMContentLoaded來(lái)實(shí)現(xiàn)功能的，而load使用onload來(lái)實(shí)現(xiàn)的，他們執(zhí)行的先后順序不同，JQ中ready方法比load方法執(zhí)行順序靠前，而且load需要等待頁(yè)面元素加載完畢才會(huì)執(zhí)行。嘎嘎嘎~~~下課！
