2017 JavaScript 主流框架性能总结
站长
· 阅读数 106
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，贴近浏览器来思考操作，从框架更新原理来思考逻辑，才能得到更好的性能。
转载自:https://juejin.cn/post/6844903541270642701