前端如何优雅的检测页面加载完成？

2024-02-11 15:53:47

前言

在诸多的性能指标里，「页面加载完成耗时」是非常重要的一项，尤其是重点页面，如详情页，1 秒内打开和 3 秒内打开差别是很大的，直接影响 GMV。然而，在实际开发中，对于页面加载完成的定义，并没有一个统一的标准，在 Google Chrome 中认为是 DOMContentLoaded 事件触发后，即认为页面加载完成，而在 Safari 中则是 load 事件触发后，才认为页面加载完成。导致的结果就是，不同浏览器对于页面加载完成的判定存在差异，前端工程师在做性能优化时，无法得到统一的度量标准。

前端如何优雅的检测页面加载完成

1. 使用 DOMContentLoaded 事件

DOMContentLoaded 事件在页面文档对象模型（DOM）加载完成后触发，但是在此事件触发后，页面中的图像、脚本和样式表可能尚未加载完成，因此页面可能还没有完全呈现出来。为了解决这个问题，我们可以使用以下代码来检测页面加载是否完成：

document.addEventListener("DOMContentLoaded", function() {
  console.log("DOMContentLoaded");

  // 检测页面中的所有图片是否加载完成
  var images = document.querySelectorAll("img");
  for (var i = 0; i < images.length; i++) {
    if (!images[i].complete) {
      return;
    }
  }

  // 检测页面中的所有脚本是否加载完成
  var scripts = document.querySelectorAll("script");
  for (var i = 0; i < scripts.length; i++) {
    if (!scripts[i].readyState || scripts[i].readyState != "complete") {
      return;
    }
  }

  // 检测页面中的所有样式表是否加载完成
  var stylesheets = document.querySelectorAll("link[rel='stylesheet']");
  for (var i = 0; i < stylesheets.length; i++) {
    if (!stylesheets[i].readyState || stylesheets[i].readyState != "complete") {
      return;
    }
  }

  // 如果所有的图片、脚本和样式表都加载完成，则认为页面加载完成
  console.log("页面加载完成");
});

2. 使用 load 事件

load 事件在页面所有资源（包括图片、脚本和样式表）加载完成后触发，因此可以用来检测页面加载是否完成。但是，load 事件的触发时机可能会比 DOMContentLoaded 事件晚一些，因为在 DOMContentLoaded 事件触发后，还需要加载页面中的所有资源。

window.addEventListener("load", function() {
  console.log("页面加载完成");
});

3. 使用 Performance API

Performance API 可以用来检测页面加载过程中的各个阶段，包括 DOMContentLoaded 事件和 load 事件。我们可以使用以下代码来检测页面加载是否完成：

var performance = window.performance;

// 监听 DOMContentLoaded 事件
performance.addEventListener("DOMContentLoaded", function() {
  console.log("DOMContentLoaded");
});

// 监听 load 事件
performance.addEventListener("load", function() {
  console.log("页面加载完成");
});