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