文档加载与DOMContentLoaded

Epicurus
203 阅读2分钟

文档加载与DOMContentLoaded

文档加载（load事件）和DOMContentLoaded是浏览器中两个重要的页面加载事件，它们的触发时机和作用不同，对前端开发至关重要。以下是它们的区别和联系：

1. DOMContentLoaded

  • 触发时机：当 HTML 文档被完全加载和解析完成（即 DOM 树构建完成），无需等待外部资源（如图片、样式表、子框架等）加载完成。
  • 作用：此时可以安全地操作 DOM 元素，执行初始化脚本或绑定事件。
  • 注意事项：
    • 如果 HTML 中有同步的 JavaScript 脚本（未使用 async 或 defer），浏览器会暂停解析 HTML，直到脚本执行完成。这会延迟 DOMContentLoaded 的触发。
    • 使用 async 或 defer 的脚本不会阻塞 DOMContentLoaded。
  • 代码示例： 
    document.addEventListener("DOMContentLoaded", function() {
  console.log("DOM 已就绪！");
});

2. load 事件（文档加载完成）

  • 触发时机：当 整个页面及其所有依赖资源（如图片、样式表、脚本等）都加载完成。
  • 作用：适用于需要依赖完整资源的操作（如获取图片尺寸、统计页面完全加载时间等）。
  • 代码示例： 
    window.addEventListener("load", function() {
  console.log("页面完全加载！");
});

关键区别

特性DOMContentLoadedload
触发条件DOM 树就绪，不等待外部资源所有资源加载完成
执行时机更早更晚
适用场景DOM 操作、初始化脚本依赖完整资源的操作
是否阻塞外部资源否是（需等待所有资源加载）

示例场景

假设页面包含一个图片和一个同步脚本：

<!DOCTYPE html>
<html>
<head>
  <script>
    // 同步脚本会阻塞 DOM 解析
    document.addEventListener("DOMContentLoaded", () => console.log("DOM 就绪"));
    window.addEventListener("load", () => console.log("页面加载完成"));
  </script>
</head>
<body>
  <img src="large-image.jpg">
</body>
</html>
  • 输出顺序：
    1. DOM 就绪（当 HTML 解析完成时触发，不等待图片加载）
    2. 页面加载完成（图片加载完成后触发）

性能优化建议

  • 尽早使用 DOMContentLoaded：将初始化脚本绑定到此事件，提升用户体验。
  • 避免同步脚本阻塞：使用 async 或 defer 异步加载脚本，减少对 DOM 解析的阻塞。
  • 按需使用 load：仅当需要操作完整资源时使用。

兼容性

  • DOMContentLoaded 支持所有现代浏览器（IE9+）。
  • 旧版 IE 可通过 document.onreadystatechange 模拟类似行为。

通过合理利用这两个事件，可以优化页面加载性能并确保脚本执行的安全性。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github

avatar
文章
阅读
粉丝