Q&A: Why doesn't the browser optimize the performance of DOM operations

Someone asked on Zhihu:

Now that the front-end is so prosperous, why do people get together to make a fuss on JS, what TypeScript, Deno? Isn't DOM manipulation the most expensive? Why don't people focus on optimizing browser interaction but the innovation of JS technology?

The browser has been optimizing the performance of the DOM.

The goal of the framework is to improve development efficiency, not operational efficiency. Moreover, the performance of the DOM (or the performance of the browser extended) is indeed not driven by the community. Although the major mainstream browsers are open source, the developers of these browsers are almost all commercial companies.

Compared with JS, developers pay less attention to browser layout and rendering. After all, everyone pays more attention to JavaScript, but less attention to the performance of CSS(3).

For example, V8's new JS compiler Turbofan and the new interpreter Ignition have been heard by many developers, and even the release of QuickJS and Hermes has attracted strong attention from developers. However, few developers pay attention to DOM manipulation or CSS engine.

In fact, the browser has been working hard. If you don’t believe me, you can download a Chrome version 2 years ago to visit the current page.

The 2005 HTML specification is about 100 pages.

The 2020 HTML specification is about 800 pages.

DOM repaint

Post an animated picture to see how Chrome improves DOM redrawing.

When Chrome is ready to draw pixels on the screen, it must first determine which elements on the page need to be redrawn and which can be copied from the previous frame's cache. On dynamic pages with frequent DOM changes, it can cause serious performance problems.

How has Chrome improved? Chrome generates drawing commands for each element, and tracks and analyzes these drawing commands to identify visually non-overlapping subsets. If one of the subsets is not modified, the entire block can be copied directly from the cache without any additional work. This significantly improves the redraw performance after DOM changes.

LayoutNG

We all know that after V8 releases the new Turbofan compiler, many js statements that could not be optimized can also be optimized. More importantly, after the release of es6, it may be considered a very significant change in js. Instead of patching the original engine, It is better to replace it directly.

Similarly, CSS changes rapidly with the development of the web, so Chrome has also developed a new layout engine, LayoutNG.

It is recommended to take a look at the LayoutNG design document (English).

The Composite algorithm is also updated to increment CompositeAfterPaint and BlinkGenPropertyTrees.

Conclusion

In fact, browsers have been optimizing the performance of DOM operations. There are many links to the original text, but the official account cannot link to external articles, so you can click on the read original text in the lower left corner to read.