2017 JavaScript 主流框架性能总结

6,698 阅读4分钟

update: 更新了图表

前言

作为一名JavaScript开发者,你也许已经接触到了众多框架,甚至在众多框架之中你已经熟练掌握了一两个。之前我偏爱框架,它降低了我的开发难度。但是在经历了那么多优秀的前端的概念变革,从Virtual-DOM到状态管理,我也在想,对于框架的本身,它们的性能到底如何,对于不同类型的操作的开销又是怎样的,本文将对主流框架进行性能比对,并且总结之间的性能差异。

使用环境:MacBook Pro 15 (2,5 GHz i7, 16 GB RAM, OSX 10.13.1, Chrome 62.0.3202.94 (64-bit))

将要上场的框架们

  • vanillajs - 主神的存在,无处不在,无所不能的框架,大量运用于各种主流网站的开发
  • react - 脸书的儿子,对外一直宣称自己的没满岁,在大家认为它没希望长到一岁的时候,一下子长到了十五岁
  • angularJS - 谷歌爸爸的长子,虽然还在维护,但是因为弟弟们的诞生,热度大不如前
  • angular - 谷歌爸爸在生了长子后,觉得这届儿子不行,我要再造几个,现在编号第五的老四刚刚诞生
  • vue - 来自东方的神秘力量,框架的后起之秀,不过总是会和以上的框架们比较,构成了前端娱乐圈主要戏码

在使用KEY的情况下

把DOM元素和数据联系的时候,数据变化,key也会更新。

(数据表示:平均ms±偏差ms(相对于最快的倍数))

测试项目 vanillajs vue-v2.5.3 angular-v5.0.0 react-v16.1.0 angular-v1.6.3
创建行
在页面载入之后创建1000行内容。
137.8±9.9(1.0) 169.2±3.6(1.2) 185.7±7.8(1.3) 201.2±12.1(1.5) 222.9±8.1(1.6)
更新行
更新所有1000行的内容。
155.7±5.4(1.0) 161.8±3.9(1.0) 179.3±6.5(1.2) 169.0±4.3(1.1) 232.3±8.7(1.5)
部分更新
更新一万行的表格中十的倍数行的内容
76.5±4.8(1.0) 168.1±7.4(2.3) 73.5±4.9(1.0) 90.9±3.3(1.2) 87.1±5.3(1.2)
选择行
鼠标点击一行高亮的时间
10.8±3.5(1.0) 9.8±2.5(1.0) 7.6±4.0(1.0) 12.4±4.1(1.0) 10.0±4.7(1.0)
交换行
交换一千行的表格中的两行
18.3±4.6(1.0) 19.0±2.8(1.0) 118.5±2.8(6.5) 121.8±4.2(6.7) 125.9±5.3(6.9)
删除行
删除一行内容
43.1±1.6(1.0) 52.5±1.8(1.2) 46.1±2.6(1.1) 51.5±2.0(1.2) 48.6±2.5(1.1)
创建多行
创建10000行内容
1,374.5±33.3(1.0) 1,521.4±55.7(1.1) 1,682.0±53.1(1.2) 2,033.7±32.0(1.5) 2,112.0±77.7(1.5)
附加行
在10000行的表格后附加上1000行
217.4±7.3(1.0) 338.4±10.3(1.6) 257.6±11.1(1.2) 271.8±9.9(1.3) 371.6±60.4(1.7)
清空行
清空一万行的表格的内容
177.1±10.2(1.0) 240.9±11.4(1.4) 360.3±16.4(2.0) 224.4±6.0(1.3) 517.8±62.0(2.9)

在开销比较大的表格操作上,交换行的开销是各个框架的重灾区,但是因为底层diff算法深度不同的关系,vue在此项表现上比较好,在事件处理机制上,框架表现出了对于事件的优化,而react因为大量附加事件逻辑的关系,表现略逊一筹。总的操作性能比上,以vanillajs为基准,依次为vue(1.27),angularJS(1.47),react(1.49),angular(1.77)。

启动时间

测试项目 vanillajs vue-v2.5.3 angular-v5.0.0 react-v16.1.0 angular-v1.6.3
当CPU和网络情况都很空闲的时候的启动时间 38.8±2.9(1.0) 55.4±1.6(1.4) 97.4±3.5(2.5) 58.4±1.1(1.5) 96.9±23.9(2.5)
载入框架所有脚本所需要的时间 4.0±0.3(1.0) 20.8±0.7(1.3) 45.9±1.6(2.9) 22.1±0.6(1.4) 56.8±18.4(3.6)
主线程(样式,布局等)的花销时间 162.1±2.6(1.0) 174.2±2.5(1.1) 216.8±4.6(1.3) 176.9±2.3(1.1) 224.0±52.1(1.4)
经过网络传输所有资源的总大小(byte) 163,967.0(1.0) 227,410.0(1.4) 304,139.0(1.9) 263,076.0(1.6) 337,157.0(2.1)

在启动时间方面,明显vue和react更加快,angular兄弟因为本身框架比较庞大,所以脚本在载入,启动时间,脚本大小等都不如其他的框架。

内存占用

测试项目 vanillajs vue-v2.5.3 angular-v5.0.0 react-v16.1.0 angular-v1.6.3
页面加载后的内存占用 3.0±0.1(1.0) 3.6±0.1(1.2) 6.7±0.1(2.2) 3.7±0.1(1.2) 4.3±0.1(1.4)
增加1000行后的内存占用 3.7±0.1(1.0) 7.2±0.0(2.0) 10.5±0.0(2.9) 7.6±0.0(2.1) 11.9±0.0(3.2)
更新1000行中10的倍数行的内存占用 3.7±0.1(1.0) 7.3±0.0(2.0) 10.6±0.0(2.9) 8.5±0.0(2.3) 11.9±0.0(3.2)
替换1000行内容5次后的内存占用 3.6±0.1(1.0) 7.3±0.0(2.0) 10.8±0.0(3.1) 9.0±0.0(2.5) 12.4±0.0(3.5)
创建1000行内容5次后的内存占用 3.2±0.0(1.0) 3.8±0.0(1.2) 7.1±0.0(2.2) 4.7±0.0(1.5) 4.7±0.0(1.5)

在内存占用上,angular兄弟依然都是偏大的,但是angularJS的增长趋势还是算比较低的,而angular的增长趋势也比较大了,vue的增长趋势也比较稳定,但是react在大量替换和更新操作上,开销增长较大,稳定性不强。

总结

可以看出,在各个方面vanillajs都是胜出的,想要得到更好的性能优化,不仅仅是选择框架。还需要思考怎样更好的使用vanillajs,贴近浏览器来思考操作,从框架更新原理来思考逻辑,才能得到更好的性能。

数据来源:js-framework-benchmark