[油猴脚本开发指南]Mutation Event性能影响简易测试
# 开篇由于我也没怎么仔细研究过注册Mutation Event与`MutationObserver`函数之前的性能差距，所以这篇大概测试一下性能以及前文所说的一些知识点。
我们可以使用console.time('time')以及console.timeEnd('time')来获取函数的执行时间，这里我们首先书写代码
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='test'>
6666
</div>
</body>
<script>
console.time('time')
document.querySelector('#test').addEventListener('DOMNodeInserted',function(event) {
})
for (let index = 0; index < 10000; index++) {
let node=document.createElement("div")
node.innerText=index
document.querySelector('#test').appendChild(node)
}
console.timeEnd('time')
</script>
</html>
```
监控后对函数进行暴力插入10000次测试性能
得出**time：46 毫秒 - 倒计时结束**
接下来取消addEventListener执行，然后测试速度
得出**time：27 毫秒 - 倒计时结束**
通过简陋的测试可以观察出，相差速度极大！
根据上文说过的【移除listener并不能逆转这种破坏！】
接下来我们先添加再移除监测一下性能
这里我首先对函数进行一万次的插入以及移除
然后对其进行插入10000次节点进行测试
得出**time：25 毫秒 - 倒计时结束**
由于有一定的速度差距，但是可以认为移除监听器可以取消影响dom插入速度的效果！
为了防止我们的思路出现错误，我们先监听插入一万次，再取消监听插入一万次，测试速度
可以得出取消监听器可以恢复运行速度。
# 补充
根据cxxjackie补充，Muation Event在注册时候执行的回调函数属于同步执行代码，其主要的执行损耗都在于function内的复杂操作，相比之前注册的损耗可以忽略不计。
而MutationObserver则为异步执行代码
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='test'>
6666
</div>
</body>
<script>
console.time('time')
document.querySelector('#test').addEventListener('DOMNodeInserted',function(event) {
console.log(event)
console.log(event)
console.log(event)
console.log(event)
console.log(event)
})
for (let index = 0; index < 10000; index++) {
let node=document.createElement("div")
node.innerText=index
document.querySelector('#test').appendChild(node)
}
console.timeEnd('time')
</script>
</html>
```
执行**time：854 毫秒 - 倒计时结束**
可以观察到有几十倍的差距！
# 结论
注册Mutation Event极大影响速度，移除监听器后不再影响速度，以及李恒道很闲。
来了，{:4_94:} 监听函数不要用空函数，随便写点费时操作再测试一下，性能差距会更明显。DOMNodeInserted最让人诟病的倒不是一个监听器的成本（20ms应该没人在意吧），而是他的监听函数是同步触发的，而MutationObserver是异步。 cxxjackie 发表于 2021-9-20 21:36
监听函数不要用空函数，随便写点费时操作再测试一下，性能差距会更明显。DOMNodeInserted最让人诟病的倒不 ...
标注上了，哥哥！
没思考到这一步
窃以为，任何耗时操作都会加倍增大误差，可能随便一个命令每次执行的时间应该都不会相等。在我一个外行人看来这个实验应该接近于事实。嗯，这是用事实射你们一脸呀，虽然解除监控后并不能证明影响力归零 李恒道 发表于 2021-9-20 21:53
标注上了，哥哥！
没思考到这一步
要不李大师加大点力度，一万次太少只有一瞬，说明不了问题。比如跑个三天三夜，顺便测试一下电脑性能 脚本体验师001 发表于 2021-9-20 22:23
要不李大师加大点力度，一万次太少只有一瞬，说明不了问题。比如跑个三天三夜，顺便测试一下电脑性能 ...
{:4_96:}光插一万次+addeventlistener我电脑都卡了好几秒
笔记本五年没换新了
呜呜呜呜 李恒道 发表于 2021-9-20 22:28
光插一万次+addeventlistener我电脑都卡了好几秒
笔记本五年没换新了
呜呜呜呜 ...
哈哈，小玩笑，我和我的兄弟都相信你的，毕竟几十ms谁都不会在意，由衷佩服 cxxjackie 发表于 2021-9-20 21:36
监听函数不要用空函数，随便写点费时操作再测试一下，性能差距会更明显。DOMNodeInserted最让人诟病的倒不 ...
请教大师，我以前看见过一种代码，好像是js代码，找不到了。执行后大约一秒cpu涨爆，除了强制断电别无他发。有没有这种代码？ 脚本体验师001 发表于 2021-9-20 22:58
请教大师，我以前看见过一种代码，好像是js代码，找不到了。执行后大约一秒cpu涨爆，除了强制断电别无他 ...
大师不敢当{:4_86:}应该是内存泄漏，就是不停地申请内存又不及时释放，就有可能造成这个问题，比如在setInterval里不停地new一些对象，把间隔设得特别短就有可能卡死浏览器（手快及时关闭标签页可以避免）。
页:
[1]
2