People really can not idle down, a idle down the body is easy to empty. Last week, I had a cold, fever and diarrhea. This week, it was my turn to catch a cold and have a fever. It seemed to be infected by my old mother. A: hi!

Anyway, there used to be a very popular interview question on the Internet called: Enter a URL in the address bar, come to this page, what happens in between? I also read the answers on the Internet at that time and learned a lot — key render paths. Thanks to this knowledge point, let me later do front-end page performance when no longer like a headless fly without a start.

To answer this question, I should answer from the two parts of data request and data processing.

Data request

The data request part, to be honest, I’ve never been good at it myself. It’s a little bit clearer to borrow a picture from the Internet.

The data processing

Data processing is also client-side rendering, the key rendering path. This part can be divided into the following five steps:

  1. Process HTML tags and build DOM trees
  2. Process CSS tags and build CSSOM trees
  3. Merge DOM and CSSOM into a render tree
  4. According to the generated rendering tree, carry out the Layout and get the geometric information of nodes (location, size).
  5. The absolute pixels of nodes are obtained according to the geometry information obtained by rendering tree and backflow

That’s the picture down here

So what’s the Script part of the picture?

In fact, during rendering, if

Of course, JS files don’t just block DOM builds; they can cause CSSOM to block DOM builds as well.

The DOM and CSSOM builds have always been independent of each other, but once JS is introduced, CSSOM starts blocking DOM construction, and only after CSSOM builds, DOM resumes DOM construction. This is because JS can not only modify the DOM, it can also modify styles, which means it can change CSSOM. Since an incomplete CSSOM cannot be used, if a JS wants to access the CSSOM and change it, it must get the complete CSSOM when executing the JS. This leads to the phenomenon that if the browser is not finished downloading and building CSSOM and we want to run the script, sorry ~ the browser will delay the script execution and DOM building until the CSSOM is finished downloading and building. That is, in this case, the browser downloads and builds CSSOM first, then executes JS, and finally continues to build the DOM.

What about the reflow layout in the picture?

Usually, after the first page loads, you put things on the page, a process called layout. This process is called reflow if some visual changes occur later on the page, causing the layout to change again.

So what kind of operation would cause backflow to occur? The layout phase mainly calculates the location and geometry of the nodes, so backflow occurs only when the layout and geometry of the page change.

For example, backflow occurs in the following situations:

  • Add/remove elements
  • display:none
  • Moving elements
  • Operating styles
  • offsetLeft, scrollTop, clientWidth
  • Modify the browser size, font size
So when does redrawing happen without backflow?

When a change in the style of an element on a page does not affect its position in the document flow (color, background-color, visibility, etc.), the browser assigns the new style to the element and redraws it, redrawing it without redrawing.

PS: Backflow will definitely trigger redraw, and redraw will not necessarily backflow

Reference article: Do you really know anything about reflow and redraw