当前端框架聊性能,聊的是同一个性能么?
SegmentFault
共 1814字,需浏览 4分钟
·
2021-08-30 09:39
![](https://filescdn.proginn.com/5380a2c762350c4cd30b4e34cb07790a/216167eab8903b80963fefd263f0beb9.webp)
Solid.js
作者Ryan Carniato
写了一篇《2020年JS框架性能对比》内含15张跑分表React
、Angular12
这样的业界知名框架。React
都这么拉跨啦?![](https://filescdn.proginn.com/f8c4d028d5adcbbef2b916b5b2510ce8/4470e0314b2c0ffe354702acb06cb5cf.webp)
虚拟DOM到底慢不慢?
![](https://filescdn.proginn.com/ec540f568a47df254a8e8778ff082a9d/3b6ff9befa91a17b4c56a886c57e970c.webp)
vanillajs
指原生JS,这也是众多框架毕生在追寻的目标。React
以及知名类React
框架Preact
排名倒数3、4,但同样作为类React
框架的inferno
排名却很靠前(第三名)。数组两端比较
查找最小移动次数
inferno
的虚拟DOM可能是业界同类解决方案中最高效的。![](https://filescdn.proginn.com/054d271ef1cd7a9b7e87408f3f1cfb4b/88a224cfa3994ef0c0859c21af676fc6.webp)
diff
前后的数据分别为:// diff前
abcd
// diff后
abfd
ab
,相同后缀是d
。// diff前
c
// diff后
f
React
的Fiber
架构使用链表实现,无法进行两端比较细粒度更新yyds?
![](https://filescdn.proginn.com/bf7dd784b9099ddc237b43407b70fe07/f9c6c39ef1be541ee3e59c97eb05114a.webp)
SolidJS:预编译 + 细粒度更新
Svelte:预编译 + 细粒度更新
Vue3:预编译 + 细粒度更新 + 虚拟DOM
![](https://filescdn.proginn.com/a7ebfdd6a7eeb8206cb667adf04d995e/d96c7c576ce744ad5bbc01a0f986f092.webp)
React有这么不堪么?
React
又有什么性能优点呢?CPU
和网络的空闲时间,即Chrome DevTools
的lighthouse
工具中的TimeToConsistentlyInteractive
指标。![](https://filescdn.proginn.com/50a08249f834021573d1bb72e6d35970/68b7ac88174afd54899d37e934e412a5.webp)
Short Tasks
指向的都是耗时很短的JS
任务,短耗时意味着浏览器有更多空闲时间重排、重绘,更不易卡顿。Long Tasks
,指向的都是耗时很长的JS
任务,此时浏览器更容易卡顿。Vue2
中通过setter
、getter
Vue3
中通过proxy
CPU
及内存开销(虽然随着proxy
的普及,JS
原生支持响应式更新后,这部分开销会越来越低)。![](https://filescdn.proginn.com/67fea5d92c2b97510761966ea135a280/521d18368ec44019648e25d62a1c8941.webp)
React
没有这部分开销,同时借由基于虚拟DOM的时间切片,React
能进一步降低持续的可交互时间。总结
细粒度更新对于局部更新性能更佳
基于虚拟DOM的时间切片对持续的可交互时间性能更佳
![](https://filescdn.proginn.com/029c52372bdbbca41d87bc830a60be34/169cf596d0e91c4fb4520bb18640c0e8.webp)
评论