上節講到DOM的操作是"同步"還是"非同步"，怎麼準確的監聽DOM到底啥時候渲染成功了呢——MutationObserver。
一、什麼是MutationObserver
介面提供了監視對DOM樹所做更改的能力。它被設計為舊的MutationEvents功能的替代品，該功能是DOM3 Events規範的一部分。
簡單粗暴，就是監聽DOM樹的變動。
那麼，被代替的MutationEvents是什麼？
二、MutationEvents
- 首先明確：
MutationEvents在MDN中也寫到了，是被DOM Event承認在API上有缺陷，反對使用。 - 缺陷的核心在於兩點：跨瀏覽器支援和效能問題
MutationEvents的原理：通過繫結事件監聽DOM 乍一看到感覺很正常，那列一下相關監聽的事件：
DOMAttributeNameChanged
DOMCharacterDataModified
DOMElementNameChanged
DOMNodeInserted
DOMNodeInsertedIntoDocument
DOMNodeRemoved
DOMNodeRemovedFromDocument
DOMSubtreeModified
複製程式碼- 甭記，這麼多事件，各核心各版本瀏覽器想相容怕是要天荒地老。
- 具體說說效能問題（劃重點）：
- （1）事件多，可見的，監聽多項就繫結多項。
- （2）只要是繫結事件，離不開冒泡或捕獲兩種，而監聽的意義，有可能是大量的、頻繁的改動所作出的反應。況且，萬一要監聽多項呢？萬一多層巢狀每層都要監聽呢？萬一父子兄弟祖宗全家桶呢？（寫出來了維護一下試試？）
- （3）繫結事件立即執行有可能中斷DOM的餘下變動，也就是沒動完事件就觸發了。
- 接上，這些問題其實使用
觀察者模式就可以不錯的搞定，所以，看MutationObserver名字就知道了。
三、一句話說明觀察者模式
因為本篇主要介紹MutationObserver，作為MutationObserver的設計原理，簡單理解就是
A想看新聞，A就先在B這'交錢（訂閱）'，以後有新聞B就給A送報紙，A挑想看的新聞
- A - 訂閱者 - 通過
MutationObserver得到返回值(得到報紙) - 可以有無數的A來看B - B - 被觀察者 -
DOM- 變更時傳送新的內容(送新報紙) - B決定A
當然，更詳細的觀察者模式不久的將來都會有的。
四、MutationObserver的改進
針對上面MutationEvents的缺陷，來說一下MutationObserver的優勢。
- 瀏覽器相容問題：
const mutationObserver = new MutationObserver(callback);
複製程式碼MutationObserver是建構函式，相容難度低（ IE11以上才支援 ），值得說明的一點，移動端相容性更佳。
- 事件多問題：
const mutationObserver = new MutationObserver((mutations, observer) => {
console.log(observer); // 觀察者例項
console.log(mutations); // 變動陣列
mutations.forEach(function(mutation) {
console.log(mutation);
});
});
複製程式碼callback作為監聽事件，返回兩個固定引數mutations和observer。
mutations - 變動陣列
observer - 觀察者例項
具體要執行的函式呢，往下看
- 立即觸發/多次觸發問題：
function editContent() {
const content = document.getElementById('content');
console.log(1);
// --------------------------
observer(); // 訂閱
// --------------------------
content.style.background = 'lightblue';
content.style.background = 'red';
console.log(2);
content.innerHTML = 4433;
console.log(3);
const newNode = document.createElement('p');
newNode.innerHTML = 888888;
content.appendChild(newNode);
console.log(4);
}
複製程式碼執行結果：
// 1
// 2
// 3
// 4
// MutationObserver {}
// (4)[MutationRecord, MutationRecord, MutationRecord, MutationRecord]
複製程式碼- 非同步執行，插入微任務佇列，指令碼執行後才會執行。（微任務不能再清楚的帖子）
mutations引數將監聽的DOM的所有變更記錄按執行順序封裝成為一個陣列返回。- 可以通過配置項，監聽目標
DOM下子元素的變更記錄
五、MutationObserver的基礎使用
上面已經看到如何通過MutationObserver建構函式建立一個例項物件。
下一步要繫結被觀察者，以及需要觀察哪些變動項。
1. MutationObserver.observe(dom, options)
啟動監聽，接收兩個引數。
- 第一引數：被觀察的
DOM節點 - 第二引數：配置需要觀察的變動項options（記得
MutationEvents茫茫多的事件嗎，這裡通過配置項完成）
mutationObserver.observe(content, {
attributes: true, // Boolean - 觀察目標屬性的改變
characterData: true, // Boolean - 觀察目標資料的改變(改變前的資料/值)
childList: true, // Boolean - 觀察目標子節點的變化，比如新增或者刪除目標子節點，不包括修改子節點以及子節點後代的變化
subtree: true, // Boolean - 目標以及目標的後代改變都會觀察
attributeOldValue: true, // Boolean - 表示需要記錄改變前的目標屬性值
characterDataOldValue: true, // Boolean - 設定了characterDataOldValue可以省略characterData設定
// attributeFilter: ['src', 'class'] // Array - 觀察指定屬性
});
複製程式碼注：
attributeFilter/attributeOldValue優先順序高於attributescharacterDataOldValue優先順序高於characterDataattributes/characterData/childList（或更高階特定項）至少有一項為true；- 特定項存在, 對應選項可以
忽略或必須為true
附：開發API原文
2. MutationObserver.disconnect()
停止觀察。呼叫後不再觸發觀察器，解除訂閱 注：當完成監聽後，儘可量記得解除訂閱
3. MutationObserver.takeRecords()
清除變動記錄。即不再處理未處理的變動。該方法返回變動記錄的陣列，注意，該方法立即生效。
附：takeRecords變更記錄欄位內容MutationRecord物件
/*
MutationRecord = {
type：如果是屬性變化，返回"attributes"，如果是一個CharacterData節點（Text節點、Comment節點）變化，返回"characterData"，節點樹變化返回"childList"
target：返回影響改變的節點
addedNodes：返回新增的節點列表
removedNodes：返回刪除的節點列表
previousSibling：返回分別新增或刪除的節點的上一個兄弟節點，否則返回null
nextSibling：返回分別新增或刪除的節點的下一個兄弟節點，否則返回null
attributeName：返回已更改屬性的本地名稱，否則返回null
attributeNamespace：返回已更改屬性的名稱空間，否則返回null
oldValue：返回值取決於type。對於"attributes"，它是更改之前的屬性的值。對於"characterData"，它是改變之前節點的資料。對於"childList"，它是null
}
*/
複製程式碼六、MutationObserver的進階應用
- 監聽JS指令碼建立的
DOM渲染完成 - 監聽圖片/富文字編輯器/節點內容變化及處理
- 關於
vue對於MutationObserver的應用
1. 監聽JS指令碼建立的DOM渲染完成
之前有提到，DOM渲染遇到指令碼阻塞時會發生類似於"非同步"的情況，影響對DOM的後續操作。
雖然可以用觸發迴流的方式解決，但是在複雜業務場景中/過量資料場景中並不是十分優秀的選擇。
既然MutationObserver能夠監聽到DOM樹中子節點的變化，那麼利用這一點，可以監聽document或父節點的DOM樹變化。
小巧的栗子：
// html
<div id="content">66666</div>
// js
let time = 4;
let arr = new Array(time);
let content = document.getElementById('content');
let mutationObserver = new MutationObserver(obsCallback); // 建立例項
obs(); // 繫結被觀察者
obstruct(); // 執行阻塞
// 完成建立
function obsCallback(mutations, observer) {
console.log(`建立完成!`);
console.log(observer); // 觀察者例項
console.log(mutations); // 變動陣列
}
function obs() {
mutationObserver.observe(content, {
childList: true,
subtree: true,
});
}
function obstruct() {
for (let i = 0; i < arr.length; i++) {
arr[i] = `<div>${i}</div>`;
}
arr.map((item, idx) => {
for(let i = 0; i < 3000; i++) console.log(1)
content.innerHTML += item;
});
}
複製程式碼2. 監聽圖片/富文字編輯器/節點內容變化及處理
之前有一篇講到contenteditable屬性，使DOM可編輯，做富文字編輯器等應用。
對於此類的應用，例如過濾關鍵字或內容，阻止編輯（內容復原），以及無法刪除的圖片水印等一系列操作都可以簡單實現(附1)
阻止編輯的簡陋栗子：
// html
<div id="content">66666</div>
// js
function obsCallback(mutations, observer) {
console.log(observer); // 觀察者例項
console.log(mutations); // 變動陣列
mutations.forEach(mutation => {
if (mutation.target.contentEditable === 'true') {
mutation.target.setAttribute('contenteditable', 'false');
}
})
}
function obs() {
mutationObserver.observe(content, {
// attributes: true,
attributeFilter: ['contenteditable']
// characterData: true,
// childList: true,
// subtree: true,
});
}
複製程式碼3. 關於vue對於MutationObserver的應用
-
vue框架在vue2.0之前，對於MutationObserver的應用在於nextTick； 原理是利用了MutationObserver非同步回撥函式在微任務佇列中排列。 具體操作呢，建立一個新節點並觀察，隨意的更新一下它的內容就可以了。 -
什麼？為啥是2.0之前，現在用了
MessageChannel，什麼是MessageChannel？那是下一個話題。 -
為什麼要用
MutationObserver，或者說它和Promise與setTimeout的區別在哪裡。vue優先順序是Promise、MutationObserver、setTimeout。 當Promise不相容時選擇MutationObserver，從功能和效能角度來說兩者基本一致，只是實現略有麻煩，要新建一個節點隨便動一下。setTimeout最後為了相容備選使用，原因如下。 -
原因：
MutationObserver與Promise屬於微任務，setTimeout屬於巨集任務； 在瀏覽器執行機制裡，每當巨集任務執行結束都會進行重新渲染，微任務則在當前巨集任務中執行，可以最快的得到最新的更新，如果有對應的DOM操作（回想一下上一篇），在巨集任務結束時會一併完成。 但如果使用setTimeout巨集任務，更新內容需要等待佇列中前面的全部巨集任務執行完畢，並且，如果其中更新內容中有DOM操作，瀏覽器會渲染兩次。 -
被棄用的原因： 一個相容性BUG。對於
iOS UIWebView，頁面執行一段時間會中斷，目前原生的MutationObserver並沒有良好的解決辦法，如果將IOS10 Safari和其他執行環境分開，有些多此一舉。（換一個更好的相容就是了） 原回覆
參考引用：