Example Analysis of browser rendering process in css

This article will explain in detail the example analysis of the browser rendering process in css. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Description

1. Build HTML tree (DOM) according to HTML.

2. Construct CSS tree (CSSOM) according to CS.

3. Merge the two trees into a render tree (render tree).

4. Layout layout.

(document flow, box model, calculation size and location)

5. Paint drawing.

(draw the border color, text color, shadow, etc.)

6. Compose synthesis.

(display the picture according to the cascading relationship)

If it is a block-level element, the width and height will be set without any problem. However, if it is a picture, the height (inline elements) is not known at this time, and the height can only be determined after the fifth step is drawn. However, the drawing of the picture takes time, and when the drawing is not finished, there will be problems with the height obtained. A reasonable solution is to use setTimeout latency to get the height of the div.

Var odiv = document.getElementById ('bgImg'); odiv [XSS _ clean] ='

'setTimeout (()) = > {var oHeight = odiv.scrollHeight; console.log (oHeight);}, 100) this is the end of the article on "sample Analysis of browser rendering in css". I hope the above content can be helpful to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.