Continue with the whole process of typing a URL into the Browser address Bar

preface

Why do you need to know how browsers render? What are the benefits of knowing how browsers render? Why do we need to know how browsers work when we’re doing front-end development? Direct to the web page to make, what needs, directly a shuttle, finish the work is not good.

But often people ask, what is rearrangement and redraw?

Also known as Reflow, or Repaint, it can affect browser performance, giving users the impression that the page is slow, or that the page will be slow and not smooth, resulting in fewer page views.

So, if you want to avoid rearranging and redrawing as much as possible, you need to understand how browsers render.

Browser Workflow

As you can see above, the browser parses three modules:

  • HTML.SVG.XHTML, analytical generationDOMThe tree.
  • CSSParsing generatedCSSThe rule tree.
  • JavaScriptUsed to operateDOM APIandCSSOM APITo generate theDOM TreeandCSSOM API.

After parsing, the browser constructs a Rendering Tree from the already parsed DOM Tree and CSS rule Tree.

  • The Rendering Tree is not the same as the DOM Tree, because something like Header or display: None is not necessarily in the Rendering Tree.

  • CSS Rule Tree is mainly for matching and attaching Rendering to CSS rules.

  • Each Element in the Tree. That’s the DOM node, that’s the Frame node. Then, the position of each Frame (that is, each Element) is calculated. This is called the Layout and reflow procedure.

  • Finally, draw by calling the API of the operating system Native GUI.

Browser rendering for different kernels

webkit
HTML
DOM Tree
CSS
Render Tree

Mozilla
Gecko


Frame
webkit
Layout
Gecko
Reflow

Rendering order

  • When the browser gets a web page, it first parses itHTMLIf encountered outside the chaincss, will be downloadedcssWhile analyzingHTML.
  • whencssOnce the download is complete, parsing continuescssTo generate thecss Rules tree, will not affectHTMLThe parsing.
  • When faced with<script>When the label is found, there is a rightjavascript, the script is downloaded immediately, and document parsing is blocked. After the script is executed, the document is parsed.

  • whenDOMTrees andCSSAfter the rule tree has been generated, constructRendering Tree.
  • Call the system to render the page.

What causes rearrangements and redraws.

The rearrangement means that the geometry of the element has changed and we need to revalidate and calculate the Render Tree. A part or all of the Render Tree has changed. This is the Reflow, or Layout.

Rearrange because to recalculate the Render Tree, and every DOM Tree has a reflow method, once a node rearrange, may cause the child element and the parent element or even other elements of the same level of the reflow, waste a lot of time to re-validate the Render Tree.

Therefore, the cost of rearrangement is much higher than that of drawing.

The following operations will result in a rearrangement or redraw.

  • Delete, add, or modifyDOMElement node.
  • mobileDOMWhen the animation is started.
  • Modify theCSSStyles, changes the size, position, or will be useddisplay:noneWill causerearrangement; Modify theCSSColor orvisibility:hiddenWait, it’s gonna causeredraw.
  • When changing the default font of a web page.
  • When resizing a window (not a problem on mobile), or when scrolling.
  • Changes in content (as well as when the user writes to the input box).
  • Activate pseudo classes such as hover.
  • To calculateoffsetWidthandoffsetHeight.

If the current page contains some animation, or fixed elements of the page, due to the scrolling will also occur rearrangement, once the scrolling, the current browser under great pressure, will cause the page card, frame drop and so on.


var bstyle = document.body.style; // cache
 
bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; // Reflow and repaint again
 
bstyle.color = "blue"; // repaint
bstyle.backgroundColor = "#fad"; // repaint
 
bstyle.fontSize = "2em"; // reflow, repaint
 
// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode('dude! '));

Copy the code

Almost every step of the above logic will result in a rearrangement or redraw, and if the browser handles it like this, modern browsers may not be as smooth as the ones we use. So browsers have a mechanism that accumulates what needs to be rearranged or redrawn, and then rearranges and redraws all at once.

Of course, not all cases are handled in this way, such as resize or changing the default font, for which the browser immediately rearranges.

So when we listen for a resize event, we usually do shockproof and throttling.

How to reduce rearrangements and redraws

  • Try to avoidstyleThe use of, for the required operationDOMElement node, renamedclassNameTo change theclassNameThe name.
  • If I add an element orcloneElement, we can pass the element firstdocumentFragmentPut it in memory, and when it’s done, thenappendChildtoDOMElement.
  • Do not get the same element too often. You can save the element as a variable after the first time to reduce traversal time.
  • Use as little as possibledispaly:none, can be usedvisibility:hiddenInstead,dispaly:noneCan causerearrangement.visibility:hiddenCan causeredraw.
  • Don’t useTableLayout, because of a small operation, may cause the entire tablerearrangementorredraw.
  • useresizeEvent, doImage stabilizationandThe throttleTo deal with.
  • For animated elementsabsolute / fixedProperties.
  • When modifying elements in batches, you can first remove the elements from the document flow, and then put them into the document flow after the modification is complete.

The last

Reference article:

How browsers work.

A brief introduction to browser rendering principles.

Rearrangement and redrawing of front-end performance optimization.