I've read a lot of questions about reflow recently, but I didn't notice this phenomenon before. Recently, I started to study it slowly. After all, I didn't pay attention to many performance details in the past. Regarding reflow, it should simply be said that it is the rendering of DOM (calculating the size, layout, etc. of each object in the document tree through CSS or other factors). The explanation may be one-sided, but first define a simple concept to facilitate understanding.
First, I saw the writing order of CSS attributes recommended in Mozilla. The article was based on the information. This writing order is not only because of the project's development code specification standards, but also because a reasonable writing order is more in line with the browser's rendering order.
mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//display properties
*display
*list-style
*position
* float
*clear
//Self attributes
*width
*height
* margin
*padding
* border
* background
//Text attributes
* color
*font
* text-decoration
* text-align
*vertical-align
*white-space
* other text
* content
This "Visual Reflow" really vividly points out the rendering process of the browser. From it, you can see that the browser does not place all the DOM correctly in one step during the loading process, but After constant calculation, the rendering results are frequently changed, which includes the impact of js, css, etc. on dom performance.