An unfinished summary of browser rendering

One, the introduction

What happens when you open a browser and type a url into the address bar, and then enter?

1. The keywords

• DNS resolution (none)
• 304 Cache (none)
• TCP three-wave four-handshake (none)
• HTTP packets (none)
• Redraw, reflux
• Synchronous programming (none)
• Event loop (None)
• Macro task, micro task (none)
• Process, thread
• Stack memory (none)
• Heap memory (none)
• Lazy loading of images (none)
• Compression (none)
• Performance optimization
• Browser storage (none)
• Caching mechanism (none)

2. Show

Yang Xiaoyang students web front-end high frequency interview questions constantly improve and update

• Some materials refer to online resources with links at the end of the article
• A series of problems caused by a browser rendering
• Incorrect corrections are welcome

Processes and threads

Process of 1.

An execution of a program that occupies a unique piece of memory. Is the basic unit of operating system execution.

• A process has at least one running thread: the main thread, which is created automatically after the process starts
• It is also possible to run multiple threads in a process at the same time, and we would say that a program is multithreaded
• Data within a process can be directly shared by multiple threads, but data between multiple processes cannot be directly shared

(1). Browser process

• Browser process: the main process of the Browser, responsible for the display of the Browser interface, and the management of each page, the ancestor of all other types of processes in the Browser, responsible for the creation and destruction of other processes it has only one!!!!!
• Renderer: a web page rendering process that is responsible for rendering a page. You can have multiple renderers. Of course, the number of renderers is not necessarily equal to the number of pages you open
• Various plug-in processes
• Browsers on mobile devices may be different: Android does not support plug-ins, so there is no plug-in process. The GPU evolved into a thread of the Browser process, and the Renderer evolved into a service process of the operating system, which remains independent

Thread 2.

An independent execution unit within a process and the smallest unit of CPU scheduling. The basic unit of program running thread pool (Thread pool): store multiple thread objects container, realize the reuse of thread objects

Since jS is single threaded, it involves event loops, event polling, and event loops.

HTTP request

1. The DNS

2.TCP three-way handshake four-way wave

3. HTTPS and HTTP

HTTP response

Five, browser rendering principle

1. Browser function

• network

  • Browsers use web modules to download various resources, such as HTML text; Javascript code. The style sheet; Image; Audio and video files, etc.
  • The network part is important by nature because it takes a long time and requires secure access to resources on the Internet.

• Resource management

  • Resources downloaded from the Internet or obtained locally need an efficient mechanism to manage them.
  • For example, how to avoid repeated downloads, how to cache resources and so on

• Browse the web

  • Resource visualization

• And so on…

2. Browser kernel

Refer to Baidu Encyclopedia

The most important and core part of the browser is the Rendering Engine, which is generally referred to as the “browser core”.

Different browser kernels interpret the syntax of the web page differently, so the same page may render differently in different browsers with different kernels, which is why web writers need to test the page display in different browsers.

3. Browser rendering mechanism

• Browsers use a streaming layout model (Flow Based Layout)
• The browser will putHTMLParsed intoDOM,CSSParsed intoCSSOM.DOMandCSSOMThe merge results in a render tree (Render Tree).
• There are theRenderTree, we know the style of all the nodes, calculate their size and position on the page, and finally draw the nodes on the page.
• Since browsers use streaming layouts, yesRender TreeIs usually done only once,buttableWith the exception of their internal elements, they may require multiple computations, usually taking three times as long as their equivalent elements. Why avoid themtableOne of the reasons for layout

4. Browser rendering engine

(1). Main modules

• HTML parser

  • A parser that interprets HTML documents
  • Function: Interprets HTML text into a DOM tree

• CSS parser

  • It is used to calculate style information for individual element objects in the DOM
  • Provide infrastructure for the layout

• JavaScript engine

  • Using Javascript code, you can modify the content of a web page, as well as the CSS information
  • The javascript engine is able to interpret javascript code and modify the web content and style information through DOM interfaces and CSS tree interfaces to change the rendered results

• Layout reflux

  • After the DOM is created, Webkit needs to combine its element objects with style information
  • Calculate their size, location and other layout information
  • Form an internal representation model that expresses all this information

• Drawing module

  • Use graphics library to draw the nodes of each web page into image results after layout calculation

(2). Rendering process

Rendering tree construction, layout, and rendering Chinese

1. When you encounter HTML tokens, call the HTML parser to parse them into tokens (a token is a serialization of tag text) and build a DOM tree (a memory that holds tokens and establishes relationships between them)
2. Encountering a style/link tag calls the parser to process the CSS tag and build a CSS style tree, known as CSSOM
3. When script tags are encountered, javascript parsers are called to handle script tags, bind events, modify DOM /CSS trees, etc
4. Merge the DOM and CSS trees into a render tree
5. Render from the render tree to calculate geometric information for each node (this process depends on the graphics library)
6. Draw the individual nodes to the screen.

5. Browser rendering is blocked

(1).css style rendering blocks

Only external CSS introduced by link can cause blocking

(2). JS blocked

Sixth, performance optimization

1. Reduce HTTP requests

2. Reduce DOM redrawing and backflow

(1). Redrawn

Redraw a node whose geometry or style changes without affecting the layout, such as outline, visibility, color, background-color, etc. Redraw is expensive because the browser must verify the visibility of other node elements in the DOM tree.

(2). Return

Backflow is when layout or geometry properties need to be changed. Backflow is a key factor affecting browser performance because it involves updating the layout of part of the page (or the entire page). The backflow of an element can result in subsequent backflow of all its child elements, as well as subsequent nodes in the DOM and ancestor node elements. Some bosses are also used to calling it a rearrangement

When does a browser backflow occur

• Add or remove visible DOM elements
• The position of the element changes
• The size of the element changes (including margins, inner borders, border size, height, width, etc.)
• Content changes, such as text changes or an image being replaced by another image of a different size.
• When the page is first rendered (which is inevitable)
• Browser window size changes (because backflow calculates element position and size based on viewport size)

(3). Browser optimization

Most modern browsers are batch update layout through the queue mechanism, the browser will put the modification operations in the queue, at least one browser refresh (16.6 ms) will empty the queue, but when you get the layout information, the queue may affect the properties or methods return value of the operation, if not, the browser will be forced to empty the queue, Trigger backflow and redraw to ensure the correct value is returned.

These include the following attributes or methods:

• offsetTop,offsetLeft,offsetWidth,offsetHeight
• scrollTop,scrollLeft,scrollWidth,scrollHeight
• clientTop,clientLeft,clientWidth,clientHeight
• width,height
• getComputedStyle()
• getBoundingClientRect()

(4). Summary

Redraw does occur, redraw does not necessarily cause redraw how to minimize redraw rearrangement?

1. CSS

   • usetransformalternativetop

   • Use visibility instead of display: None, because the former will only cause redraw and the latter will cause backflow (changing the layout)

   • Avoid using a table layout because a small change can cause the entire table to be rearranged.

   • If possible, change the class at the very end of the DOM tree. Backflow is inevitable, but its impact can be reduced. Changing the class as far down the DOM tree as possible limits the scope of backflow, affecting as few nodes as possible.

   • Avoid multiple inline styles and CSS selectors match from right to left to avoid too many nodes.

     <div>
       <a> <span></span> </a>
     </div>
     <style>
       span {
         color: red;
       }
       div > a > span {
         color: red;
       }
     </style>
     Copy the code

     For the first style, the browser just needs to find all the SPAN tags on the page and set the color, but for the second style, the browser needs to find all the SPAN tags, then find the A tag on the SPAN tag, and finally find the div tag. Then color span tags that match this condition, and the recursive process becomes complicated. So we should avoid writing too specific CSS selectors as much as possible, and add as few meaningless tags to THE HTML as possible to keep the hierarchy flat.

   • Apply the animation effect to elements with position set to Absolute or fixed to avoid affecting the layout of other elements. This is just a redraw, not a backflow. Also, control the animation speed by using requestAnimationFrame. See requestAnimationFrame for details.

   • Avoid using CSS expressions, which may cause backflow.

   • If a node that is frequently redrawn or reflow is set as a layer, the layer can prevent the rendering behavior of this node from affecting other nodes, such as will-change, video, iframe, etc., and the browser will automatically turn this node into a layer.

   • CSS3 hardware acceleration (GPU acceleration) : CSS3 hardware acceleration enables transform, opacity, and filters to be redrawn without causing backflow. Other properties of animations, such as background-color, will still cause backflow redraw, but it can still improve the performance of those animations.

2. JavaScript

   • Avoid frequent manipulation of styles, it is better to rewrite it oncestyleProperty, or define the style list asclassAnd change it onceclassProperties.
   • Avoid frequent operationsDOM, create adocumentFragmentApply all of them to itDOM manipulation, and finally add it to the document.
   • Avoid frequently reading properties that cause backflow/redraw, and if you do need to use them more than once, cache them in a variable.
   • Use absolute positioning on elements with complex animations to keep them out of the document stream, which would otherwise cause frequent backflow of parent elements and subsequent elements.

Seven, think

Question 1: Why three handshakes in the request phase and four waves when disconnecting?

Question 2: Are front-end frameworks so popular just because they are easy to use and efficient to develop? What was the era of jQuery like? Why it’s rarely used these days

Q3: what is the difference between HTTP and HTTPS? What is the underlying principle of HTTPS?

Eight, reference reading

• Do you really understand reflux and redraw
• Performance optimization related references