來一波原生的觀察者模式 | MutationObserver

MutationObserver

Mutation Observer API 用來監視DOM變更。DOM的任何變更，好比節點的增刪、屬性的變更、文本內容的變化，這個API均可以獲得通知。

首先這個API歸屬於微任務，也就是說是異步的，這樣設計也是爲了應付Dom變更頻繁的特色，防止頻繁變更佔用js執行棧形成頁面卡頓。好比說：若是不是異步當DOM變更觸發觀察者的回調函數執行，就會堵塞後續代碼的執行；是異步的話，在響應時間內好比說插入1000個p元素，那麼MutationObserver會把這些響應合併成一次。

MutationObserver有如下特色：

1. 異步執行
2. 把異步時間內的DOM變更記錄封裝成一個數組處理，能夠以數組的長度判斷頁面加載什麼時候Dom跳躍大。
3. 它既能夠觀察DOM的全部類型變更，也能夠指定只觀察某一類類型的變更。

MutationObserver構造函數

早期的Firefox和Chrome版本中須要帶有前綴。

var MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver;
複製代碼

首先使用MutationObserver構造函數實例化一個MutationObserver對象，同時指定這個實例的回調函數。

const observer = new MutationObserver(()=>{})
複製代碼

構造函數能夠接受兩個參數：

• 第一個參數爲變更記錄數據。
• 第二個參數爲觀察者實例。

const observer = new MutationObserver((mutations,observer) => {
    console.log(muatation,observer);
})
複製代碼

MutationObserver實例

構造函數調用MutationObserver獲得MutationObserver實例。實例有如下方法。

observe

observe方法用來監聽Dom變化，接受兩個參數：

• 第一個參數是所要觀察的Dom節點
• 第二個對象是一個配置對象，指定所要觀察的變更類型

observer.observe(document.documentElement,{
    
})
複製代碼

Dom的變更類型一共有三種：

• childList : 子節點變更(指新增、刪除、修改)。
• attributes ：屬性的變更
• characterData ： 節點內容或節點文本的變更。

當變更類型爲true的時候爲監聽狀態，默認爲不監聽。

須要注意的是：必須同時指定三種變更類型中的一種或者多種，不然會報錯。

除了三種變更類型外，對象屬性還能夠設置其餘值：

• subtree ： 布爾值，表示是否將觀察者應用於該節點的後代全部節點。
• attributeOldValue：布爾值，表示觀察attributes變更時，是否須要記錄變更前的屬性值。
• characterDataOldValue：布爾值，表示觀察characterData變更時，是否須要記錄變更前的值。
• attributeFilter：數組，表示須要觀察的特定屬性(好比說['class','src']);

observer.observe(document.documentElement,{
    childList : true,
    attributes : true,
    characterData : true,
    subtree : true,
    attributeOldValue: true,
    characterDataOldValue: true,
})
複製代碼

taskRecoreds

taskRecoreds方法用於清楚變更記錄，即再也不處理未處理的變更。該方法返回變更記錄的數組。

const changes = observer.taskRecords();
console.log(changes);
複製代碼

disconnect

disconnect方法用來中止觀察。調用該方法後，DOM再發生變更，也不會觸發觀察者對象。

observer.disconnect();
複製代碼

MutationRecord對象

DOM每次發生變化,就會生成一條變更記錄(MutationRecord實例)。該實例包含了與變更相關的全部信息。MutationObserver處理的就是一個個MutationRecord實例組成的數組。

MutationRecord包含了Dom的有關信息，有如下屬性：

• type：觀察變更的類型(attribute、characterData或者childList)
• target : 發生變更的DOM節點
• addedNodes ：新增的DOM節點
• removedNodes ： 刪除的DOM節點。
• previousSibling ： 前一個同級節點，若是沒有則返回null。
• nextSibling ： 下一個同級的節點，若是沒有則返回null。
• attributeName：發生變更的屬性名，若是設置了attributeFilter，則只返回attributeFilter中的屬性值。
• oldValue：這個屬性只對attribute和characterData變更生效，若是發生childList變更，則返回null。

總結

MutationObserver是異步操做，屬於微任務，在Vue源碼中實現nextTick的調度機制使用到了這個。 Vue中主要起到一個實現異步操做的調度機制，並無真正體現到監聽Dom變化的特色。

我我的這個東西在監聽Dom變化上仍是有大做用的。咱們在作性能監控的時候，一般會檢測一些性能指標，例如：FP、FCP、FMP這些性能指標。FMP的標準定義不明確，一般是指Dom活動最大的時刻。因此說FMP比較難檢測，一般採用body先後打mark的方式檢測。使用這個API的話，能夠檢測哪一個時間段Dom到文本中最多，也就能夠說成活動最大。

最後

這是Can I Use上的MutationObserver API的支持度。