DOMContentLoaded 事件

admin發表於2018-12-26
事件

DOMContentLoaded 事件會在文件完全載入和解析之後觸發，無需等待CSS檔案、圖片和子框架載入完畢。

看到上述對事件的闡述，肯定有很多朋友會想到window.onload事件，非常相似。

兩個事件主要區別如下：

（1）.DOMContentLoaded 事件是在文件完全載入和解析之後觸發。

（2）.window.onload 事件不但文件完全載入和解析完畢，相關資源都要載入完畢，比如圖片和CSS檔案等。

所以在很多需求中，window.onload事件並不是最佳選擇器，使用DOMContentLoaded事件效率會更高。

谷歌開發者工具頁面載入圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/26/235225uq71q2u22xq5273u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖片分析如下：

（1）.藍色豎線是DOMContentLoaded事件觸發的時刻。

（2）.紅色豎線是window.onload事件觸發的時刻。

（3）.從最下面可以看到，DOMContentLoaded事件更早觸發。

如果看到上述分析後，對此事件理解還是不夠透徹，不用擔心，後面還會有更詳細介紹。

瀏覽器支援:

（1）.IE9+瀏覽器支援此事件。

（2）.edge瀏覽器支援此事件。

（3）.火狐瀏覽器支援此事件。

（4）.Opera瀏覽器支援此事件。

（5）.谷歌瀏覽器支援此事件。

（6）.safria瀏覽器支援此事件。

DOMContentLoaded事件觸發時機：

下面結合圖示介紹一下，DOMContentLoaded事件觸發的時機。

明確了事件的觸發時機，也就知道在何種場景下應用此事件，當然理解為何有時比window.onload高效。

DOMContentLoaded觸發可能會受到CSS檔案載入和JavaScript檔案的影響，所以分為如下三種情況。

1.沒有<style>與<script>標籤的情況：

事件觸發時機圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/26/235300bmtflv330001zczm.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖示分析如下：

（1）.HTML程式碼完全下載完畢後，生成DOM，此時觸發DOMContentLoaded 事件。

（2）.由此可見此事件是在使用者看到頁面內容之前觸發。

（3）.然後根據DOM生成一個渲染樹，瀏覽器根據渲染樹的內容計算出元素在文件中的位置。

（4）.最後繪製出來，呈現在瀏覽者面前。

2.具有CSS程式碼情況：

無論是引入的CSS程式碼，還是內部的CSS程式碼都不會對DOMContentLoaded 事件造成影響。

事件觸發時機圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/26/235321eiczvl71s60erloy.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.遇到CSS程式碼之後，會生成CSSDOM，此時並不影響DOM的生成。

（2）.所以不會影響DOMContentLoaded事件的觸發。

（3）.此時渲染樹是基於DOM與CSSDOM生成的。

（4）.然後根據DOM生成一個渲染樹，瀏覽器根據渲染樹的內容計算出元素在文件中的位置。

（5）.最後繪製出來，呈現在瀏覽者面前。

3.具有JavaScript程式碼情況：

JavaScript程式碼對DOMContentLoaded 事件的觸發是有影響的。

事件觸發時機圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/26/235347vgtgzmzncqsgqbpj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由上圖可以看到，JavaScript載入和執行會遲滯DOMContentLoaded 事件的觸發。

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

為確保JavaScript獲取的是最新的資訊，會首先載入和渲染CSS。

為了解決JavaScript阻塞問題，HTML5為<script>標籤新增sync和defer屬性。

具體參閱async 與 defer 的作用一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#box li {
  width: 350px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
}
</style>
<script>
addEventListener("DOMContentLoaded",function(){
  let lis=document.getElementsByTagName("li");
  lis[1].style.color="red";
},false);
</script>
</head>
<body>
  <ul id="box">
    <li>螞蟻部落一</li>
    <li>螞蟻部落二</li>
    <li>螞蟻部落三</li>
    <li>螞蟻部落四</li>
    <li>螞蟻部落五</li>
    <li>螞蟻部落六</li>
  </ul>
</body>
</html>

上述程式碼會在文件載入和解析完畢後觸發DOMContentLoaded 事件。

相關文章