Update: The chart is updated
preface
As a JavaScript developer, you’ve probably been exposed to a lot of frameworks, and maybe even mastered one or two of them. I used to prefer frameworks, which made development easier for me. However, after so many excellent conceptual changes in the front-end, from Virtual-DOM to state management, I am also wondering about the performance of the frameworks themselves and the overhead of different types of operations. This article will compare the performance of the mainstream frameworks and summarize the performance differences between them.
MacBook Pro 15 (2, 5ghz I7, 16 GB RAM, OSX 10.13.1, Chrome 62.0.3202.94 (64-bit)
The frames that are going to play
- Vanillajs – The existence of god, omnipresent, omnipotent framework, widely used in the development of various mainstream websites
- React-facebook’s son, who has been publicly proclaiming that he is underage, turned 15 when everyone thought he would never reach a year old
- AngularJS – Google dad’s eldest son, still in maintenance, but not as popular as it used to be because of the younger brothers
- Angular-google dad had his first son, and he thought he couldn’t do it this time. I’m going to make more, and the fourth one, number five, has just been born
- vue –
A mysterious power from the EastThe up-and-comers of the framework, but always compared with the above frameworks, constitute the main drama of the front-end entertainment industry
In the case of KEY
When you associate DOM elements with data, the data changes and the key is updated.
(Data representation: average MS ± deviation MS (relative to the fastest multiple))
| Test project | vanillajs | Vue – v2.5.3 | Presents – v5.0.0 | The react – v16.1.0 | Presents – v1.6.3 |
|---|---|---|---|---|---|
| Create a line: Create 1000 lines of content after the page loads. |
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) |
| Update the line: Update all 1000 lines. |
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) |
| Part of the update: Update the contents of multiples of ten rows in a 10,000-row table |
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) |
| Select rows: Mouse click on a highlighted line of time |
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) |
| Swap lines: Swap two rows in a thousand-row table |
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) |
| Delete rows: Delete a line of content |
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) |
| Create multiple lines: Create 10,000 lines of content |
1374 + / – 33.3 (1.0) | The activity of 1521 + / – 55.7 (1.1) | 1682.0 versus 53.1 mm (1.2) | 2,033.7±32.0(1.5) | 2112.0 versus 77.7 mm (1.5) |
| Additional line: Append 1000 lines to the 10000 line table |
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) |
| Empty line: Clear the contents of a 10,000-line table |
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) |
The startup time
| Test project | vanillajs | Vue – v2.5.3 | Presents – v5.0.0 | The react – v16.1.0 | Presents – v1.6.3 |
|---|---|---|---|---|---|
| Startup time when CPU and network conditions are idle | 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) |
| The time required to load all of the framework’s scripts | 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) |
| Time spent on the main thread (style, layout, etc.) | 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) |
| Total size of all resources transferred over the network (byte) | 163967.0 versus (1.0) | 227410.0 versus (1.4) | 304139.0 versus (1.9) | 263076.0 versus (1.6) | 337157.0 versus (2.1) |
In terms of startup time, Vue and React are obviously faster. Angular’s larger framework means scripts load faster, start faster, and have smaller script sizes than other frameworks.
Memory footprint
| Test project | vanillajs | Vue – v2.5.3 | Presents – v5.0.0 | The react – v16.1.0 | Presents – v1.6.3 |
|---|---|---|---|---|---|
| Memory usage after page loading | 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) |
| Increase memory footprint by 1000 rows | 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) |
| Update memory usage for multiples of 10 in 1000 rows | 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) |
| Memory footprint after replacing 1000 lines of content five times | 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) |
| Memory footprint after five times of creating 1000 lines of content | 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) |
conclusion
As you can see, vanillajs wins in every respect, and it’s not just the framework that you choose to get better performance optimization. You also need to think about how to use Vanillajs better, thinking about operations close to the browser, thinking about logic from the framework update principle, to get better performance.
Data source: Js-framework-benchmark