一文分清 window.onload 和 DOMContentLoaded

ZzMemory
360 阅读4分钟

前言

作为前端开发者，理解页面加载过程中的各个事件是非常重要的。其中，window.onload和DOMContentLoaded是两个经常被讨论的事件，它们在页面加载过程中扮演着不同的角色。本文将详细解析这两个事件的区别，以及它们在实际开发中的应用场景。

一、基本概念

DOMContentLoaded

DOMContentLoaded事件在DOM（文档对象模型）完全加载和解析后触发，无需等待样式表、图像和子框架完成加载。

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM完全加载和解析');
});

window.onload

window.onload事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。

window.onload = function() {
  console.log('页面及所有资源已完全加载');
};

// 或者使用addEventListener
window.addEventListener('load', function() {
  console.log('页面及所有资源已完全加载');
});

主要区别

  1. 触发时机：

    • DOMContentLoaded：在HTML文档被完全加载和解析后立即触发（解析HTML文档时会被同步JavaScript脚本阻塞），不等待样式表、图像和子框架完成加载。
    • window.onload：在页面所有资源（包括DOM、CSS、图片、脚本等）都加载完成后才触发。

  2. 等待资源：

    • DOMContentLoaded：只关心HTML文档本身的加载和解析。
    • window.onload：需要等待所有外部资源加载完成，包括图片、样式表、脚本等。

  3. 执行顺序：

    • 在正常情况下，DOMContentLoaded事件会先于window.onload事件触发。

  4. 事件绑定对象：

    • DOMContentLoaded：绑定在document对象上。
    • window.onload：绑定在window对象上。

二、实际应用场景

何时使用DOMContentLoaded

  1. DOM操作：当你需要在DOM准备好后立即操作DOM元素，但不需要等待所有资源加载完成。
  2. 初始化UI组件：初始化不依赖于图片等资源的UI组件。
  3. 表单验证：为表单元素添加验证逻辑。
  4. 添加事件监听器：为DOM元素添加事件监听器。
document.addEventListener('DOMContentLoaded', function() {
  // 初始化表单验证
  const form = document.getElementById('myForm');
  form.addEventListener('submit', validateForm);
  
  // 初始化UI组件
  initTabs();
  initDropdowns();
});

何时使用window.onload

  1. 图片处理：当你需要处理页面上的图片，如获取图片尺寸。
  2. 依赖外部资源的操作：任何依赖于外部资源（如样式表、图片）完全加载的操作。
  3. 页面性能分析：测量页面完全加载的时间。
  4. 广告加载：确保广告在页面完全加载后显示。
window.onload = function() {
  // 获取图片尺寸
  const img = document.getElementById('myImage');
  console.log('图片尺寸：', img.width, 'x', img.height);
  
  // 页面加载时间分析
  const loadTime = performance.now();
  console.log('页面加载时间：', loadTime, 'ms');
};

三、性能考虑

使用DOMContentLoaded而不是window.onload可以显著提高用户体验，因为：

  1. 更快的交互性：用户可以更早地与页面进行交互，而不必等待所有资源加载完成。
  2. 渐进式增强：可以先加载核心功能，然后随着更多资源的加载添加额外功能。
  3. 减少感知延迟：用户看到内容和功能的速度更快，减少了等待感。

四、实际测试示例

下面是一个简单的HTML页面，展示了这两个事件的触发顺序：

<!DOCTYPE html>
<html>
<head>
  <title>事件触发顺序测试</title>
  <style>
    /* 一些CSS样式 */
    body { font-family: Arial, sans-serif; }
  </style>
  <script>
    // 记录DOMContentLoaded事件
    document.addEventListener('DOMContentLoaded', function() {
      console.log('DOMContentLoaded触发时间：', new Date().getTime());
      document.getElementById('domLoaded').textContent = new Date().toLocaleTimeString();
    });
    
    // 记录load事件
    window.onload = function() {
      console.log('window.onload触发时间：', new Date().getTime());
      document.getElementById('windowLoaded').textContent = new Date().toLocaleTimeString();
    };
  </script>
</head>
<body>
  <h1>事件触发顺序测试</h1>
  <p>DOMContentLoaded触发时间：<span id="domLoaded">等待中...</span></p>
  <p>window.onload触发时间：<span id="windowLoaded">等待中...</span></p>
  
  <!-- 添加一些大图片来延迟window.onload事件 -->
  <img src="testImg1" alt="大图片1">
  <img src="testImg2" alt="大图片2">
</body>
</html>

浏览器兼容性

两个事件在现代浏览器中都有良好的支持：

  • DOMContentLoaded：IE9+、Firefox、Chrome、Safari、Opera都支持。
  • window.onload：所有主流浏览器都支持。

结语

理解DOMContentLoaded和window.onload的区别对于优化网页性能和提供良好的用户体验至关重要。在实际开发中，应根据具体需求选择合适的事件。通常，为了提高页面响应速度，我们会尽可能地将代码放在DOMContentLoaded事件中执行，只将真正需要等待所有资源加载完成的代码放在window.onload事件中。

通过合理使用这两个事件，可以显著提升网页的加载性能和用户体验。如果这篇文章有帮助到你，不胜荣幸；如果文章有错误或者缺漏，请在评论区指出，大家一起进步，谢谢🙏。

avatar
文章
阅读
粉丝