This is the 11th day of my participation in the August More Text Challenge. For details, see:August is more challenging

I believe that many beginners front-end friends and even some front-end industry experience years of programmers do not realize: the original CSS style writing order is also particular about.

When I first started learning about the front end, EVERY time I wrote a CSS style, I added what I used to add to the stylesheet, with no regard for how the order in which the style properties were written affected the loading code of the web page. Gradually it became clear that the correct style order was not only easy to look at, but also a way of optimizing CSS styles. So what order should CSS be written in? And look below:

  1. Position display float left top right bottom overflow clear z-index
  2. Property: width height padding border margin background
  3. < span style = “box-sizing: border-box; color: RGB (50, 50, 50)
  4. Text properties: text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
  5. Css3 New attribute: Content box-shadow border-radius transform……

Why in this order? You need to know about reflux and refactoring, which determine the optimal direction of CSS style writing order.

The process between document loading and full display:

Generate a DOM tree based on document loading (including display: None; Node); Generate a render tree (not including display: none: and head, but including visibility:hidden;) based on the DOM tree based on the geometric attributes of the node (padding, margin, width, etc.) ; Render the color, outline and other styles on top of the render tree. When part or all of the render tree changes and needs to be rebuilt due to issues such as size margins, the process is called reflux;

Repainting is a process that requires rerendering when some attribute of an element, such as the background color, changes without affecting the layout of the page.Copy the code

With an understanding of the document loading process, it’s easy to see that reducing browser backflow and improving DOM performance are the key to fast and smooth web page loading

During parsing, as soon as the browser realizes that the positioning of an element is affecting the layout, it needs to go back and rerender, so the positioning element and z-index should be placed at the very beginning, which tells the browser how to load it.Copy the code