2017 JavaScript 主流框架性能总结

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