一、前言

在前端開(kāi)發(fā)中，優(yōu)化頁(yè)面性能是至關(guān)重要的，計(jì)算首屏?xí)r間（First Contentful Paint，F(xiàn)CP）是衡量網(wǎng)頁(yè)性能的重要指標(biāo)，它表示頁(yè)面內(nèi)容中的第一個(gè)元素被渲染到屏幕上的時(shí)間點(diǎn)。而MutationObserver是一種強(qiáng)大的JavaScript API，可以用于監(jiān)聽(tīng)DOM的變化，并幫助開(kāi)發(fā)者計(jì)算首屏?xí)r間，即頁(yè)面加載后第一次渲染完畢的時(shí)間點(diǎn)。本文將介紹如何使用MutationObserver來(lái)獲取首屏?xí)r間的最佳實(shí)踐，并提供具體的原理分析、代碼示例以及其他應(yīng)用場(chǎng)景。

二、原理分析

MutationObserver利用了瀏覽器的MutationObserver接口來(lái)監(jiān)聽(tīng)DOM的變化。當(dāng)DOM樹(shù)中的元素發(fā)生變化時(shí)，MutationObserver會(huì)自動(dòng)觸發(fā)注冊(cè)的回調(diào)函數(shù)。通過(guò)在回調(diào)函數(shù)中記錄時(shí)間戳，可以計(jì)算出首屏?xí)r間，即頁(yè)面加載后第一次渲染完畢的時(shí)間點(diǎn)。

1.創(chuàng)建MutationObserver對(duì)象：通過(guò)構(gòu)造函數(shù)MutationObserver創(chuàng)建一個(gè)MutationObserver對(duì)象，并傳入一個(gè)回調(diào)函數(shù)作為參數(shù)。

2.配置MutationObserver：通過(guò)MutationObserver的配置選項(xiàng)，指定需要監(jiān)測(cè)的DOM樹(shù)變化類(lèi)型。常見(jiàn)的配置選項(xiàng)有：

• childList：是否監(jiān)測(cè)子節(jié)點(diǎn)的變化，即DOM元素的添加或刪除。
• attributes：是否監(jiān)測(cè)屬性的變化，比如元素的屬性值發(fā)生變化。
• characterData：是否監(jiān)測(cè)字符數(shù)據(jù)的變化，比如文本節(jié)點(diǎn)的內(nèi)容發(fā)生變化。
• subtree：是否監(jiān)測(cè)整個(gè)DOM子樹(shù)的變化，包括子節(jié)點(diǎn)及其后代節(jié)點(diǎn)的變化。

3.觀察DOM樹(shù)：將MutationObserver對(duì)象與需要觀察的目標(biāo)節(jié)點(diǎn)（通常是文檔對(duì)象document）關(guān)聯(lián)起來(lái)，開(kāi)始監(jiān)測(cè)DOM樹(shù)的變化。

observer.observe(targetNode, observerConfig);

4.監(jiān)測(cè)DOM樹(shù)變化：一旦MutationObserver開(kāi)始觀察，它會(huì)監(jiān)測(cè)指定的DOM樹(shù)變化類(lèi)型。當(dāng)DOM樹(shù)發(fā)生符合指定類(lèi)型的變化時(shí)，會(huì)觸發(fā)回調(diào)函數(shù)，并將變化的信息傳遞給回調(diào)函數(shù)作為參數(shù)。

function callback(mutationsList, observer) {
  // 處理DOM樹(shù)的變化
}

在回調(diào)函數(shù)中，我們可以遍歷mutationsList，檢查DOM樹(shù)的變化情況，然后根據(jù)需要執(zhí)行相應(yīng)的操作。比如，找到首屏元素并記錄首屏?xí)r間，或者處理其它DOM樹(shù)的變化情況。

5.停止觀察：在需要停止觀察DOM樹(shù)變化時(shí)，我們可以調(diào)用disconnect()方法來(lái)停止MutationObserver的觀察。

observer.disconnect();

三、最佳實(shí)踐

1.初始化MutationObserver監(jiān)聽(tīng)： 在頁(yè)面加載后，通過(guò)JavaScript代碼創(chuàng)建一個(gè)MutationObserver對(duì)象，并注冊(cè)一個(gè)回調(diào)函數(shù)。回調(diào)函數(shù)會(huì)在DOM樹(shù)中的元素發(fā)生變化時(shí)自動(dòng)觸發(fā)。

const observer = new MutationObserver(callback);
observer.observe(document, {
  childList: true, // 監(jiān)測(cè)子節(jié)點(diǎn)的變化（元素的添加或刪除）
  subtree: true // 監(jiān)測(cè)子樹(shù)的變化（深層元素的修改）
});

2.計(jì)算DOM變化時(shí)的時(shí)間： 在回調(diào)函數(shù)中，可以通過(guò)檢查DOM元素的變化來(lái)判斷頁(yè)面是否已經(jīng)渲染完畢。例如，可以檢查頁(yè)面中某個(gè)元素的可見(jiàn)性、位置或樣式等屬性是否發(fā)生變化，從而判斷頁(yè)面的渲染狀態(tài)。

function callback(mutationsList) {
  let firstScreenTime = 0;
  mutationsList.forEach(mutation => {
    // 檢查DOM元素的變化
    if (mutation.type === 'attributes' && mutation.attributeName === 'style' && !document.querySelector('.loading').style.display) {
      // 頁(yè)面首屏渲染完畢
      firstScreenTime = performance.now();
    }
  });
  if (firstScreenTime > 0) {
    console.log(`首屏?xí)r間：${firstScreenTime}ms`);
    // 可以在這里執(zhí)行首屏渲染完畢后的操作
  }
}

3.去掉DOM被刪除情況的監(jiān)聽(tīng)： 在回調(diào)函數(shù)中，MutationObserver會(huì)監(jiān)聽(tīng)到DOM樹(shù)中元素的添加、刪除、屬性變化等多種變化。但在計(jì)算首屏?xí)r間時(shí)，只關(guān)注DOM的添加和屬性變化即可，因此可以在回調(diào)函數(shù)中去掉對(duì)DOM被刪除的情況的監(jiān)聽(tīng)，從而避免不必要的性能開(kāi)銷(xiāo)

function callback(mutationsList) {
  let firstScreenTime = 0;
  mutationsList.forEach(mutation => {
    // 只關(guān)注DOM元素的添加和屬性變化
    if ((mutation.type === 'attributes' && mutation.attributeName === 'style') || mutation.type === 'childList') {
      // 檢查DOM元素的變化
      // 你可以在這里根據(jù)項(xiàng)目需要查找首屏元素的特定條件，比如特定的CSS類(lèi)或ID
      if (!document.querySelector('.loading').style.display) {
        // 頁(yè)面首屏渲染完畢，首屏元素被找到，記錄首屏?xí)r間
        firstScreenTime = performance.now();
        // 停止觀察，避免重復(fù)計(jì)算首屏?xí)r間
        observer.disconnect();
      }
    }
  });
  if (firstScreenTime > 0) {
    console.log(`首屏?xí)r間：${firstScreenTime}ms`);
    // 可以在這里執(zhí)行首屏渲染完畢后的操作
  }
}

四、其他應(yīng)用場(chǎng)景

• 動(dòng)態(tài)表單驗(yàn)證：在表單中添加MutationObserver，實(shí)時(shí)監(jiān)測(cè)用戶(hù)輸入的變化，根據(jù)用戶(hù)輸入的內(nèi)容進(jìn)行實(shí)時(shí)的表單驗(yàn)證，提供即時(shí)的錯(cuò)誤提示和反饋。
• 圖片懶加載：對(duì)于圖片懶加載技術(shù)，可以使用MutationObserver來(lái)監(jiān)測(cè)圖片元素是否進(jìn)入了可視區(qū)域，從而在圖片出現(xiàn)在可視區(qū)域內(nèi)時(shí)才加載圖片資源，減少頁(yè)面的初始加載時(shí)間和帶寬消耗。
• 無(wú)障礙輔助功能：通過(guò)MutationObserver監(jiān)測(cè)頁(yè)面內(nèi)容的變化，可以實(shí)現(xiàn)輔助功能，比如在內(nèi)容動(dòng)態(tài)更新時(shí)提供適當(dāng)?shù)钠聊婚喿x器提示。
• 防止修改/刪除水印圖片或文字，當(dāng)觸發(fā)了水印元素的MutationObserver回調(diào)的時(shí)候，不去做具體的判斷和恢復(fù)邏輯，而是將這個(gè)水印div刪掉并重新生成新的水印div。

到此這篇關(guān)于利用MutationObserver實(shí)現(xiàn)計(jì)算首屏?xí)r間的文章就介紹到這了,更多相關(guān)MutationObserver計(jì)算首屏?xí)r間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論