1. Parallel processing

Handling multiple tasks at the same time improves performance

2. Threads vs. processes

Multithreading can process tasks in parallel, but threads cannot exist alone. They are started and managed by processes.

A process is a running instance of a program. When a program is started, the operating system creates a block of memory for the program to hold the code, the running data, and a main thread to perform the task. We call such a running environment a process.

Thread is attached to process, and using multi-thread parallel processing in process can improve computing efficiency.

  • 1. If any thread fails, the entire process crashes.
  • 2. Data in the process is shared between threads.
  • 3. After a process is shut down, the operating system reclaims the memory occupied by the process.
  • 4. The contents of processes are isolated from each other.
    • Data communication mechanism: The mechanism used for interprocess communication (IPC) is used

3. Single-process browser era

There is a problem

  • 1. The instability
  • 2. Not smooth
  • 3. Not safe

The age of multi-process browsers

The latest Chrome includes one main Browser process, one GPU process, one NetWork process, multiple rendering processes, and multiple plug-in processes.

  • Browser process. It is mainly responsible for interface display, user interaction, sub-process management, and storage.
  • Rendering process. The core task is to turn HTML, CSS, and JavaScript into web pages that users can interact with. Both the typography engine Blink and JavaScript engine V8 run in this process. By default, Chrome creates a rendering process for each Tab Tab. For security reasons, renderers are run in sandbox mode.
  • GPU process. In fact, Chrome didn’t have a GPU process when it was first released. The original intention of using GPU was to achieve 3D CSS effect, but later the UI interface of web page and Chrome were drawn on GPU, which made GPU become a common requirement of browser. Finally, Chrome has introduced GPU processes on top of its multi-process architecture.
  • Network process. It is responsible for loading web resources on the page. It used to run as a module in the browser process until recently, when it became a separate process.
  • Plug-in process. It is mainly responsible for the running of plug-ins. Plug-ins are prone to crash. Therefore, plug-ins need to be isolated through the plug-in process to ensure that the plug-in process crash does not affect the browser and page.

While the multi-process model improves browser stability, smoothness, and security, it also inevitably introduces some problems:

  • Higher resource usage. Because each process contains a copy of the common infrastructure (such as the JavaScript runtime environment), this means that the browser consumes more memory resources.
  • More complex architectures. Problems such as high coupling between browser modules and poor scalability lead to the current architecture has been difficult to adapt to new requirements.

5. The Future of Service-oriented Architecture (SOA)

The overall Chrome architecture will move toward the “service-oriented architecture” of modern operating systems, in which the various modules will be reorganized into separate services, each of which can run in a separate process and must be accessed using defined interfaces. Communicate via IPC to build a more cohesive, loosely-coupled system that is easy to maintain and expand, better realizing Chrome’s goals of simplicity, stability, speed, and security.

Chrome eventually reconstructs the UI, database, files, devices, network and other modules into basic services, similar to operating system low-level services

6. TCP protocol: how to ensure that the page file can be delivered to the browser completely?

First Paint (FP) : the time between the page loading and the First drawing. Affecting FP indicators: One of the most important factors is network loading speed.

On the network, a file is usually divided into many packets for transmission, and the packets are likely to be lost or make errors during transmission.

The “journey” of a packet

The Internet is really an architecture of ideas and protocols.

  • 1. IP: sends the data packet to the destination host

    • For packets to travel over the Internet, they must comply with the Internet Protocol (IP) standard. Different online devices on the Internet have unique addresses, which are just a number

    • A computer’s address is called an IP address, and visiting any website is really just your computer asking another computer for information.

    • If you want to send A packet from host A to host B, the packet is appended with host B’s IP address information before transmission so that it can be addressed correctly during transmission. In addition, host A’s OWN IP address is attached to the packet. With this information, host B can reply to host A. This additional information is loaded into a data structure called an IP header. The IP header is the information at the beginning of an IP packet, including the IP version, source IP address, destination IP address, and lifetime.

    • To facilitate understanding, the network is divided into three layers, as shown in the following figure:

      A simplified three-layer transport model for IP networks

      • The upper layer will contain “Baidu” packet to the network layer;
      • The network layer attaches the IP header to the packet to form a new IP packet, which is handed to the bottom layer.
      • The bottom layer transmits data packets to host B through the physical network.
      • The data packet is transmitted to the network layer of host B, where host B unwraps the IP header of the data packet and delivers the disassembled data to the upper layer.
      • Finally, the packet containing “Baidu” information reaches the upper layer of host B.
  • 2. UDP: Sends data packets to the application

IP is a very low-level protocol that only delivers packets to the other computer, but the other computer does not know which program to pass the packets to. Therefore, protocols that can communicate with applications need to be developed based on IP. The most common one is User Datagram Protocol (UDP).

One of the most important pieces of information in UDP is the port number, which is a number bound to every application that wants to access the network. UDP sends the specified packet to the specified program by port number, so IP sends the packet to the specified computer by IP address information, and UDP sends the packet to the correct program by port number. Like the IP header, the port number is loaded into the UDP header, which is then combined with the original UDP packet to form a new UDP packet. The UDP header contains information such as the destination port and the source port number.

In order to support UDP protocol, I extended the previous three-layer structure to four-layer structure, and added a transport layer between the network layer and the upper layer, as shown in the figure below:

Simplified UDP network four – layer transport model

  • The upper layer will contain “Baidu” packet to the transmission layer;
  • The transport layer appends the packetsUDPHeader to form a new UDP packet and then deliver the new UDP packet to the network layer.
  • The network layer attaches the IP header to the packet to form a new IP packet, which is handed to the bottom layer.
  • The packet is transmitted to the network layer of host B, where host B unwraps the IP header and passes the unwrapped part of the data to the transport layer.
  • At the transport layer, UDP headers in packets are unpacked,And according to the port number provided in UDP, the data part is handed over to the upper application program;
  • Eventually, packets containing “Baidu” information travel to host B’s upper application here.

When UDP is used to send data, various factors may cause packet errors. Although UDP can verify whether the data is correct, UDP does not provide a retransmission mechanism for incorrect packets, but only discards the current packet. After UDP is sent, it cannot know whether the packet can reach the destination.

Although UDP does not guarantee data reliability, it is very fast, so UDP will be used in some areas where speed is a concern but data integrity is not so strict, such as online video, interactive games and so on.

  • 3.TCP: Delivers data to the application in its entirety

For browser requests and mail applications that require reliability of data transmission, UDP has two problems:

  • Data packets are easily lost during transmission.
  • Large files are broken into smaller packets for transmission. These packets take different routes and arrive at the receiver at different times. UDP does not know how to assemble these packets into a complete file.

Based on these two issues, we introduced TCP. Transmission Control Protocol (TCP) is a connection-oriented, reliable, byte stream – based transport layer communication Protocol. Compared with UDP, TCP has the following characteristics:

  • TCP provides a retransmission mechanism for packet loss.
  • TCP introduces the packet sorting mechanism to ensure that out-of-order packets are combined into a complete file.

Like UDP headers, the TCP header contains the destination port and the local port number, as well as a sequence number for sorting, so that the receiver can reorder the packet by the sequence number.

Let’s take a look at the transmission flow of a single packet under TCP:

A simplified four-layer transmission model for TCP networks

The figure above should give you an idea of how a packet is transmitted over TCP. The transmission flow of a single TCP packet is similar to that of UDP. The difference is that the information in the TCP header ensures the integrity of a large piece of data.

Let’s take a look at the complete TCP connection process to see how TCP guarantees retransmission and packet ordering.

As can be seen from the following figure, a complete TCP connection life cycle consists of three phases: “Establish a connection”, “transfer data” and “disconnect”.

The lifetime of a TCP connection

  • First, establish the connection phase. This phase establishes the connection between the client and server through a “three-way handshake.” TCP provides connection-oriented communication transport.connection-orientedIt refers to the preparation between the two ends before the data communication starts. The so-calledThree-way handshake, indicates that when establishing a TCP connection, the client and server send three packets to confirm the establishment of the connection.
  • Secondly, the data transmission stage. At this stage,The receiver needs to confirm each packet, that is, after receiving the data packet, the receiver needs to send the confirmation packet to the sender. Therefore, if the sender does not receive the confirmation message from the receiver within a specified period after sending a data packet, the packet is considered lost and the retransmission mechanism is triggered. Similarly, a large file is divided into many small packets during transmission. After these packets arrive at the receiving end, the receiving end sorts them according to the sequence number in the TCP header to ensure complete data.
  • Finally, the disconnect phase. Once the data is transferred, the connection is terminated, which involves the final stage of “four waves” to ensure that both parties are disconnected.

By now you can see that TCP has sacrificed packet speed to ensure reliable data transmission, because “three-way handshake” and “packet verification” doubled the number of packets in the transmission process.

conclusion

  • Data on the Internet is transmitted through data packets, which are easy to lose or make errors during transmission.
  • IP is responsible for delivering packets to the destination host.
  • UDP is responsible for delivering data packets to specific applications.
  • TCP ensures the complete transmission of data. Its connection can be divided into three stages: establishing a connection, transmitting data and disconnecting the connection.

7.HTTP request process

The HTTP protocol is based on TCP connections. HTTP is a protocol that allows the browser to obtain resources from the server. It is the basis of the Web. Usually, the browser initiates requests to obtain different types of files, such as HTML files, CSS files, JavaScript files, images, and videos. In addition, HTTP is the most widely used protocol for browsers

    1. Build request

    First, the browser builds the request line information (as shown below), and once it’s built, the browser is ready to make the web request. GET/index. HTML HTTP1.1

    GET /index.html HTTP1.1
Copy the code
    1. Find the cache

Before actually making a web request, the browser looks in the browser cache to see if there is a file to request. Among them, browser caching is a technique for saving a copy of a resource locally for immediate use on the next request.

When the browser discovers that the requested resource already has a copy in the browser cache, it intercepts the request, returns a copy of the resource, and ends the request without going to the source server for a new download. The benefits of this are:

  • Alleviating server-side stress and improving performance (less time to acquire resources);
  • For web sites, caching is an important part of fast resource loading.

Of course, if the cache lookup fails, it enters the network request process.

    1. The IP address and port number are available

The browser uses HTTP as the application layer protocol to encapsulate the requested text information. It uses TCP/IP as the transport layer protocol to send it to the network, so the browser needs to establish a connection with the server over TCP before HTTP work can begin. This means that HTTP content is implemented through the TCP data transfer phase. You can better understand the relationship between the two by combining the following diagram.

The relationship between TCP and HTTP

  • The TCP connection is established with the server

  • The IP address and port number are available

  • The first step is for the browser to ask DNS to return the IP corresponding to the domain name. Of course, the browser also provides DNS data caching service. If a domain name has been resolved, the browser will cache the result for the next query, which also reduces the network request.

    Once you have the IP, the next step is to get the port number. In general, HTTP defaults to port 80 if the URL does not specify a port number.

    1. Waiting for TCP queue

Chrome has a mechanism that allows you to establish a maximum of six TCP connections under the same domain name. If 10 requests occur at the same time under the same domain name, four of the requests will be queued until the ongoing requests are completed.

Of course, if the number of current requests is less than 6, the next step is to establish a TCP connection.

    1. Establishing a TCP Connection

When the queue is over, you can finally happily shake hands with the server, with the browser establishing a connection via TCP before the HTTP work can begin. How TCP works (see above)

    1. Sending an HTTP request

Once the TCP connection is established, the browser can communicate with the server. The data in HTTP is transferred during this communication.

You can see how the browser sends requests to the server.

HTTP request data format

First, the browser sends the request line to the server, which contains the request method, Uniform Resource Identifier (URI), and HTTP version protocol.

Sending a request line tells the server what resources the browser needs. The most common request method is Get.

Another common request method is POST, which is used to send some data to the server. For example, when you log in to a website, you need to send the user information to the server through POST. If the POST method is used, the browser also prepares data for the server, which is sent in the request body.

After the browser sends a request line command, it sends additional information in the form of a request header that tells the server the basics of the browser. For example, it contains the operating system used by the browser, the browser kernel and other information, as well as the domain name information of the current request, Cookie information of the browser, and so on.

  • 7. The server processes the HTTP request
      1. Returns the request

      Once the server has finished processing, the data can be returned to the browser

      The data format of the server response

      First the server returns a response line, including the protocol version and status code.

      If a message cannot be processed or is in error, the server tells the browser what it did with the status code of the request line

      • The most commonly used status code is 200, indicating that the processing is successful.
      • If the page is not found, a 404 is returned.

      The server also sends the response header to the browser along with the response. The response header contains information about the server itself, such as when the server generated the returned data, the returned data type (JSON, HTML, streaming media, and so on), and the Cookie that the server wants to save on the client.

      After sending the response header, the server can continue sending the data in the response body, which usually contains the actual content of the HTML.

      1. disconnect

    Normally, once the server returns the request data to the client, it closes the TCP connection. But if the browser or server adds the following header:

    Connection:Keep-Alive
Copy the code

    The TCP connection will remain open after being sent, so the browser can continue sending requests over the same TCP connection.Maintaining a TCP connection saves the time required to establish a connection for the next request and speeds up resource loading. For example, the images embedded in a Web page are all from the same Web site, and if you initialize a persistent connection, you can reuse that connection to request other resources without having to re-establish a new TCP connection.

    • 3. The redirection

      The server returns the response line and the response header (with redirection format)

      As you can see, the response line returns a status code 301, which tells the browser that I need to redirect to another url, and that url is contained in the Location field of the response header. Then the browser retrieves the address in the Location field. And use that address to navigate again, this is a complete redirection of the execution process

1. Why do many sites open quickly the second time?

If the second page is opened quickly, the main reason is that some time-consuming data was cached during the first page loading.

So what data is cached? As you can see from the core request path above, the DNS cache and the page resource cache are two pieces of data that are cached by the browser. Among them, DNS cache is relatively simple, it is mainly in the browser local IP and domain name associated, not too much analysis here. Let’s focus on the browser resource cache. Here’s how it works:

Browser resource cache:

Cache lookup flow diagram

When the server returns an HTTP response header to the browser, the browser uses the cache-Control field in the response header to set whether to Cache the resource. Usually, we also need to set a Cache expiration time for this resource, which is set by the max-age parameter in cache-control, such as 2000 seconds.

Cache-Control:Max-age=2000
Copy the code

This means that the cached resource will be returned to the browser if it is requested again if it has not expired.

But if the cache expires, the browser continues to make web requests with HTTP headers:

If-None-Match:"4f80f-13c-3a1xb12a"
Copy the code

After receiving the request header, the server determines whether the requested resource has been updated based on the if-none-match value.

  • If there is no update, the 304 status code is returned, which is equivalent to the server telling the browser, “This cache can continue to be used and I won’t send you the data again this time.”
  • If the resource is updated, the server returns the latest resource directly to the browser.

2. How is the login status maintained?

  • The user opens the login page, enters the user name and password in the login box, and clicks ok. Clicking the button triggers the page script to generate user login information, which is then submitted to the server by calling the POST method.
  • After receiving the message from the browser, the server queries the background to verify that the user’s login information is correct. If so, it generates a string representing the user’s identity, writes the string to the set-cookie field in the response header, as shown below, and sends the response back to the browser.
Set-Cookie: UID=3431uad;
Copy the code
  • After receiving the response header from the server, the browser parses the response header. If the response header contains a set-cookie field, the browser saves this field locally. For example, keep UID=3431uad locally.
  • When the user visits again, the browser will make an HTTP request, but before making the request, the browser will read the saved Cookie data and write the data into the Cookie field in the request header (as shown below), and then the browser will send the request to the server.
Cookie: UID=3431uad;
Copy the code
  • After receiving the HTTP request header data, the server will search for the “Cookie” field information in the request header. When it finds the information containing UID= 3431UAD, the server queries the background, determines that the user is logged in, and then generates the page data containing the user information, and sends the generated data to the browser.
  • After the browser receives the page data containing the current user, it can correctly display the status information of the user login.

Simply put, if the response header sent by the server has a set-cookie field in it, the browser keeps the contents of that field locally. The next time a client sends a request to the server, the client automatically adds the Cookie value to the request header and then sends the request. After discovering the Cookie sent by the client, the server will check which client sent the connection request, and then compare the records on the server to obtain the status information of the user.

Conclusion:HTTP request flow diagram

As you can see from the figure, the HTTP request in the browser goes through the following eight stages from initiation to termination: build the request, find the cache, prepare the IP and port, wait for the TCP queue, establish the TCP connection, initiate the HTTP request, the server processes the request, the server returns the request, and disconnect the connection.

8. Navigation flow: What happens between entering the URL and presenting the page?

Show the complete process diagram from entering URL to page

  • First, the browser process receives the URL request entered by the user, and the browser process forwards the URL to the network process.
  • The actual URL request is then made in the network process.
  • The network process then receives the response header data, parses it, and forwards it to the browser process.
  • After receiving the response header data from the network process, the browser process sends a “CommitNavigation” message to the renderer process.
  • After receiving the “submit navigation” message, the renderer process is ready to receive THE HTML data by directly establishing a data pipeline with the network process.
  • Finally, the renderer process “confirms submission” to the browser process, which tells the browser process that it is ready to accept and parse the page data.
  • When the browser process receives a “submit document” message from the renderer, it removes the old document and updates the page state in the browser process.

The process by which a user sends a URL request to a page to begin parsing is called navigation.

From entering URL to page display

    1. User input

    When a user enters a query keyword in the address bar, the address bar determines whether the entered keyword is the search content or the requested URL.

    • For search content, the address bar uses the browser’s default search engine to synthesize new urls with search keywords.
    • If the input content complies with THE URL rules, the address bar combines the content with the protocol to form a complete URL according to the rules

    When the user enters the keyword and enters Enter, it means that the current page is about to be replaced with a new page, but before the process continues, the browser also gives the current page the opportunity to perform a beforeUnload event, which allows the page to perform some data cleaning before exiting. Users can also be asked if they want to leave the current page, for example if the current page may have unfinished forms, so users can unnavigate by using the beforeUnload event without the browser doing any subsequent work.

    The current page does not listen to the beforeUnload event or agrees to continue the process, so the browser enters the state shown below:

    The URL browser state is loaded

    As you can see from the figure, the icon on the TAB page enters the loading state as soon as the browser starts loading an address. However, the page in the figure still shows the content of the previously opened page, and is not immediately replaced with a new page. The content of the page will not be replaced until the submission stage.

    1. URL Request process

    Next, you enter the page resource request process. In this case, the browser process sends the URL request to the network process through interprocess communication (IPC). After receiving the URL request, the network process initiates the actual URL request process here

    First, the network process looks up whether the local cache has cached the resource. If there is a cached resource, it is returned directly to the browser process. If the resource is not found in the cache, the network request flows directly. The first step before the request is to perform a DNS resolution to get the server IP address for the requested domain name. If the request protocol is HTTPS, you also need to establish a TLS connection.

    The next step is to establish a TCP connection with the server using the IP address. After the connection is established, the browser side will construct the request line, request information, etc., and attach the data related to the domain name, such as cookies, to the request header, and then send the constructed request information to the server.

    After receiving the request information, the server generates response data (including response line, response header, and response body) based on the request information and sends it to the network process. After the network process receives the response line and header, it parses the contents of the header.

    (1) Redirect

    Upon receiving the response header from the server, the network process begins to parse the response header. If the status code returned is 301 or 302, the server needs the browser to redirect to another URL. The network process reads the redirected address from the Location field in the response header, then initiates a new HTTP or HTTPS request and starts all over again.

    The response line returns the status code 301

    During the navigation, if the status code in the response line of the server contains information such as 301 or 302, the browser redirects to the new address to continue the navigation. If the response line is 200, then the browser can continue processing the request.

    (2) Response data type processing

    After processing the jump information, we continue the analysis of the navigation flow. The data type of the URL request, sometimes a download type, sometimes a normal HTML page, so how do browsers distinguish between them?

    The answer is content-type. The Content-Type is a very important field in the HTTP header that tells the browser what Type of response body data the server is returning. The browser then uses the value of the Content-Type to decide how to display the response body Content.

    The value of the Content-Type field in the response header:

    • Text/HTML: Data returned by the server is in HTML format

    • Application/OCtet-stream: The display data is byte stream type. Normally, the browser will handle the request according to the download type.

    Therefore, the subsequent processing flow of different Content-Types is quite different. If the value of the Content-Type field is determined by the browser to be a download Type, the request is submitted to the browser’s download manager and the navigation of the URL request ends. But if it’s HTML, the browser will continue with the navigation process. Since Chrome’s page rendering runs in the render process, the next step is to prepare the render process.

    3. Prepare the rendering process

    By default, Chrome assigns a render process to each page, meaning that a new render process is created for each new page opened. However, there are some exceptions, in some cases the browser will allow multiple pages to run directly in the same render process.

    When can multiple pages be running in a render process at the same time?

    “Same site” is defined as the root domain name plus the protocol (for example, https:// or http://), and includes all subdomain names and different ports under the root domain name

    Chrome’s default strategy is one render process per TAB. However, if a new page is opened from one page and belongs to the same site as the current page, the new page will reuse the parent page’s rendering process. Officially, this default policy is called process-per-site-instance.

    Different sites use different rendering processes

    To summarize, the rendering process strategy used to open a new page is:

    • Typically, a separate rendering process is used to open a new page;
    • If page B is opened from page A, and A and B belong to the same site, then page B reuses the rendering process of page A; If otherwise, the browser process creates a new renderer for B.

    Once the renderer process is ready, it cannot immediately enter the document parsing state because the document data is still in the network process and has not been submitted to the renderer process, so the next step is to submit the document.

    4. Submit documents

    Submitting a document means that the browser process submits the HTML data received by the web process to the renderer process. The process looks like this:

    • First, when the browser process receives the response header data from the network process, it sends a “submit document” message to the renderer process.
    • After receiving the “submit document” message, the renderer process establishes a “pipeline” with the network process to transfer data.
    • After the document data transfer is complete, the renderer process returns a “confirm submit” message to the browser process.
    • After receiving the “confirm submission” message, the browser process updates the browser interface status, including the security status, the URL of the address bar, the historical status of forward and backward, and the Web page.

    Where, when the browser process confirms the submission, the update content is as follows:

    Navigational completion state

    At this point, a complete navigation flow is “gone”, after which it is time to enter the rendering phase.

    Once the document is submitted, the rendering process begins page parsing and subresource loading. Once the page is generated, the renderer process sends a message to the browser process, which stops the loading animation on the label icon when it receives the message.

    conclusion

    • The server can control the behavior of the browser based on the response header, such as jump, network data type determination.
    • Chrome defaults to one render process for each TAB, but if two pages belong to the same site, both tabs will use the same render process.
    • The browser navigation process covers all the intermediate stages from the user initiating the request to submitting the document to the rendering process.

9. Rendering Process (I)

  • The content of HTML is made up of tags (also known as tags) and text
  • CSS, also known as cascading style sheets, is made up of selectors and properties
  • JavaScript (JS for short), which makes the content of a web page “live”

Rendering process: DOM tree building, Recalculate Style, layout stage, layering, drawing, chunking, rasterization and composition

  • Because browsers can’t understand and use HTML directly, you need to transform the HTML into a structure that browsers can understand — a DOM tree
    • DOM is almost identical to HTML content, but unlike HTML, DOM is stored in an in-memory tree structure that can be queried or modified using JavaScript.
  • Recalculate Style
      1. Convert CSS to a structure that browsers can understand. Just like HTML files, browsers can’t directly understand the CSS styles of plain text, soWhen the rendering engine receives CSS text, it performs a conversion operation to convert the CSS text into a structure that the browser can understand -- styleSheets.
      1. Transform property values in the stylesheet to standardize them. All values need to be converted to standardized computed values that the rendering engine can easily understand
      1. Figure out the specific style of each node in the DOM tree. This is where CSS inheritance and cascading rules come in.
  • Layout phase (figuring out the geometry of visible elements in the DOM tree)
      1. Create a layout tree. Before displaying, we also build an additional layout tree with only visible elements.
      • Iterate through all visible nodes in the DOM tree and add these nodes to the layout tree;
      • Invisible nodes are ignored by the layout tree,
      1. Layout calculation

Conclusion:

  • Browsers can’t understand HTML data directly, so the first step is to convert it into a DOM tree structure that browsers can understand.
  • After the DOM tree is generated, it is also necessary to calculate the style of all nodes of the DOM tree according to the CSS style sheet.
  • Finally, the DOM element layout information is computed so that it is stored in the layout tree.

10. Rendering Process (Part 2)

  • The rendering engine also needs to generate a dedicated layer for a particular node and a corresponding LayerTree.
  • The browser page is actually divided into many layers, which are superimposed to create the final page.
  • Not every node in the layout tree contains a layer. If a node has no corresponding layer, then the node is subordinate to the parent node’s layer.
    • First, elements with cascading context attributes are promoted to separate layers. Elements with explicitly positioned attributes, elements with transparent attributes defined, elements with CSS filters, and so on, all have cascading context attributes.
    • Secondly, the places that need to be clipped will also be created as layers.
    • So an element that has the properties of a cascading context or needs to be clipped to satisfy any of these points can be promoted to a single layer.
  • Layer to draw
  • Raster operation
    • A draw list is simply a list of draw orders and draw instructions that are actually done by the compositing thread in the rendering engine. The composition thread will divide the layer into tiles
    • The compositing thread prioritizes bitmap generation based on the blocks near the viewport, and the actual bitmap generation is performed by rasterization. Rasterization refers to the transformation of a map block into a bitmap. The graph block is the smallest unit for rasterization. The renderer process maintains a rasterized thread pool, where all rasterization of blocks is performed
  • Composition and display
    • 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.
    • 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.
    • At this point, through this series of stages, the HTML, CSS, JavaScript, etc., written by the browser will display a beautiful page.

Rendering assembly line summary

Complete rendering pipeline diagram

  • 1. The renderer transforms the HTML content into a readable DOM tree structure.
  • 2. The rendering engine translates CSS styleSheets into styleSheets that browsers can understand, calculating the style of DOM nodes.
  • 3. Create a layout tree and calculate the layout information for the elements.
  • 4. Create a hierarchical layout tree and generate a hierarchical tree.
  • 5. Generate a draw list for each layer and submit it to the composition thread.
  • 6. Composite threads divide layers into blocks and convert blocks into bitmaps in the rasterized thread pool.
  • 7. The composite thread sends the DrawQuad command to the browser process.
  • 8. The browser process generates a page based on the DrawQuad message and displays it on the monitor.

Related concepts: “Rearrangement,” “Redraw,” and “Composition.”

    1. Updated element geometry (rearranged)

As you can see from the above figure, if you modify the geometry of an element using JavaScript or CSS, such as changing the width, height, etc., then the browser triggers a relayout, a series of sub-stages after parsing, calledrearrangement. No doubt,Rearrangement requires updating the entire rendering pipeline, so it is also the most expensive.

    1. Update the draw attribute of an element (redraw)

Next, let’s take a look at how the rendering pipeline works when you change the background color of certain elements using JavaScript. You can refer to the following image:

As can be seen from the figure, if you change the background color of the element, the layout phase will not be performed, because there is no change in the geometry position, so you go directly to the drawing phase, and then perform a series of subsequences.the process is calledredraw. Compared to the rearrangement operation,Redraw eliminates the need for layout and layering, so execution is more efficient than scheduling.

    1. Direct synthesis stage

So what happens if you change a property that neither layouts nor draws? The rendering engine skips layout and drawing and only performs subsequent compositing operations, which we call compositing. Please refer to the following figure for specific process:

In the image above, we use the TRANSFORM of CSS to animate the effect, which avoids the rearrangement and redraw phases and executes the compositing animation directly on the non-main thread. This is the highest efficiency, because it is composed on the non-main thread, does not occupy the main thread resources, and avoids the layout and drawing two sub-stages, so compared with redraw and rearrangement, composition can greatly improve the drawing efficiency.

The resources

Working principle and practice of browser