什么是DOMReady？

一個被封裝的方法，用以當瀏覽器生成DOM樹結構后就開始解析某些js代碼。

為什么需要DOMReady？

在初學js時，我們都知道使用window.onload用以保證頁面的所有資源都加載完畢后才執行當中的js代碼，否則當js在title中定義或則引用時會報錯：不能為空節點添加某某屬性云云。是的，onload的確是一個簡單易用的方法，但隨著我們學習的深入，當我們構建的頁面存在大量圖片或其他需要較長時間加載的資源時，顯然讓js等待這些費事的資源加載完畢再執行是非常不合理且形成糟糕的用戶體驗。這時我們有了新的需求，需要在DOM樹生成后&其他資源加載以及渲染前就執行js代碼，所以DOMReady出現了，駕著七彩祥云而來...

實現DOMReady的原理

在說及DOMReady的原理之前，我們需要知道渲染引擎的渲染(瀏覽器把請求的html顯示出來的過程)基本流程：

1.解析HTML，構建DOM樹(構建DOM節點)；

2.構建渲染樹(解析樣式信息，包括外部的css文件、style標簽中的樣式，按優先級解析)。渲染樹由一些包含有各種屬性的矩形組成，他們將會按照正確的順序顯示到屏幕上；

3.布局渲染樹(布局DOM節點)，執行布局的過程，將確定每個節點在屏幕上的確切坐標；

4.繪制渲染樹(繪制DOM節點，即遍歷渲染樹)，使用UI后端層來繪制每個節點。

基本渲染流程

DOMReady的原理：在構建了DOM樹之后就開始解析js，而不是等待頁面渲染完畢。

實現策略

IE8(包括)之前版本由于不支持符合W3C規范的DOMContentLoaded事件，所以需要用hack實現兼容。所以如下圖所示，需要在DOMReady方法中同時提供下面兩種策略。

DOMReady實現策略

實現代碼

function myDOMReady(fn){

//判斷如果支持addEc=ventListener(非IE--IE支持的是attachEvent)則綁定DOMContentLoaded事件

if(document.addEventListener){

document.addEventListener("DOMContentLoaded",fn,false);

}else{

IEContenLoaded(fn);

}

//IE下模擬DOMContentLoaded

function IEContenLoaded(fn){

var done = false;

//只執行一次用戶的回調函數init

var init = function(){

if(!done){

done = true;

fn();

}

}

(function(){

try{

//DOM樹未創建完之前調用doScroll會拋出錯誤

window.document.documentElement.doScroll("left");

}catch(error){

//延遲再執行，arguments.callee調用自己

setTimeout(argument.callee,1);

return;

}

//沒有錯誤表示DOM樹創建完畢，執行用戶回調

init();

})();

//監聽document的加載狀態

window.document.onreadystatechange = function(){

//如果用戶是在DOMReady之后調用的函數立即執行用戶回調

if(window.document.readyState == 'complete'){

window.document.onreadystatechange=null;

init();

}

}

}

}

總結

以上是生活随笔為你收集整理的html dom ready,【js】实现DOMReady的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。