Home > Developer > Web Develop
As is known to all, page loading rendering is divided into several stages:
-Build DOM tree (DOM trees)
Parse HTML from top to bottom build dom tree, also called content tree
-Build a CSS tree (CSSOM)
Attach CSS styles to the DOM tree to generate Cssom tree (CSS Object model tree)
-Execute JS
Execute JS code (synchronous)
-Build a render tree (Rebder trees)
The rendering tree represents a stable visual representation with a series of rectangles, with attributes such as size, color, font, etc.
This small rectangle, Firefox called frame, WebKit called Render object
-Layouts (layout)
Calculate the position of the rendered object and lay it on the page
-Draw (paint)
Add a style to a node, such as a color, border
When we change the node style, if it causes a change in position, it will trigger reflux (reflow), cause color, font and other changes, will trigger redraw (repaint), the common situation is as follows:
Reflux:
Dom operations, such as adding, deleting, moving
Window changes
adding pseudo-classes
Change the content (for example, the input box changes text)
accessing and modifying CSS properties (note that accessing CSS properties can also cause reflux!) ）
Redraw
change element style, color, background color, etc.
Next look at an example:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">. Slide-left{-webkit-transition:margin-left 1s ease-out;-moz-transition:margin-left 1s ease-out;-o-transition:margin-left 1s ease-out;transition:margin-left 1s ease-out; } </style> </Head> <Body> <Divclass= "a">111</Div> </Body> <Scriptsrc= "Js/jquery.min.js"></Script> <Script> vara= $('. A'); A.css ({"Margin-left": "100px"}); First time A.addclass ('Slide-left'); $('. Slide-left'). css ({"Margin-left": "10px"}); Second time</Script></HTML>
According to the reflux trigger condition, this will trigger two reflux, it is expected to see a margin-left will 0-->100-->10 the change process, but we only see 0-->10 change, why?
Because the browser in order to reduce the number of reflow, will be set up in the internal cache queue, will need to reflow, repaint operations into the queue and overwrite the previous operation, when a certain time interval will reach a certain size and then operate, clever blowser~~
However, many times we will inadvertently trigger a forced redraw,
For example, make the following modifications to the above code:
var a = $ ('. a '); A.css ({"margin-left": "100px"}); A.css ({"Margin-left"}); A.addclass ( ' Slide-left '); $ ('. Slide-left '). CSS ({"Margin-left": "10px"});We will see that the margin-left of a will 0-->100-->10 the process of change, because when we request style information to the browser, the browser will force redrawing immediately to get the most accurate position in the current location!
Optimization Recommendations:
1.html document hierarchy as few as possible, no higher than six layers
2.js do not put in the head, as far as possible behind, because its loading and execution is synchronous, will block after the operation
3. Reduce, avoid forced repainting
4. Use Add class instead of multiple JS to manipulate DOM directly, reduce reflow, repaint times
5. Animate elements set to absolute or fixed to avoid large-scale reflow when alignment changes
6. Hide outside the screen or when the screen scrolls to stop the animation, reduce reflow
7. Reduce the number of reflow, you can use the virtual DOM, or pre-set the element as Display:none, the operation is completed before rendering
Word is to reduce the number and scale of repainting and rearrangement.
Optimization suggestions made by Web page rendering
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
