Browser workflow

  • Browser processes are responsible for user interaction, child process management, and file storage.
  • Web processes provide web downloads for renderers and browser inheritance.
  • The main responsibility of the rendering process is to parse HTML, JavaScript, CSS and images downloaded from the web into pages that can be displayed and interacted with. Because the content of the rendering process is obtained from the network, there may be some malicious code, using the system vulnerability to attack the system. Therefore, to keep the system safe, the rendering process runs inside a security sandbox.

A flowchart

  1. First, the browser process receives a request from the user to enter a URL, which the browser process forwards to the network process.
  2. The URL request is then made in the network process.
  3. The network process then receives the response header data, parses it and forwards it to the browser process.
  4. When the browser process receives the response header data from the network process, it sends a “submit document” message to the renderer process.
  5. After receiving the “submit document” message, the renderer process is ready to accept THE Html data by pipelining it directly to the network process.
  6. Once the document data has been transferred, the renderer process “confirms submission” to the browser process;
  7. When the browser process receives a “submit confirmation” message from the renderer, it starts removing the previous document and then updates the page state in the browser process.

User input

  1. After the user enters the URL and hits enter, the browser needs to check the input (whether it conforms to the URL rules) and assemble the complete URL. For example, if the user enters Baidu, the browser will automatically assemble the complete Baidu.com.
  2. The current page is executed until the user presses Enter and the browser loads a new pagebeforeUnloadEvents; This event allows the page to perform some data cleansing before exiting and ask the user again if they want to leave the current page. For example, there are unsubmitted forms in the current page.
  3. After the user confirms, the browser enters the loading state.

The url request

  1. The browser process sends the URL request to the network process via IPC.
  2. Query the resource cache within the validity period.
  3. Prepare IP addresses and ports. [Domain Name System (DNS) resolution — Resolve the IP address corresponding to the domain name in the URL.]
  4. Entering the TCP queue (http1.0/1.1 Limit on the number of TCP connections by a single domain name)
  5. Creating a TCP connection (three-way handshake)
  6. HTTPS establishes a TLS connection.
  7. Send an HTTP request (request line [protocol URL method] request header request body)
  8. Receive request (response line [Protocol status code Status message] Response header response body)

Prepare the render process

Decide whether to reuse renderers based on whether they are the same site (same protocol and root domain)

Submit the document

  1. When the browser process receives the response header data from the network process, it sends a “submit document” message to the renderer process.
  2. After receiving the “submit document” message, the renderer process is ready to accept THE Html data by pipelining it directly to the network process.
  3. Once the document data has been transferred, the renderer process “confirms submission” to the browser process;
  4. Upon receiving a “submit confirmation” message from the renderer, the browser process removes previous documents, updates the interface, address bar, navigation history, and so on.
  5. At this point, the small circle marking the browser loading status will change from the previous anticlockwise url network request to clockwise rotation.

Apply colours to a drawing

Why is CSS animation more efficient than JS animation

When writing Web applications, some operations of geometric changes of elements are often needed. If js is used to achieve animation effects, it will involve the whole rendering line, so JS is inefficient. Instead, the will-change attribute can be used to tell the rendering engine that it needs to change the element’s geometry, for example

.box {
will-change: transform, opacity;
}
Copy the code
  • The rendering engine creates a separate layer of the element, and when these transformations occur, the rendering engine processes the transformations directly through the composite thread, which does not involve the main thread, thus greatly improving the rendering efficiency. This is why CSS animations are more efficient than JavaScript animations. However, there are two sides to everything. Whenever the rendering engine prepares a separate layer for an element, it takes up a lot more memory, because starting with the layer tree and each subsequent layer requires extra memory, so you need to use will-change properly.
  • Tasks that can be done directly in the composition thread do not change the content of the layer, such as text changes, layout changes, and color changes, which would involve rearranging or redrawing. What can be achieved directly in the composition thread is the geometry of the entire layer, transparency, shadow, etc., these changes do not affect the content of the layer. For example, if you scroll the page without changing the content of the entire page, you are actually moving the layer up and down, which can be done directly in the composition thread.

Build a DOM tree

Style calculation

  1. Convert CSS to a structure that browsers can understand (see document.stylesheets)
  2. Transform property values in the stylesheet to standardize them
  3. Figure out the specific style of each node in the DOM tree (inheritance versus cascade)
  • CSS source: link introduction, tag inside, element style attribute

The layout phase

  1. DOM & CSSOM composite rendering tree;
  2. Create a layout tree (visible nodes in the DOM)
  3. Layout calculation (also calculates the geometric position of each element and stores this information in the layout tree)

layered

Create a tree of layers for a specific node (layered context, clip, layers like photoshop).In general, not every node in the layout tree contains a layer, and if a node has no corresponding layer, then the node is subordinate to the layer of the parent node. Conditions for creating layers for specific nodes alone:

  • Elements with cascading context attributes (explicit positioning, transparency, CSS filters, Z-Index, etc.) create separate layers;
  • Layers are created where individual clipping is required;

Layer to draw

The rendering engine breaks down the drawing of each layer in the layer tree into drawing instructions, generates a drawing list, and submits it to the compositing thread.

rasterize

  1. The composition thread will divide the layer into tiles, which are usually 256×256 or 512×512.
  2. Rasterization generates bitmaps from blocks near viewports.

Rasterization refers to the conversion of a map block to a bitmap, so a map block is the smallest unit of rasterization execution. The renderer maintains a rasterized thread pool, where all rasterization of blocks is performed, as shown

  • Generally, GPU is used to accelerate the generation of bitmaps during rasterization. The process of using GPU to generate bitmaps is called fast rasterization, or GPU rasterization. The generated bitmaps are stored in GPU memory.
  • The rendering process sends the instruction to GPU to generate the map block, and then executes the bitmap in GPU to generate the map block, and saves it in GPU memory.

Composition and display

  1. Once all the tiles have been rasterized, the composition thread generates a command to draw the tiles — “DrawQuad” — and submits the command to the browser process.
  2. The browser process has a component called viz that receives DrawQuad commands from the compositing thread, draws its page contents into memory, and displays them on the screen.

source

Time.geekbang.org/column/intr…