面試官：Window.onload 和 DOMContentLoaded 的區(qū)別
window.onload 和 DOMContentLoaded 都是頁面加載相關(guān)的事件，但它們觸發(fā)的時機(jī)不同，主要區(qū)別如下：
1. DOMContentLoaded 事件
當(dāng) HTML 完全解析并構(gòu)建 DOM 后觸發(fā)，但 不等待 CSS、圖片、JS 資源加載完成。
觸發(fā)時機(jī)：
- 只要 HTML 解析完成并構(gòu)建了 DOM，就會觸發(fā) DOMContentLoaded。
- 不會等待 CSS、圖片、iframe 加載完成，所以它的觸發(fā)時間更早。
適用場景
- 希望盡早操作 DOM，例如動態(tài)修改頁面結(jié)構(gòu)、綁定事件監(jiān)聽器。
- 對圖片、CSS 不依賴的 JS 操作，例如表單校驗(yàn)、事件監(jiān)聽等。
示例
document.addEventListener("DOMContentLoaded", function() {
console.log("?? DOM 解析完畢！");
});輸出時機(jī)：頁面結(jié)構(gòu)加載完成，但圖片、CSS 可能還未加載完。
2. window.onload 事件
當(dāng) HTML、CSS、JS、圖片、iframe 及所有外部資源都加載完成后才觸發(fā)。
觸發(fā)時機(jī)：
- 等所有資源加載完成（包括 CSS、圖片、iframe、視頻等） 后才觸發(fā)。
- 比 DOMContentLoaded 晚，尤其是如果頁面有大量圖片、視頻時，window.onload 可能會很慢。
適用場景
- 需要確保所有資源都加載完畢，例如：
a.獲取圖片寬高
b.操作 canvas
c.計算 offsetWidth、offsetHeight
d.頁面統(tǒng)計（如 Google Analytics）
e.依賴外部 API（如廣告、第三方 SDK）
示例
window.onload = function() {
console.log("? 所有資源加載完成！");
};輸出時機(jī)：等頁面所有資源加載完畢才觸發(fā)，可能比 DOMContentLoaded 晚很多。
3. DOMContentLoaded vs window.onload 觸發(fā)順序
事件 | 觸發(fā)時機(jī) | 依賴資源加載 | 適用場景 |
DOMContentLoaded | HTML 解析完成，DOM 構(gòu)建完成 | ? 不等待 CSS/圖片/iframe | 適合盡早操作 DOM |
window.onload | 所有資源（HTML、CSS、JS、圖片等）加載完成 | ? 需要等待所有資源 | 適合依賴圖片/視頻的操作 |
4. 示例對比
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>測試頁面</title>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("?? DOMContentLoaded 觸發(fā)");
});
window.onload = function() {
console.log("? window.onload 觸發(fā)");
};
</script>
</head>
<body>
<h1>測試頁面</h1>
<img src="https://via.placeholder.com/600x400" alt="測試圖片">
</body>
</html>可能的輸出順序
?? DOMContentLoaded 觸發(fā)
? window.onload 觸發(fā)DOMContentLoaded 先觸發(fā)，因?yàn)樗坏却龍D片加載。
5. 面試官可能的追問
面試官：為什么 DOMContentLoaded 不會等待圖片加載？
回答：因?yàn)?nbsp;DOMContentLoaded 只需要 HTML 解析完成并構(gòu)建 DOM，而不會等待圖片、CSS 資源的加載。
面試官：什么時候必須使用 window.onload 而不是 DOMContentLoaded？
回答：
- 需要確保圖片、CSS、iframe 資源加載完成 的場景，如：
a.獲取圖片尺寸（img.width）
b.操作 canvas（必須等圖片加載完）
c.執(zhí)行外部 API 或廣告代碼
面試官：如何在 DOMContentLoaded 之后監(jiān)聽 onload？
回答：
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM 加載完成");
window.onload = function() {
console.log("所有資源加載完成");
};
});這樣可以 先執(zhí)行 DOM 操作，再等待資源加載。
總結(jié)
對比項 | DOMContentLoaded | window.onload |
觸發(fā)時機(jī) | HTML 解析完畢，DOM 結(jié)構(gòu)就緒 | 所有資源（HTML、CSS、圖片等）加載完畢 |
是否等待 CSS 加載 | ? 不等待 | ? 等待 |
是否等待圖片加載 | ? 不等待 | ? 等待 |
適用場景 | 綁定事件監(jiān)聽、修改 DOM | 依賴圖片、CSS、廣告 SDK |
最佳面試回答 "DOMContentLoaded 事件在 HTML 解析完成后觸發(fā)，不會等待圖片、CSS 資源加載，而 window.onload 需要等待所有資源加載完成才觸發(fā)。如果只需要操作 DOM，應(yīng)該用 DOMContentLoaded；如果依賴圖片、CSS 資源加載，則使用 window.onload。"
