前端开发技巧：MutationObserver计算首屏时间

一、前言

在前端开发中，优化页面性能是至关重要的，计算首屏时间（First Contentful Paint，FCP）是衡量网页性能的重要指标，它表示页面内容中的第一个元素被渲染到屏幕上的时间点。而MutationObserver是一种强大的JavaScript API，可以用于监听DOM的变化，并帮助开发者计算首屏时间，即页面加载后第一次渲染完毕的时间点。本文将介绍如何使用MutationObserver来获取首屏时间的最佳实践，并提供具体的原理分析、代码示例以及其他应用场景。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51968.html

二、原理分析

MutationObserver利用了浏览器的MutationObserver接口来监听DOM的变化。当DOM树中的元素发生变化时，MutationObserver会自动触发注册的回调函数。通过在回调函数中记录时间戳，可以计算出首屏时间，即页面加载后第一次渲染完毕的时间点。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51968.html

1. 创建MutationObserver对象：通过构造函数MutationObserver创建一个MutationObserver对象，并传入一个回调函数作为参数。
2. 配置MutationObserver：通过MutationObserver的配置选项，指定需要监测的DOM树变化类型。常见的配置选项有：
   • childList：是否监测子节点的变化，即DOM元素的添加或删除。
   • attributes：是否监测属性的变化，比如元素的属性值发生变化。
   • characterData：是否监测字符数据的变化，比如文本节点的内容发生变化。
   • subtree：是否监测整个DOM子树的变化，包括子节点及其后代节点的变化。
3. 观察DOM树：将MutationObserver对象与需要观察的目标节点（通常是文档对象document）关联起来，开始监测DOM树的变化。

   observer.observe(targetNode, observerConfig);
   

4. 监测DOM树变化：一旦MutationObserver开始观察，它会监测指定的DOM树变化类型。当DOM树发生符合指定类型的变化时，会触发回调函数，并将变化的信息传递给回调函数作为参数。

   function callback(mutationsList, observer) {
     // 处理DOM树的变化
   }
   

   在回调函数中，我们可以遍历mutationsList，检查DOM树的变化情况，然后根据需要执行相应的操作。比如，找到首屏元素并记录首屏时间，或者处理其它DOM树的变化情况。

5. 停止观察：在需要停止观察DOM树变化时，我们可以调用disconnect()方法来停止MutationObserver的观察。

   observer.disconnect();
   

三、最佳实践

1. 初始化MutationObserver监听： 在页面加载后，通过JavaScript代码创建一个MutationObserver对象，并注册一个回调函数。回调函数会在DOM树中的元素发生变化时自动触发。

const observer = new MutationObserver(callback);
observer.observe(document, {
  childList: true, // 监测子节点的变化（元素的添加或删除）
  subtree: true // 监测子树的变化（深层元素的修改）
});

2. 计算DOM变化时的时间： 在回调函数中，可以通过检查DOM元素的变化来判断页面是否已经渲染完毕。例如，可以检查页面中某个元素的可见性、位置或样式等属性是否发生变化，从而判断页面的渲染状态。

function callback(mutationsList) {
  let firstScreenTime = 0;
  mutationsList.forEach(mutation => {
    // 检查DOM元素的变化
    if (mutation.type === 'attributes' && mutation.attributeName === 'style' && !document.querySelector('.loading').style.display) {
      // 页面首屏渲染完毕
      firstScreenTime = performance.now();
    }
  });

  if (firstScreenTime > 0) {
    console.log(`首屏时间：${firstScreenTime}ms`);
    // 可以在这里执行首屏渲染完毕后的操作
  }
}

3. 去掉DOM被删除情况的监听： 在回调函数中，MutationObserver会监听到DOM树中元素的添加、删除、属性变化等多种变化。但在计算首屏时间时，只关注DOM的添加和属性变化即可，因此可以在回调函数中去掉对DOM被删除的情况的监听，从而避免不必要的性能开销

function callback(mutationsList) {
  let firstScreenTime = 0;
  mutationsList.forEach(mutation => {
    // 只关注DOM元素的添加和属性变化
    if ((mutation.type === 'attributes' && mutation.attributeName === 'style') || mutation.type === 'childList') {
      // 检查DOM元素的变化
      // 你可以在这里根据项目需要查找首屏元素的特定条件，比如特定的CSS类或ID
      if (!document.querySelector('.loading').style.display) {
        // 页面首屏渲染完毕，首屏元素被找到，记录首屏时间
        firstScreenTime = performance.now();
        // 停止观察，避免重复计算首屏时间
        observer.disconnect();
      }
    }
  });

  if (firstScreenTime > 0) {
    console.log(`首屏时间：${firstScreenTime}ms`);
    // 可以在这里执行首屏渲染完毕后的操作
  }
}

四、其他应用场景

• 动态表单验证：在表单中添加MutationObserver，实时监测用户输入的变化，根据用户输入的内容进行实时的表单验证，提供即时的错误提示和反馈。
• 图片懒加载：对于图片懒加载技术，可以使用MutationObserver来监测图片元素是否进入了可视区域，从而在图片出现在可视区域内时才加载图片资源，减少页面的初始加载时间和带宽消耗。
• 无障碍辅助功能：通过MutationObserver监测页面内容的变化，可以实现辅助功能，比如在内容动态更新时提供适当的屏幕阅读器提示。
• 防止修改/删除水印图片或文字，当触发了水印元素的MutationObserver回调的时候，不去做具体的判断和恢复逻辑，而是将这个水印div删掉并重新生成新的水印div。