The current framework talks about performance, is it the same performance?

Hi everyone, this is Kasong.

You may have seen the following picture (or a similar picture):

This is a front-end framework performance benchmark table. Each row in the table is a performance metric.

According to my lurking Twitter observations for many years fine-grained update technology generally like to post the running score.

For example, Solid.js author Ryan Carniato wrote this 2020 JS framework performance comparison contains 15 running score tables

The tails of these running sub-meters are usually well-known frames such React and Angular12

Can't help but make people wonder, the front-end progress is so fast, React is so stretched?

This article will share some interesting insights discovered from the running score table.

Is the virtual DOM slow?

We first intercept the first two rows, which are the time required to create a 1000-row table after the and time required to replace the 1000-row list :

The performance decreases from left to right. The first column vanillajs refers to native JS , which is also the goal that many frameworks are pursuing all their lives.

It can be seen that although React and the well-known type React framework Preact rank bottom 3 and 4, but also as the type React framework inferno ranks very high (third place).

This means that the virtual DOM may not be a performance bottleneck.

In real time, thanks to multiple virtual DOM , such as:

• Compare both ends of the array
• Find the minimum number of moves

inferno 's virtual DOM may be the most efficient solution of its kind in the industry.

Here is a brief introduction to at both ends of , assuming that the data before and after diff

// diff前
abcd
// diff后
abfd

at both ends of will first exclude the same prefix and suffix nodes of the array. The same prefix in the example is ab and the same suffix is d .

So the actual comparison is:

// diff前
c
// diff后
f

Simple and efficient optimization strategy.

Because React of Fiber architecture uses a linked list to achieve, can not be compared at both ends

Fine-grained update yyds?

Although the virtual DOM can be optimized very efficiently, it brings a lot of computation runtime

There is a row of indicators in the above table. There is a lot of red (representing low performance). This row measures time required to click a :

The results of this line of running points: SolidJS> Svelte> Vue3.2> inferno> ...> React> Angular

It can be seen that the performance of the framework virtual DOM The top 3 framework technical architectures are:

• SolidJS: pre-compiled + fine-grained update
• Svelte: pre-compilation + fine-grained update
• Vue3: pre-compilation + fine-grained update + virtual DOM

This is because list to highlight the time required for measure a small local change .

This type of change is based on the subscription and publication 's fine-grained update 's best scenario.

On the other hand, virtual DOM worst place.

Is React so unbearable?

So based on fine-grained update framework What are the disadvantages, React what performance advantage of it?

The answer is: continuous interactive time (consistently interactive).

His measure is: CPU and network idle time that Chrome DevTools of lighthouse tool TimeToConsistentlyInteractive indicators.

Short Tasks on the left of the JS task, which takes a very short time. Short time consuming means that the browser has more free time to rearrange and redraw, and it is not easy to freeze.

The opposite is the red letter Long Tasks on the right, which points to the long time-consuming JS task. At this time, the browser is more likely to freeze.

fine-grained update framework will initially establish responsive update for nodes, such as:

• Vue2 passed setter , getter
• Vue3 through proxy

This process there will be some CPU and memory overhead (although with proxy popularity, JS native support responsive update after this part of the cost will be more low).

React not this part of the overhead, by means based on virtual the DOM of time slice , React can further reduce ongoing interactive time .

Summarize

As you can see, different technologies have different advantages:

• fine-grained update has better performance for partial updates
• time slice based on virtual DOM to continuous interactive time better performance

When everyone is talking about performance, it is best to clarify which indicator is talking about, otherwise the difference may be very large.

Welcome to join the human high-quality front-end framework group , and grow with everyone