This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.

In the HTML parsing process, we will get DOM tree and CSS tree, by the DOM tree and CSS tree synthesis rendering tree, and then layout, drawing, and finally through synthesis, can display the code into a page.

Document Object Model (DOM)

A piece of HTML code:

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Test</title>
  </head>
  <body>
    <p>Hello <span>World</span></p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>
Copy the code

From this code you can generate a DOM tree. As shown in the figure:

CSS Object Model (CSSOM)

A piece of CSS code:

body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
Copy the code

From this code you can generate CSSOM. As shown in the figure:

Render tree

The render tree can be generated from the DOM and CSSOM above:

Redraw and reflow

Redraw repaint

Once the box position, size, and other properties, such as color and font size, have been determined, the browser draws the primary colors according to their characteristics and renders the content on the page.

Redraw is the behavior of the browser triggered by a change in the appearance of an element. The browser redraws the element based on its new attributes to give it a new appearance.

Property that triggers a redraw

color background Outside the border,
color background outline-color
border-style background-image outline
border-radius background-position outline-style
visibility background-repeat outline-width
text-decoration background-size box-shadow

Rearrangement reflow

Reflow occurs when part (or all) of a rendering tree needs to be rebuilt due to changes in the size, layout, hiding, etc. Each page needs to be refluxed at least once, the first time the page loads.

Properties that trigger the rearrangement

Box model related properties Locate properties and floats Change the text structure inside the node
width top text-align
height bottom overflow-y
padding left font-weight
margin right overflow
display position font-family
border-width float line-height
border clear vertival-align
min-height white-space
  1. Redraw does not necessarily require rearrangement. For example, changing the color of a web element will only trigger redraw, not rearrangement, because the layout has not changed.
  2. However, reordering inevitably leads to redrawing. Changing the position of a web element, for example, triggers both reordering and redrawing because the layout has changed.

Common actions that trigger rearrangements

  1. When you add, delete, or modify DOM nodes, it causes Reflow, Repaint.
  2. When you move the DOM around
  3. When you modify the CSS style.
  4. When you Resize the window (mobile doesn’t have this problem because mobile scaling doesn’t affect the layout viewport)
  5. When you change the default font of a web page.
  6. Get certain attributes (width, height…)

Note: Display: None will trigger reflow, while visibility: Hidden will only trigger repaint because no position change has occurred.

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.