揭秘网页加载速度背后的秘密：从 DOMReady 到 Element Timing

前端

2023-12-10 21:48:05

引言

在当今快节奏的数字时代，网页加载速度已成为衡量网站用户体验至关重要的指标。快速响应的网站可以提高用户满意度、降低跳出率并最终提高转化率。

本文深入探讨网页加载速度，重点关注从 DOMReady 到 Element Timing 的关键指标。我们将深入了解这些指标的含义、重要性以及如何优化它们以获得最佳性能。

什么是 DOMReady

DOM（文档对象模型）Ready 事件在页面加载时触发，表示浏览器已解析 HTML 文档并创建 DOM 树。在这个阶段，页面上的所有元素都已加载，但外部资源（如图像、脚本和样式表）可能仍在加载。

什么是 Element Timing

Element Timing API 是一组较新的指标，可提供有关页面上每个元素加载和渲染的详细数据。它使我们能够深入了解页面特定区域的性能，例如加载关键图像或执行复杂脚本所需的时间。

DOMReady 和 Element Timing 的重要性

DOMReady 和 Element Timing 是衡量页面加载速度的两个关键指标。

DOMReady： 它表明页面何时准备就绪，用户可以开始与页面交互。较低的 DOMReady 时间意味着更快的交互性。
Element Timing： 它提供有关页面上每个元素的具体加载和渲染性能数据。这使我们能够识别性能瓶颈并针对特定元素进行优化。

优化 DOMReady 和 Element Timing

优化 DOMReady

减少 HTML 文档的大小。
推迟加载非关键脚本和样式表。
优化图像大小和格式。
使用内容分发网络 (CDN) 分发静态资源。

优化 Element Timing

使用 lazy loading 技术仅在需要时加载图像和 iframe。
优化 CSS 选择器以提高渲染速度。
避免使用复杂的 JavaScript 框架和库。
优化第三方脚本和插件的加载和执行。

实施 Element Timing

要实施 Element Timing，请使用以下步骤：

在你的页面中包含以下脚本：

if (window.PerformanceObserver) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.log(entry.element, entry.startTime, entry.duration);
    }
  });
  observer.observe({ type: "element" });
}