css writing order and principle

Writing order

(1) positioning properties: the display position   a float   left bottom right overflow Clear Top Z- index 

( 2 ) itself properties: width margin background border height padding 

( . 3) text style: font-family font-size font -style font-weight font- Color varient    

( . 4) text attributes: text-align = left Vertical text-align = left-Transform-wrap text text-indent text-Decoration-Letter-spacing Word spacing White Space-tEXT- overflow 

( . 5) in the new css3 properties: content box- border- Shadow the RADIUS the Transform 
...... ---------------- 
Disclaimer: This article is the original article CSDN bloggers "QPQ_", and follow CC 4.0 BY- SA copyright agreement, reproduced, please attach the original source link and this statement. 
Original link: HTTPS: //blog.csdn.net/qq_36060786/article/details/79311244

purpose:

Reduce browser reflow (reflow) to enhance the performance of the browser rendering dom

principle:

Browser rendering process

① html parsing tree constructed dom, css parse tree constructed css: the html parsed into a tree data structure, the data structure will be parsed into css tree

② build render tree: render tree formed DOM tree and CSS tree after the merger.

③ layout render tree: With the render tree, the browser has to know which nodes have those pages, css and the definition of each node and their affiliation to calculate the position of each node in the screen.

④ Draw render tree: calculated in accordance with the rules of the contents drawn by the graphics on the screen.

css style analysis occurs to the display screen on the browser ②③④ step, the browser is not a visible css style acquired immediately began to resolve but by the order of writing the pattern of css dom distribution of tree structure according to render the style, complete step ②, and then traversing css style for each parse tree node, the traversal order in this case is completely css style in accordance with the order written before. In the parsing process, once the browser sees a change in the positioning of elements affect the layout, you need to go back and re-rendered as written in the book preface this by:

width: 100px;

height: 100px;

background-color: red ;

position: absolute;

When the browser parses the position when suddenly discovered that the element is absolutely positioned elements required from the document flow, and before it is parsed in accordance with common elements, so had to re-render the lifting element occupies the position in the document, but because occupying this element changes, other elements may also be affected by its returning and re-qualifying. ③ steps eventually lead time it takes too long to affect the display ④ step, affecting the user experience.

So specification of css written order for the document to render it must do more with less!

 

 

Expansion: there is a will affect the performance of the browser rendering words "repaint (redraw)"

repaint (redraw): change the background color of an element, text color, border color, and so when it does not affect the layout of the property around or inside, part of the screen to be redrawn, but the geometry of the elements has not changed.

 

note:

A.render tree structure is not equivalent to the DOM tree structure, some settings display: none render node is not in the tree, but the tree dom.

b. In some cases, such as modifying the style elements, the browser does not reflow science or repaint, but to accumulate a number of these operations, then do a reflow, which is also called asynchronous reflow. However, in some cases, such as changing window, change the default font page, etc. for these cases, the browser will immediately be reflow.

c. For a better user experience, the rendering engine will be as early as possible to present the content on the screen, and not wait to go to the construction and layout of the render tree after all html are parsed. It is part of the complete analytical content on the display part of the content, while the rest may also download content over a network.

----------------
Disclaimer: This article is the original article CSDN bloggers "QPQ_", and follow CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement. .
Original link: https: //blog.csdn.net/qq_36060786/article/details/79311244