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

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

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-9-20 20:56:02 | 显示全部楼层 | 阅读模式

    开篇

    由于我也没怎么仔细研究过注册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执行,然后测试速度

    图片.png

    得出time:27 毫秒 - 倒计时结束

    通过简陋的测试可以观察出,相差速度极大!

    根据上文说过的【移除listener并不能逆转这种破坏!】

    接下来我们先添加再移除监测一下性能

    图片.png

    这里我首先对函数进行一万次的插入以及移除

    然后对其进行插入10000次节点进行测试

    得出time:25 毫秒 - 倒计时结束

    由于有一定的速度差距,但是可以认为移除监听器可以取消影响dom插入速度的效果!

    为了防止我们的思路出现错误,我们先监听插入一万次,再取消监听插入一万次,测试速度

    图片.png

    图片.png

    可以得出取消监听器可以恢复运行速度。

    补充

    根据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极大影响速度,移除监听器后不再影响速度,以及李恒道很闲。

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    2022-7-5 00:02
  • 签到天数: 124 天

    [LV.7]常住居民III

    5

    主题

    170

    回帖

    927

    积分

    版主

    积分
    927

    荣誉开发者油中2周年

    发表于 2021-9-20 21:12:43 | 显示全部楼层
    来了,
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    857

    回帖

    1356

    积分

    荣誉开发者

    积分
    1356

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2021-9-20 21:36:57 | 显示全部楼层
    监听函数不要用空函数,随便写点费时操作再测试一下,性能差距会更明显。DOMNodeInserted最让人诟病的倒不是一个监听器的成本(20ms应该没人在意吧),而是他的监听函数是同步触发的,而MutationObserver是异步。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-9-20 21:53:54 | 显示全部楼层
    cxxjackie 发表于 2021-9-20 21:36
    监听函数不要用空函数,随便写点费时操作再测试一下,性能差距会更明显。DOMNodeInserted最让人诟病的倒不 ...

    标注上了,哥哥!
    没思考到这一步


    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-3-3 00:00
  • 签到天数: 117 天

    [LV.6]常住居民II

    27

    主题

    588

    回帖

    521

    积分

    专家

    积分
    521

    油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2021-9-20 22:08:26 | 显示全部楼层
    窃以为,任何耗时操作都会加倍增大误差,可能随便一个命令每次执行的时间应该都不会相等。在我一个外行人看来这个实验应该接近于事实。嗯,这是用事实射你们一脸呀,虽然解除监控后并不能证明影响力归零
    入驻爱发电 让这世界充满爱 https://afdian.net/a/vpannice
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-3-3 00:00
  • 签到天数: 117 天

    [LV.6]常住居民II

    27

    主题

    588

    回帖

    521

    积分

    专家

    积分
    521

    油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2021-9-20 22:23:44 | 显示全部楼层
    李恒道 发表于 2021-9-20 21:53
    标注上了,哥哥!
    没思考到这一步

    要不李大师加大点力度,一万次太少只有一瞬,说明不了问题。比如跑个三天三夜,顺便测试一下电脑性能
    入驻爱发电 让这世界充满爱 https://afdian.net/a/vpannice
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-9-20 22:28:36 | 显示全部楼层
    脚本体验师001 发表于 2021-9-20 22:23
    要不李大师加大点力度,一万次太少只有一瞬,说明不了问题。比如跑个三天三夜,顺便测试一下电脑性能 ...

    光插一万次+addeventlistener我电脑都卡了好几秒
    笔记本五年没换新了
    呜呜呜呜
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-3-3 00:00
  • 签到天数: 117 天

    [LV.6]常住居民II

    27

    主题

    588

    回帖

    521

    积分

    专家

    积分
    521

    油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2021-9-20 22:32:34 | 显示全部楼层
    李恒道 发表于 2021-9-20 22:28
    光插一万次+addeventlistener我电脑都卡了好几秒
    笔记本五年没换新了
    呜呜呜呜 ...

    哈哈,小玩笑,我和我的兄弟都相信你的,毕竟几十ms谁都不会在意,由衷佩服
    入驻爱发电 让这世界充满爱 https://afdian.net/a/vpannice
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-3-3 00:00
  • 签到天数: 117 天

    [LV.6]常住居民II

    27

    主题

    588

    回帖

    521

    积分

    专家

    积分
    521

    油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2021-9-20 22:58:13 | 显示全部楼层
    cxxjackie 发表于 2021-9-20 21:36
    监听函数不要用空函数,随便写点费时操作再测试一下,性能差距会更明显。DOMNodeInserted最让人诟病的倒不 ...

    请教大师,我以前看见过一种代码,好像是js代码,找不到了。执行后大约一秒cpu涨爆,除了强制断电别无他发。有没有这种代码?
    入驻爱发电 让这世界充满爱 https://afdian.net/a/vpannice
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-3-8 11:41
  • 签到天数: 2 天

    [LV.1]初来乍到

    22

    主题

    857

    回帖

    1356

    积分

    荣誉开发者

    积分
    1356

    荣誉开发者卓越贡献油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2021-9-20 23:23:07 | 显示全部楼层
    脚本体验师001 发表于 2021-9-20 22:58
    请教大师,我以前看见过一种代码,好像是js代码,找不到了。执行后大约一秒cpu涨爆,除了强制断电别无他 ...

    大师不敢当应该是内存泄漏,就是不停地申请内存又不及时释放,就有可能造成这个问题,比如在setInterval里不停地new一些对象,把间隔设得特别短就有可能卡死浏览器(手快及时关闭标签页可以避免)。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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