Here is the rewritten article:
The Smaller the DOM, the Better: Changing the Contents of a DIV is Faster than Deleting a DIV and Creating a New One
The browser is slow in rendering a large DOM tree. The browser won’t render 1,000,000 lines of 20 px height at all – the maximum height of a DIV in Chrome is 15,000,000 px. The fewer HTML elements, the better.
Fast Data Grid adds as many rows to the DOM as will fit on the screen.
Maximum DIV height is 15,000,000 px
To make the scroll work, Fast Data Grid makes a big DIV. The scroll event is attached to this DIV. The scroll event handler calculates the position of the row DIVs.
Using the Coefficient when Scrolling
When scrolling, the position of the DIV rows is calculated using JavaScript.
const scrollYKoef = (allRowsHeight - viewPortHeight) / (scrolHeight - viewPortHeight);
Listing 2. Using the coefficient when scrolling
CSS transform translate is faster than CSS top
When scrolling, the position is set via transform translate. CSS transform translate is faster than CSS top.
style="transform: translateY(-16px);">
style="top: -16px;">
Listing 3. CSS transform translate is faster than CSS top
Read DOM first, then modify DOM. It’s bad to read DOM after modification
The browser displays frames on the monitor like this:
Figure 3. Standard order of operations when outputting a frame to the monitor
If the standard order is not violated, the browser will render the frame as quickly as possible.
Self-Promotion
I make the most convenient flowchart editor DGRM.net. It is also the most convenient service for business: Excel + business process diagrams.
Give stars on GitHub.
FAQs
Q: What is the maximum height of a DIV in Chrome?
A: The maximum height of a DIV in Chrome is 15,000,000 px.
Q: How does the browser render a large DOM tree?
A: The browser is slow in rendering a large DOM tree. The browser won’t render 1,000,000 lines of 20 px height at all.
Q: What is layout thrashing?
A: Layout thrashing is excessive recalculation of layout.
Q: How can I avoid layout thrashing?
A: You can avoid layout thrashing by not modifying the DOM before reading it.
