vlambda博客
学习文章列表

当前端框架聊性能,聊的是同一个性能么?

大家好,我是卡颂。

你可能看过下面这张图(或类似的图):

这是一张前端框架性能跑分表,表中每一行都是一个性能度量指标。

据我多年潜伏推特观察,采用了「细粒度更新」技术的框架开发者普遍喜欢晒跑分表。

比如Solid.js作者Ryan Carniato写的这篇2020年JS框架性能对比[1]内含15张跑分表

这些跑分表挂车尾的通常是ReactAngular12这样的业界知名框架。

不禁让人怀疑,前端进步这么快,React都这么拉跨啦?

当前端框架聊性能,聊的是同一个性能么?

本文会分享一些从跑分表中发现的有趣洞察。

虚拟DOM到底慢不慢?

我们先截取最前面两行,分别是「页面加载后创建1000行表格所需时间」以及「替换1000行列表所需时间」:

当前端框架聊性能,聊的是同一个性能么?

从左到右性能依次降低,其中第一列vanillajs「原生JS」,这也是众多框架毕生在追寻的目标。

可以看到,虽然React以及知名类React框架Preact排名倒数3、4,但同样作为类React框架的inferno排名却很靠前(第三名)。

这表示「虚拟DOM」可能并不是性能瓶颈。

实时上,得益于多种「虚拟DOM」的优化技巧,比如:

  • 数组两端比较

  • 查找最小移动次数

inferno「虚拟DOM」可能是业界同类解决方案中最高效的。

当前端框架聊性能,聊的是同一个性能么?

这里简单介绍下「两端比较」,假设diff前后的数据分别为:

// diff前
abcd
// diff后
abfd

「两端比较」会先排除数组相同的前、后缀节点。例子中的相同前缀是ab,相同后缀是d

所以实际进行对比的是:

// diff前
c
// diff后
f

简单、高效的优化策略。

由于ReactFiber架构使用链表实现,无法进行两端比较

细粒度更新yyds?

虽然「虚拟DOM」可以被优化的很高效,但他毕竟为「运行时」带来不少的运算量。

在上表有一行指标,红色特别多(代表性能低),这行度量的是「点击列表某一行使其高亮所需时间」:

当前端框架聊性能,聊的是同一个性能么?

这行的跑分结果:SolidJS > Svelte > Vue3.2 > inferno > ... > React > Angular

可见,采用「虚拟DOM」的框架性能普遍偏差。排名前3的框架技术架构为:

  • SolidJS:预编译 + 细粒度更新

  • Svelte:预编译 + 细粒度更新

  • Vue3:预编译 + 细粒度更新 + 虚拟DOM

这是因为「点击列表某一行使其高亮所需时间」度量的是「局部的小改变」。

这种类型改变是基于「订阅发布」的「细粒度更新」最擅长的场景。

当前端框架聊性能,聊的是同一个性能么?

相对的,也是「虚拟DOM」最不擅长的地方。

React有这么不堪么?

那么基于「细粒度更新」的框架有什么缺点,React又有什么性能优点呢?

答案是:「持续的可交互时间」(consistently interactive)。

他度量的是:CPU和网络的空闲时间,即Chrome DevToolslighthouse工具中的TimeToConsistentlyInteractive指标。

当前端框架聊性能,聊的是同一个性能么?

图中左边绿字Short Tasks指向的都是耗时很短的JS任务,短耗时意味着浏览器有更多空闲时间重排、重绘,更不易卡顿。

与其相对的是右边红字Long Tasks,指向的都是耗时很长的JS任务,此时浏览器更容易卡顿。

「细粒度更新」框架初始时会有为节点建立「响应式更新」的过程,比如:

  • Vue2中通过settergetter

  • Vue3中通过proxy

这一过程会有一定CPU及内存开销(虽然随着proxy的普及,JS原生支持「响应式更新」后,这部分开销会越来越低)。

当前端框架聊性能,聊的是同一个性能么?

React没有这部分开销,同时借由基于「虚拟DOM」的「时间切片」,React能进一步降低「持续的可交互时间」。

有趣的是,以上性能跑分表来源于开源项目js-framework-benchmark[2],该项目是有consistently interactive这一度量的。

但是有些基于「细粒度更新」的框架并没有选择在跑分表中加入这一项的对比。

总结

可以看到,不同的技术有不同优势:

  • 「细粒度更新」对于局部更新性能更佳

  • 基于「虚拟DOM」的「时间切片」对「持续的可交互时间」性能更佳

当大家在聊性能时,最好先明确聊的是哪个指标,否则差异可能很大。


「分享」「点赞」 「在看」 是最大 支持

参考资料

[1]

2020年JS框架性能对比: https://javascript.plainenglish.io/javascript-frameworks-performance-comparison-2020-cd881ac21fce

[2]

js-framework-benchmark: https://github.com/krausest/js-framework-benchmark