DOMContentLoaded與load的區(qū)別
????在js中DOMContentLoaded方法是在HTML文檔被完全的加載和解析之后才會(huì)觸發(fā)的事件蜕便，他并不需要等到（樣式表/圖像/子框架）加載完成之后再進(jìn)行陈症。
? ? 在看load事件（onload事件）变勇，用于檢測(cè)一個(gè)加載完全的頁(yè)面。
????如果通過(guò)上面兩句話讓你覺(jué)得很亂抬伺，那我們應(yīng)該講一講DOM完整的解析過(guò)程：
1.? 解析HTML結(jié)構(gòu)事秀。
2.? 加載外部腳本和樣式表文件。
3.? 解析并執(zhí)行腳本代碼怕品。//js之類(lèi)的
4.? DOM樹(shù)構(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)') // 不兼容老的瀏覽器涨薪，兼容寫(xiě)法見(jiàn)[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è)趯?xiě)js代碼的時(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原生的寫(xiě)法
document.addEventListener("DOMContentLoaded", function() {
????????// ...代碼...
}, false);
window.addEventListener("load", function() {
????????// ...代碼...
}, false);
JQ的寫(xiě)法
//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í)行沃饶。嘎嘎嘎~~~下課母廷！
