Influence of browser re-painting and re-arrangement

Source: Internet
Author: User


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.