Looking through the previous study notes, I found that the notes on the working principle of the browser were full of dry things, so I decided to sort out and share them. I would review the things we deal with every day with sesame Oil, which can be used for interview, development and daily accumulation. 😃

The notes are long and divided into four chapters, and sesame oil is eaten as needed.

  1. Look at the browser principles in general
  2. Browser principle JS, V8
  3. Browser principles of the page
  4. Browser principles of network security

01. Opening

There are three major evolution paths for browsers

  1. Web application: browser/server (B/S) architecture applications, such as video, audio, and games.
  2. Mobile Web applications: PWA (solve the problem that the performance is not as good as native applications, offline users cannot use it, they cannot receive message push, and there is no mobile terminal entrance).
  3. Systematization of Web operations: use Web technologies to build pure operating systems, such as ChromeOS; The browser infrastructure evolves toward the operating system architecture.

Front-end core appeal evolution

  1. Script execution speed: ES6 >> 7 >> 8, WebAssembly.
  2. Front-end modular development: WebComponents.
  3. Rendering efficiency: Chrome’s next generation layout scheme LayoutNG, rendering scheme Slim Paint.

Learning goals

  1. Evaluate the feasibility of Web development projects: How do browsers work to make more accurate decisions
  2. Look at the page from the standpoint of browser principles: find problems, fix them
  3. Grasp the essence in rapid technology iteration: Grasp the core context in a constantly changing technology environment

02. Four processes per page

Process & Thread

process

A process is an instance of a program running.

When a program is started, the operating system creates a block of memory for the program to hold code, running data, and a main thread to perform tasks. Such a running environment is called a process.

thread

Threads cannot exist alone and must be started and managed by processes. Multithreading can process tasks in parallel.

Relationship between

  1. An error in the execution of any thread in the process will cause the entire process to crash.
  2. Threads share data in a process.
  3. When a process is shut down, the operating system reclaims the memory occupied by the process. Even if any thread in the process leaks memory, it is properly reclaimed.
  4. The contents of the processes are isolated from each other. Inter-process communication depends on the IPC mechanism.

Processes & Browsers

Single-process browser

Before 2007, most browsers were single-process. Network, plug-ins, JS runtime environment, rendering engine and other functional modules run in the same process.

Problems with single-process browsers:

  1. Unstable: plug-ins such as video and games crash, and complex JS code causes the rendering engine to crash, further causing the entire browser to crash.
  2. Not smooth: All modules run in the same thread, scripts or plug-ins can cause memory leaks on the page and cause the browser to stall.
  3. Unsafe: Plug-ins written in C and C++ can obtain any resources of the operating system. Scripts can also obtain system permissions through browser vulnerabilities, causing security problems.

Multiprocess browser

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

  1. Browser main process: interface display, user interaction, sub-process management, storage functions.
  2. GPU process: UI, 3D effect.
  3. Network process: Loads network resources.
  4. Rendering process: HTML+CSS+JS >>> interactive web page, typesetting engine Blink, JS engine V8 running inside. sandbox
  5. Plug-in process: The plug-in runs. Some systems support Sandbox.

Problems with multi-process browsers:

  1. Higher resource occupancy: Each process contains a copy of the common infrastructure, consuming more memory resources.
  2. More complex architecture: high coupling between modules, poor scalability, difficult to adapt to new requirements.

Service-oriented Architecture (Future)

In 2016, Chrome designed a new Chrome ArchItecture using the ideas of Services Oriented ArchItecture (SOA).

Function Modules >>> Independent service (running in a separate process), access to the service using a defined interface through IPC communication. ➤ High cohesion, loose coupling, easy to maintain and expand

Basic services
  • The Profile process
  • UI process
  • GPU process
  • Network process
  • Document the process
  • Equipment process
  • Audio process
  • Video process
  • .

The base service is similar to the operating system low-level service, which is the main browser process, the renderer process, and the plug-in process.

In the case of under-resourced devices, the underlying services can be merged into the browser main process.

03. TCP complete transmission

Network Layer (IP)

Sends the packet to the destination host.

Network layer, appending IP headers (parsed IP headers) to packets. (Source and destination IP addresses)

The transport layer

Send packets to the application. Add or parse UDP headers. (Source and destination port numbers)

UDP

User Datagram Protocol Indicates the User Datagram Protocol

TCP

Transmission Control Protocol.

Establish a connection, transmit data (the receiver confirms each packet), disconnect the connection, and ensure complete data transmission.

04. HTTP request process

(1) Build request

Build the request line information ready to initiate the network request.

(2) Query cache

The browser cache includes disk cache, Memory cache, and Service worker cache. A network request is sent only when the cache fails to be queried.

(3) Prepare IP addresses and ports

DNS resolves domain names to return IP addresses (DNS data caching service). The port is taken from the URL, not using the default 80 or 443.

(4) Waiting for the TCP queue

In Chrome, a maximum of six TCP connections can be established for a domain name. If the number of TCP connections exceeds the threshold, the TCP connections are queued. (CDN is mostly used for static resources such as pictures)

(5) Establish the TCP connection

(6) Send HTTP requests

(7) The server processes the request

(8) The server responds to requests

(9) Disconnect the TCP connection

Disclaimer: Geek Time - How browsers work and practice

05. From entering URL to page display

Disclaimer: Geek Time - How browsers work and practice

(1) User input

The address bar generates a complete URL based on what the user enters.

The URL bar determines whether the keyword is a search or a request URL. If the keyword is a search, the default search engine is used to synthesize a URL with a complete search keyword, and if the keyword is a URL, the completion is processed.

After you press Enter, the loading state is displayed on the small icon on the TAB bar. A response waiting for XXX.xx.xx is displayed at the bottom of the page.

(2) URL request process

  1. The browser main process sends the URL request to the network process via IPC;

  2. After receiving the URL, the network process queries the local cache, but returns the URL but does not enter the network request process.

  3. DNS resolution, TCP connection establishment, SENDING HTTP request, server processing request return data (disconnection);

  4. The network process receives the response, parses the response header,

    If a status code 301 or 302 is found, the Location field is read and redirected, and 200 continues processing the request,

    If the content-type is stream or something, the request is sent to the browser’s download manager and the HTML continues.

(3) Prepare the rendering process

Chrome typically assigns a rendering process to each page. However, if page B is opened from page A, and page A and page B belong to the same site (the domain name protocol is the same), page B will reuse the rendering process of page A.

(4) Submit documents

  1. The main browser process sends a “submit document” message to the renderer process.
  2. The renderer receives the message and communicates with the network process through which you transmit the data.
  3. When the document data transfer is complete, the renderer returns a “confirm submission” message to the browser main process.
  4. The main process of the browser updates the interface status, including the security status, URL of the address bar, forward and backward historical status, and Web page. (Unmount the current page at this time, reclaim memory ❓❓)

(5) Rendering stage

  1. The renderer process starts page parsing and subresources load;
  2. When the page is rendered, the renderer process sends a message, and the browser main process receives the message and stops the loading animation on the TAB icon.

06. Rendering process

(1) DOM tree construction

Browsers can’t understand and use HTML directly, so you need to transform HTML into a structure that browsers can understand — a DOM tree.

(2) Style calculation

  1. Convert CSS text to styleSheets, standardize property values (calculated values) in the stylesheet;
  2. The specific node style is calculated according to inheritance rules and cascade rules and saved in ComputedStyle.

(3) Layout stage

  1. Generate the layout tree (all visible nodes) from the DOM tree and ComputedStype;
  2. Calculate the coordinate position of nodes in the layout tree;
  3. Perform layout operations: reorganize the results of layout calculations into the layout tree.

(4) Stratification

3D transformation, page scrolling, z-index sorting and other effects, the rendering engine needs to generate dedicated layers for these specific nodes, generating the corresponding layer tree.

  • Elements with cascading context properties are promoted to a single layer, such as filter, opacity, z-index, fixed…
  • The places that need to be clipped will be created as layers. For example, 200×200 div with scroll bar is divided into three layers: text layer, scroll bar and container layer

(5) Layer drawing

Draw each layer of the layer tree, divide the drawing of a layer into multiple drawing instructions, and output the list of layers to draw.

(6) Raster operation

  1. The main thread of the renderer submits the drawing list to the composition thread;
  2. The composition thread divides the layer into tiles, 256×256 or 512×512;
  3. The compositing thread generates bitmaps first according to the blocks near the viewport, and the renderer maintains a grille (blocks >> bitmaps) thread pool to complete the grille of all blocks.
  4. GPU acceleration is used in the grille process. The rendering process IPC sends the instruction of bitmap generation to the GPU thread, and the bitmap generated by GPU is stored in GPU memory.

(7) Synthesis and display

  1. After all blocks are grated, the synthesis thread generates the instruction “DrawQuad” and submits it to the main process of the browser.
  2. The Viz component of the browser’s main process receives instructions to draw the page’s contents into memory, which is then displayed on the screen.

**DOM >> Style >> Layout >> Layer > Paint(sheet) >> ** CPU

Tiles >> Raster >> Draw quad >> display (composed thread, GPU, main browser) GPU

Three important nouns

rearrangement

Updating the geometry of an element, such as changing the width and height of the element, can trigger a relayout by the browser, triggering an entire rendering pipeline that can be expensive.

Layout >> layer > Paint(sheet) >> tiles >> raster >> draw quad >> display

redraw

Updating the drawing attributes of elements, such as changing the background color, does not change the geometric position. Therefore, it skips the layout stage and directly enters the drawing stage. The follow-up process of updating has high execution efficiency.

Paint(sheet) >> tiles >> raster >> draw quad >> display

synthetic

Change the properties that do not need layout and drawing, and directly enter the synthesis stage. For example, transform can achieve animation effect, and the execution efficiency is higher than drawing.

tiles >> raster >> draw quad >> display

Those years of interview, have not been asked to rearrange redraw, if reduced optimization performance….. O O (studying studying)