This is the 6th day of my participation in the August More Text Challenge

thinking

  1. Browser rendering is divided into many sub-tasks, each sub-task has input process, processing process, output process.
  2. The first step is dom tree construction. HTML tags are constructed into a DOM tree structure
  3. Browser style calculation 1. First, the browser can not recognize CSS text, so CSS text processing styleSheets data structure hanging under the document 2. Then standardize the attributes and convert them to a style that the browser can recognize for rendering. 3. I’m going to calculate the style of each DOM node in terms of CSS inheritance and cascading rules and CSS inheritance is that every node in the DOM tree contains the style of the parent node
  4. In the layout stage, the geometric positions of dom visible elements are calculated to generate a layout tree. The following three things are mainly done to build a layout tree: 1. Display :none Traverses all visible DOM nodes in the DOM tree. Non-visible ones are not added to the layout tree

Interview question: Does CSS file download failure block DOM tree building? Will it prevent the page from displaying?

A: The reason why it doesn’t block the DOM tree is because when you convert HTML to A DOM tree you find that the file request goes directly to the web process to get the CSS file and it doesn’t affect the rendering process itself but the display of the page blocks and when you compute the CSS style you need to stack the CSS file, the resource blocks and you wait, Until the network timeout renderer continues the style calculation

5. Layering phase: The rendering engine generates characteristic layers for a particular node. Not every node has a layer

Nodes in those cases can have separate layers:

  • Properties that have a cascading context are promoted to a separate layer. Those properties can be found here at developer.mozilla.org/zh-CN/docs/… Z-index position:absolute opacity < 1 transform filter Perspective, etc
  • Layers are created where cuts are needed: div text overflows and the scroll bar is promoted to a separate layer
  1. Layer rendering phase Each layer has corresponding render instructions
  2. Rasterization: After the previous series of changes, the rendering process hands off the main thread to the compositing thread, also known as the COMMIT phase. Usually the page is very long but the visualization area is only one part, so the layer is divided into graphs and the blocks are generated into bitmaps based on the viewport position. (There is a rasterized thread pool.) Rasterization calls GPU acceleration
  3. Composition and Display Once all layers have been bitmapped the composition thread issues a drawquad command to the browser process for display

Interview question: How does rearrangement redraw composition reduce performance

Rearrangement is changing the geometry of an element and changing the location of an element will definitely trigger a whole rendering process again and that’s a huge overhead for the browser

2. Redrawing is to change the drawing attributes of elements, such as changing the color of elements, thus eliminating the need for layout and layering. Therefore, redrawing is relatively efficient compared with rearrangement. Direct synthesis stage: CSS3’s transform attribute involves scaling, rotation and movement, without causing changes in surrounding elements. Direct rasterization generates new bitmaps for animation, which directly eliminates rearrangement and redrawing and reduces the pressure of the main thread, greatly improving performance. Reduce the number of rearrangements and redraws

  • Reduce dom manipulation when it comes to inserting too many nodes
  • Can use the document. CreateDocumentFragment because document fragments exist in memory will not cause rearrangement is inserted into the document fragments
  • Avoid table layouts: If one element in a table changes, the entire table will be rearranged and redrawn
  • Will-change: transform to optimize calls for GPU acceleration