Browser processes and threads

What are processes and threads

Process: A process is the smallest unit that has resources and operates independently, as well as the smallest unit of program execution.

  • What does that mean? For example, dad is going to give you steamed steamed buns stuffed with pork and scallions today. Dad has prepared noodles, meat, scallions and spices. Dad also searched a recipe on the Internet on how to make steamed buns.
  • A recipe is a program.
  • Dad is the processor
  • Flour, meat, leeks and so on are input data
  • Progress is the sum total of dad reading the recipe, preparing the ingredients, wrapping the buns and steaming them.

Thread: Thread is the smallest unit that the operating system can schedule operations. It is contained in the process and is the actual operating unit in the process.

  • What does that mean? Let’s take another example where we have a list of assignments to write.
  • If you write sequentially by yourself, it’s single threaded.
  • You get several people to write for you at the same time and assign tasks to everyone, which is called creating a thread.
  • You dispatch them, you call them the main thread, the people who do your homework, are the child threads, and together you are called multithreading
  • When these people write, everyone shares a pen and paper, which is called multi-threaded resource sharing.
  • These people all need erasers, but there is only one eraser, this is called conflict.
  • There are many ways to resolve conflicts, such as waiting in line and waiting for the next person to call you when they are finished. This is called thread synchronization.
  • You tell people they can start writing, or they wait to do nothing. This is called starting the thread.
  • If Wang’s assignment is very important, you might watch him do it for a while. This is called thread participation.

The relationship between processes and threads

A failure of any thread in the process can cause the process to crash. Threads share data in the process. When a process is shut down, the operating system reclaims memory occupied by the process and isolates the contents of the process from each other

Single-process browser

Single-process browser means that all browser functions run in the same process. It is easy to understand that any thread error can cause the entire browser to crash. If a page takes a long time to execute, all pages may fail to be clicked. Memory leaks can also result if memory is not fully reclaimed. And it’s vulnerable to scripting attacks.

Multiprocess browser

The latest Chrome includes one main browser process, one GPU process, one web process, multiple rendering processes, and multiple plug-in processes. In fact, when you start the browser, there will be at least 1 browser main process, 1 GPU process, 1 web process, and 1 rendering process. When you open two tabs, there will be 1 browser main process, 1 GPU process, 1 Web process, and 2 rendering process. If the page you open has a plug-in running, you need to add one more plug-in process.

  • Browser process. It is mainly responsible for interface display, user interaction, sub-process management, and storage.

  • Render 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.

  • Process of GPU. 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.

What happens when you parse a url

Parsing the url

After entering the URL, the browser parses the protocol, host, port, path, and other information and constructs an HTTP request.

Browser cache

Before sending a request, the browser determines whether a strong cache policy (including expiration) is matched according to the expires and cache-control fields in the request header. If a strong cache policy is matched, the browser directly obtains resources from the cache and does not send the request. If not, go to the next step. If the strong cache rule is not matched, the browser sends a request and determines whether the negotiated cache is matched based on the last-Modified and ETAG of the request header. If the request is matched, the resource is directly fetched from the cache. If not, go to the next step. If the first two steps do not match, obtain resources directly from the server.Service workers, Memory caches, Disk caches, and Push caches are often seen on the browser console. They are actually different ways of storing caches in different locations.

  • Service Worker

A Service Worker is a separate thread that runs behind the browser and is typically used for caching. To use the Service Worker, the transport protocol must be HTTPS. Since request interception is involved in Service workers, the HTTPS protocol must be used for security. The Service Worker’s cache differs from other built-in caching mechanisms in that it gives us control over which files are cached, how the cache is matched, and how the cache is read, and the cache is persistent.

There are three steps to realize the caching function of Service Worker: The Service Worker needs to be registered first, and the required files can be cached after the install event is monitored. Then the next time the user accesses the server, it can intercept the request to check whether there is cache. If there is cache, it can directly read the cache file, otherwise it will request data.

When the Service Worker does not hit the cache, we need to call the fetch function to fetch data. That is, if we do not hit the cache in the Service Worker, we will look up the data based on the cache lookup priority. But whether we fetch data from the Memory Cache or from a network request, the browser displays what we fetch from the Service Worker.

  • Memory Cache

The Memory Cache is the Cache in Memory that contains the resources captured in the current page, such as styles, scripts, and images that have been downloaded on the page. It is definitely faster to read data from memory than from disk. Although memory cache reads data efficiently, it has a short cache duration and will be released as the process is released. Once we close the Tab page, the cache in memory is freed. So since in-memory caching is so efficient, can we keep all our data in memory? It’s impossible. The amount of memory in a computer is bound to be much smaller than a hard disk, and operating systems need to be very careful about how much memory they use, so there won’t be much for us to use.

Note that memory caching does not care about the value of the HTTP Cache header cache-Control that returns the resource, and the matching of the resource does not only match the URL, but may also check the content-Type, CORS, and other characteristics.

  • Disk Cache

A Disk Cache is a Cache stored on a hard Disk. It is slower to read, but everything can be stored on Disk, which is better than a Memory Cache in terms of capacity and storage timeliness.

  • Push Cache

Push Cache is HTTP/2 and is used when all three caches fail. It only exists in the Session, is released once the Session ends, has a short cache time (about 5 minutes in Chrome), and does not strictly implement the cache instructions in the HTTP header.

All resources can be pushed and cached, but Edge and Safari support is relatively poor; You can push no-cache and no-store resources. Once the connection is closed, the Push Cache is released; Multiple pages can use the same HTTP/2 connection and thus use the same Push Cache. This depends on the implementation of the browser. For performance reasons, some browsers may use the same HTTP connection for different tabs with the same domain name. The Cache in the Push Cache can only be used once; Browsers can refuse to accept an existing resource push; You can push resources to other domains.

The DNS

DNS manages the mapping between host names and IP addresses.

Domain name resolution is the process of restoring a domain name to an IP address. First, the browser checks whether the local hosts file has the URL mapping. If so, the browser invokes the IP address mapping to complete domain name resolution. The local DNS parser cache is searched if not found, and returned if found. If no DNS server is found, the system searches for the local DNS server. Finally, iterate to find the IP address in the order of root domain server > top-level domain (.cn) > layer 2 domain (hb.cn) > subdomain (www.hb.cn).

TCP transport

TCP Establishing a connection

  • First handshake: When establishing a connection, the client sends a SYN packet (SYN = J) to the server and enters the SYN_SENT state, waiting for confirmation from the server.
  • Second handshake: After receiving a SYN packet, the server must acknowledge the client’s SYN (ACK = J +1) and send a SYN packet (ACK = K). In this case, the server enters the SYN_RECV state.
  • Third handshake: After receiving the SYN+ACK packet from the server, the client sends an ACK packet (ACK = K +1) to the server. After the packet is sent, the client and the server enter the ESTABLISHED state (TCP connection is successful) and complete the three-way handshake.
  • After completing the three-way handshake, the client and server begin transferring data.

To transmit data

Once the connection is established, an HTTP request is made, and each packet that is sent goes through the process shown below.

Parsing response data

The server receives and parses the request, forwarding it to the server, which reads the complete request and prepares an HTTP response. The server packets the response again, again through the process shown in the figure above, and sends it back to the browser via TCP. The browser received the request.

Browser rendering

  • Build a dom tree

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

  • Style calculation

1. Convert CSS to a structure that browsers understand. When the rendering engine receives CSS text, it performs a conversion operation that converts CSS text to a structure that browsers understand — styleSheets. 2. Transform property values in the stylesheet to standardize them. 3. Calculate the specific style of each node in the DOM tree. The purpose of the style calculation stage is to calculate the specific style of each element in the DOM node. In the calculation process, two rules of CSS inheritance and cascading need to be observed. There are three main sources of CSS styles: external CSS files referenced through link

  • The layout phase

1. Create the layout tree. Before displaying, we will also build an additional layout tree containing 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. 2. Layout calculation

  • layered

The browser page is actually divided into many layers, which are superimposed to create the final pageWhat are the conditions for the rendering engine to create a new layer for a particular node? 1. Elements with cascading context attributes are promoted to a separate layer.2. Places that need to be clipped will also be created as layers.

<style> div { width: 200; height: 200; overflow:auto; background: gray; } </style> <body> <div > <p> So elements that have the property of A cascading context or need to be clipped will be promoted to A separate layer, as you can see below: </p> <p> These layers are organized into a tree structure. </p> <p> Layer trees are created based on the layout tree. To find out which elements need to be in which layers, the rendering engine iterates through the layout tree to create the Update LayerTree. </p> </div> </body>Copy the code

In this case, we limit the size of the div to 200 pixels by 200 pixels. The div contains a lot of text, and the text must be displayed in more than 200 pixels by 200 pixels. At this point, clipping occurs. The following is the run-time result:

When this clipping happens, the rendering engine creates a separate layer for the text section, and if the scroll bar appears, the scroll bar is promoted to a separate layer. You can refer to the following image:

  • Layer to draw

The rendering engine implements layer drawing: it breaks down the drawing of a layer into smaller drawing instructions, which are then sequentially assembled into a list of layers to draw.

  • Raster operation

When the drawing list is ready, the main thread commits the drawing list to the composition thread. How does the composition thread work? Usually a page may be large, but the user can only see part of it. We call the part of the page that the user can see the viewport. In some cases, some layer can be very big, such as some pages you use the scroll bar to scroll to scroll to the bottom for a long time, but through the viewport, users can only see a small portion of the page, so in this case, to draw out all layer content, will generate too much overhead, but also it is not necessary. For this reason, the composition thread will divide the layer into tiles, which are usually 256×256 or 512×512.

The composition thread then 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 maintains a rasterized thread pool, where all rasterization is performed, as shown below:

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. GPU operation is run in GPU process, if rasterization operation uses GPU, then the final bitmap generation operation is completed in GPU, which involves cross-process operation. 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. Refer to the following figure:

  • 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

    Combined with the above image, a complete rendering process can be summarized as follows:

    • The renderer transforms the HTML content into a readable DOM tree structure.
    • The rendering engine translates CSS styleSheets into styleSheets that browsers can understand, calculating the style of DOM nodes.
    • Create a layout tree and calculate the layout information for the elements.
    • Layer the layout tree and generate a hierarchical tree.
    • Generate a draw list for each layer and submit it to the composition thread.
    • The composite thread divides the layer into blocks and converts the blocks into bitmaps in the rasterized thread pool.
    • The composite thread sends the DrawQuad command to the browser process.
    • The browser process generates the page from the DrawQuad message and displays it on the monitor.

Rearrangement: Updated the geometry of elementsAs 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 will trigger a rearrangement of the layout, followed by a series of sub-stages called rearrangement. Of course, reordering requires updating the entire rendering pipeline, so it’s also the most expensive.

Redraw: Updates the draw attribute of an elementIf you change the background color of an element, the layout phase will not be performed, because there is no change in geometry, so you go directly to the draw phase, and then perform a series of subsequent subphases, called redraw. Redraw eliminates layout and layering, so it is more efficient than rearrange.

Direct Composition phase: Change a property that is neither laid out nor drawnIn 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.

Disabling a TCP Connection

String together!

  • Open the browser, and each process runs as shown in the following figure

  • The browser process receives the URL request entered by the user.

  • The browser process forwards the URL to the network process through interprocess communication, and the network process initiates the real URL request.

  • After receiving the URL request, the network process checks whether the local cache caches the requested resource and returns the resource to the browser process if it does.

  • If not, the network process makes an HTTP request (network request) to the Web server. The request process is as follows:

    • Perform DNS resolution to obtain the IP address and port of the server
    • Establish a TCP connection with the server using an IP address
    • Build the request header information
    • Send the request header
    • After the server responds, the network process receives the response header and response information and parses the response content

    The detailed request section is shown belowThe detailed browser cache is shown below

  • Network process parsing response flow;

    • Check the status code, if it is 301/302 redirected, automatically read the address from Location and start again, if it is 200, continue processing the request.
    • 200 Response processing: Check the response Type content-Type. If the response Type is byte stream, the request is submitted to the download manager. The navigation process ends without further rendering, if it is HTML, the data is forwarded to the browser process and the browser process is notified to prepare rendering.

  • The browser process checks whether the current URL is the same as the previously opened render process root domain name. If so, it will reuse the original process. If not, it will start a new render process.

  • When the renderer process is ready, the browser process receives the response header data from the network process and sends a “submit navigation” message to the renderer process. Submit navigation is when the browser process submits HTML data received by the web process to the renderer process.

  • Once the renderer receives the “submit navigation” message, it sets up a data pipeline with the network process and prepares to receive the HTML data.

  • After the document data is transferred, the renderer process returns a “submit confirmation” message to the browser process. This 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, including the security state, the URL of the address bar, the forward and backward historical state, and the Web page.

  • Once the document is submitted, the renderer process begins page parsing and child resource loading

Among them, the user sends a URL request to the page to start the process of parsing, called navigation.