Influence of browser re-painting and re-arrangement

After the browser downloads all the components on the page, it parses and generates two internal data structures:

1. DOM tree: indicates the Page Structure

2. shows how DOM nodes are displayed.

After Dom and the rendering tree are built, the browser starts to display (draw) page elements. When Dom changes affect the geometric attributes of elements (such as changing the border or height) the browser needs to re-calculate the geometric attributes of the element. Similarly, the geometric attributes and locations of other elements will also be affected. the browser will invalidate the affected part and reconstruct the rendering tree, this process is called "shuffling ". After the reconfiguration, the browser will re-draw the affected part to the screen. This process is called "re-painting ".

Not all Dom changes affect the geometric attributes of an element. If the background color of an evolved element does not affect its width and height, only one re-painting will occur, instead of shuffling, because the layout of elements has not changed,

Re-painting and shuffling affect the speed. Generally, the delay is long. Such operations should be minimized.

The following situations usually occur when reshuffling occurs:

 

1. add or delete visible DOM elements;

2. Change the element position;

3. element size changes (including margin, padding, border, and height)

4. content change (for example, text change or image replacement by another image of different sizes)

5. Page Renderer initialization;

6. Change the size of the browser window;

Based on the range and degree of change, the corresponding part of the rendering tree, which is large or small, also needs to be recalculated. Some changes will trigger the re-arrangement of the entire page: for example, when the scroll bar appears

Computing consumption is produced for each shuffling. Most browsers optimize the shuffling process through queue-based modification and batch execution. However, you may force the refresh queue and require the task to be executed immediately, retrieving layout information will refresh the queue.

A good speed-up policy for improving program response is to reduce the occurrence of repainting and rearranging operations. To reduce the number of operations, we should merge multiple modifications to the Dom and style and then process them once. Operate Dom offline, use cache, and reduce the number of accesses to local information

Influence of browser re-painting and re-arrangement