Shulou(Shulou.com)06/01 Report--

This article shows you an example analysis of how browsers do not optimize the performance of DOM operations. the content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

There is a question from Zhihu:

Now that the front end is so prosperous, why are people huddling together on JS, doing TypeScript,Deno and so on? DOM operation is not the most expensive, why do people not focus on optimizing browser interaction but on the innovation of JS technology?

Browsers have been optimizing the performance of DOM.

The goal of the framework is to improve development efficiency, not operational efficiency. And the performance of DOM (or extends to browser performance) is really not community-driven, although the mainstream browsers are open source, but the developers of these browsers are almost all commercial companies.

Developers pay less attention to browser layout and rendering than JS. After all, people pay more attention to JavaScript, but less about the performance of CSS (3).

For example, many developers have heard of the new JS compiler Turbofan of V8 and the new interpreter Ignition, and even the release of QuickJS,Hermes has aroused strong concern among developers. But few developers pay attention to DOM operations or CSS engines.

In fact, browsers have been working hard. If you don't believe it, you can download a 2-year-old Chrome to visit the current page.

The HTML specification in 2005 is about 100 pages.

The HTML specification in 2020 is about 800 pages.

DOM redrawing

Post a motion picture to see Chrome's improvements to 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 cache of the previous frame. On dynamic pages with frequent DOM changes, it can cause serious performance problems.

How did Chrome improve? Chrome generates drawing commands for each element, which are tracked and analyzed to identify visually non-overlapping subsets. If you do not modify one of the subsets, you can copy the entire block directly from the cache without doing any other work. This significantly improves the redrawing performance after DOM changes.

The above is an example of how browsers do not optimize the performance of DOM operations. have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.