JavaScript DOMContentLoaded事件案例詳解

Posted on by

DOMContentLoaded 事件

字面上看，它會在dom加載完成後觸發。

與window.onload事件非常相似，但有一定區別：

  1. DOMContentLoaded 事件是在文檔完全加載和解析之後觸發；
  2. window.onload 事件不但文檔完全加載和解析完畢，相關資源都要加載完畢，比如圖片和CSS文件等；

下一個問題是什麼時候dom加載完畢，這得從瀏覽器渲染說起，瀏覽器顯示網頁的過程可以做如下描述：

1.   請求得到html文檔，根據文檔請求更多的img,css及其它資源文件；

2.   解析文檔得到兩個東西，dom tree and cssom tree；

3.   依據上面兩個tree生成render tree；

4.    根據render tree進行佈局並在其中繪制相關元素。

以webkit為例，它的渲染流程如下：

DOMContentLoaded事件觸發時機：

在DOM後，RENDERtree之前。

JavaScript加載和執行會遲滯DOMContentLoaded 事件的觸發。

JavaScript要等待CSS渲染完成再去加載和執行，因為瀏覽器無法確定JavaScript是否需要DOM元素信息。

為確保JavaScript獲取的是最新的信息，會首先加載和渲染CSS。

參考文檔：

http://www.softwhy.com/article-9783-1.html

https://www.cnblogs.com/CandyManPing/p/6635008.html

https://www.cnblogs.com/caizhenbo/p/6679478.html

到此這篇關於JavaScript DOMContentLoaded事件案例詳解的文章就介紹到這瞭,更多相關JavaScript DOMContentLoaded事件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：