一、domcontentloaded是什麼？

1、domcontentloaded是一個事件，當HTML文檔在瀏覽器中被完全載入和解析完成之後，觸發該事件。

2、該事件與頁面中的CSS和JS資源無關，僅限於DOM樹的構建完成。因此，該事件會比load事件觸發得更早一些。

二、domcontentloaded早於onload的原因是什麼？

1、由於domcontentloaded事件僅與HTML文檔的解析有關，並不涉及頁面中CSS和JS資源的載入和解析，所以會比load事件先觸發一些。

2、如果將JS資源放在頁面底部，或者使用defer或async屬性，可以讓JS的載入和解析在domcontentloaded事件之後再進行，從而避免對頁面載入速度的影響。

三、domcontentloaded和load事件的區別

1、domcontentloaded事件表示HTML文檔的DOM樹已經構建完成，但是一些圖片、JS文件等外部資源可能還沒有載入完成。

2、load事件表示頁面中的所有資源已經載入完成，包括圖片、style和script等外部資源。

3、因此，domcontentloaded事件觸發的時機比load事件早，可以讓頁面更快地顯示內容。

四、domcontentloaded和load事件誰先執行？

1、由於domcontentloaded事件僅與HTML文檔的解析有關，不需要等待CSS和JS資源的載入和解析，因此會先於load事件觸發。

2、但是，如果頁面中的JS資源被放在body的底部，或者使用了defer或async屬性，它們的載入和解析會在domcontentloaded事件之後再進行，從而讓load事件晚於domcontentloaded事件觸發。

五、domcontentloaded與onload事件的區別

1、domcontentloaded事件表示頁面的DOM樹已經構建完成，但是一些圖片、JS文件等可能還在載入中。

2、onload事件表示頁面中的所有資源都已經載入完成，包括圖片、style和script等外部資源。

3、與load事件類似，onload事件在頁面所有資源載入完成後才會觸發。

4、但是，與load事件不同的是，onload事件會等待所有嵌入式iframe中的資源載入完成之後再觸發。

六、完整代碼示例：

  
  


  
domcontentloaded示例
  
頁面載入中...
  
    document.addEventListener('DOMContentLoaded', function () {
      console.log('DOM樹構建完成');
    });
    window.addEventListener('load', function () {
      console.log('所有資源載入完成');
    });
    window.addEventListener('onload', function() {
      console.log('所有iframe嵌入頁面載入完成');
    });
  

在該示例中，我們使用了addEventListener方法，給domcontentloaded、load和onload事件分別綁定了一個處理函數。在控制台中，我們可以看到它們的觸發時機。

當頁面的DOM樹構建完成時，我們看到了「DOM樹構建完成」這個日誌。當所有資源載入完成時，我們看到了「所有資源載入完成」這個日誌。而當所有iframe嵌入頁面的資源都載入完成時，我們看到了「所有iframe嵌入頁面載入完成」這個日誌。

通過這個示例，我們可以更直觀地理解DOMContentloaded事件的觸發時機及其與其他事件的異同。