[油猴脚本开发指南]Mutation Event性能影响简易测试

1 年前

李恒道

我是垃圾，但我的爱不是

开篇

由于我也没怎么仔细研究过注册Mutation Event与 MutationObserver 函数之前的性能差距，所以这篇大概测试一下性能以及前文所说的一些知识点。

我们可以使用console.time('time')以及console.timeEnd('time')来获取函数的执行时间，这里我们首先书写代码

<!DOCTYPE html>
<html lang="en">
    <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>
    <div id='test'>
</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">
    <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>
    <div id='test'>
</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)