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

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

[复制链接]

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 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极大影响速度,移除监听器后不再影响速度,以及李恒道很闲。

混的人。

7

主题

88

帖子

408

积分

实习版主

Rank: 7Rank: 7Rank: 7

积分
408

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

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

使用道具 举报

8

主题

124

帖子

162

积分

注册会员

Rank: 2

积分
162

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

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

使用道具 举报

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

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

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


混的人。
回复

使用道具 举报

4

主题

99

帖子

36

积分

新手上路

Rank: 1

积分
36

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

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

使用道具 举报

4

主题

99

帖子

36

积分

新手上路

Rank: 1

积分
36

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

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

要不李大师加大点力度,一万次太少只有一瞬,说明不了问题。比如跑个三天三夜,顺便测试一下电脑性能
回复

使用道具 举报

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

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

光插一万次+addeventlistener我电脑都卡了好几秒
笔记本五年没换新了
呜呜呜呜
混的人。
回复

使用道具 举报

4

主题

99

帖子

36

积分

新手上路

Rank: 1

积分
36

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

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

哈哈,小玩笑,我和我的兄弟都相信你的,毕竟几十ms谁都不会在意,由衷佩服
回复

使用道具 举报

4

主题

99

帖子

36

积分

新手上路

Rank: 1

积分
36

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

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

请教大师,我以前看见过一种代码,好像是js代码,找不到了。执行后大约一秒cpu涨爆,除了强制断电别无他发。有没有这种代码?
回复

使用道具 举报

8

主题

124

帖子

162

积分

注册会员

Rank: 2

积分
162

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

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

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

使用道具 举报

发表回复

本版积分规则

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