什么？Mutation events将要从 Chrome 中移出？

前言

如图，Chromium将要在127版本之后，移出对 mutation events 的支持，时间是2024年7月30号。博文具体信息可参见：Mutation events will be removed from Chrome

看到文章标题的第一反应是震惊！为什么？

Chrome要放弃对MutationObserver的支持？实则不然！

什么是mutation events

以下以下以下文中提到即将要放弃支持的是以下这些事件：

DOMNodeInserted
DOMNodeRemoved
DOMSubtreeModified
DOMCharacterDataModified
DOMNodeInsertedIntoDocument
DOMNodeRemovedFromDocument
(Not supported by any modern browser) DOMAttrModified
(Not supported by any modern browser) DOMAttributeNameChanged
(Not supported by any modern browser) DOMElementNameChanged

这些是属于 DOM Level 2的事件，自从2011年就已经被弃用。取而代之的是2013年就被现代浏览器所支持的MutationObserver interface，正是我误以为即将被弃用的。

mutation events 的发展历史

在之前，Mutation events听起来似乎是个很好的功能，不过他有几个致命的缺陷：

事件冗长且触发频繁。移除每一个node的时候都会触发。
很慢。
频繁引起崩溃。

正是由于这些原因，才会在2011年弃用，同时在2012年使用MutationObserver来代替。

为什么要移出mutation events？

既然都已经存在了，不使用这些事件就不会影响性能了。为什么一定要移除这些事件呢？

总结为以下三点：

限制了浏览器的发展。随着web平台（浏览器）的发展，新增API等，需要考虑这些事件的兼容。
影响性能。
已经弃用了10年+，以及替代的 API 也运行了10年+，时机成熟了。

如何迁移

用 `MutationObserver` 代替

MutationObserver文档。

示例：

// Old mutation event usage: 
target.addEventListener(‘DOMNodeInserted',event => doSomething(event.target)); // Replacement mutation observer code: const observer = new MutationObserver(mutationList => mutationList.filter(m => m.type === 'childList').forEach(m => { m.addedNodes.forEach(doSomething); })); observer.observe(target,{childList: true, subtree: true});

虽然MutationObserver版本的代码看起来比DOMNodeInserted事件监听的要多，但是能够在一个事件回调里去处理整个 DOM Tree 的变化。不需要去写多个事件监听。

Polyfill

当然，在业务代码中搜了下mutation events的使用情况，不出所料，是没有的。不知道你们有没有，以及大家都是在什么场景中使用MutationObserver的呢？