上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]MutationObserver的使用

[复制链接]

118

主题

906

帖子

529

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
529
发表于 6 天前 | 显示全部楼层 | 阅读模式

tia# MutationObserver

MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品,该功能是DOM3 Events规范的一部分。

具体可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

那Mutation Events是什么呢?

Mutation Events

可以参考https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent

MutationEvents目前已经被弃用,不再推荐此功能。虽然一些浏览器可能仍然支持它,但它可能已经从相关的 Web 标准中删除,可能正在被删除,或者可能只是为了兼容性目的而保留。

Adding DOM mutation listeners to a document profoundly degrades the performance of further DOM modifications to that document (making them 1.5 - 7 times slower!). Moreover, removing the listeners does not reverse the damage.

添加Dom Muatation Listeners对document进行dom修改时会严重降低性能,大概导致缓慢1.5-7倍,并且,移除listener并不能逆转这种破坏!

以下为所有Mutation Events的列表

DOMAttrModified
DOMAttributeNameChanged
DOMCharacterDataModified
DOMElementNameChanged
DOMNodeInserted
DOMNodeInsertedIntoDocument
DOMNodeRemoved
DOMNodeRemovedFromDocument
DOMSubtreeModified

通常使用进行注册Mutation Event(也就是之前我介绍的那种方式)

element.addEventListener("DOMNodeInserted", function (event) {
  // ...
}, false);

转变

所以这时候我们为了避免性能的减缓,就使用了MutationObserver,其使用方式也相对之前有所改变

构造函数

MutationObserver() 创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。

使用方法

disconnect() 阻止MutationObserver 实例继续接收的通知,直到再次调用其observe()方法,该观察者对象包含的回调函数都不会再被调用。 observe() 配置MutationObserver在DOM更改匹配给定选项时,通过其回调函数开始接收通知。 takeRecords() 从MutationObserver的通知队列中删除所有待处理的通知,并将它们返回到MutationRecord对象的新Array中。

MutationObserver例子

选自博客https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

const targetNode = document.getElementById('some-id');

// 观察器的配置(需要观察什么变动)
const config = { attributes: true, childList: true, subtree: true };

// 当观察到变动时执行的回调函数
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 之后,可停止观察
observer.disconnect();

补充

我大概查阅了一下资料,认为MutationObserve是为了解决性能问题而产生的api,但是除了MutationEvents的性能问题,其目的主要为了监控Dom的插入、修改、以及删除。注意,这并不代表addeventlitener的废除!由于api目前接触时间较短,可能对其有一定的错误理解,欢迎补充!撒花~

70

主题

682

帖子

596

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
596

猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章

发表于 5 天前 | 显示全部楼层
ggnb!学习学习
上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
回复

使用道具 举报

8

主题

154

帖子

441

积分

中级会员

Rank: 3Rank: 3

积分
441

猫咪币纪念章活跃会员三好学生热心会员中秋纪念章

发表于 5 天前 | 显示全部楼层

ggnb!学习学习
布[
回复

使用道具 举报

6

主题

72

帖子

390

积分

实习版主

Rank: 7Rank: 7Rank: 7

积分
390

活跃会员猫咪币纪念章推广达人宣传达人突出贡献三好学生热心会员中秋纪念章

发表于 5 天前 | 显示全部楼层
好,慢慢学
是晚柒载哟
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表