How browsers render
I. Browser composition
First, the browser is divided into three parts, respectivelyUser interface, rendering engine, and browser engine
Modern browsers generally use multi-process architecture (open mode:chrome-> Task manager), roughly: browser process,GPUProcesses, renderers (tabs) * N, network processes, etc
chromeThe task manager can see different processes, such as browser processes,GPUProcess etc.
1. Processes and threads
process
A Process is the smallest unit for an operating system to allocate resources and run independently. Processes communicate with each other through inter-Process Communication (IPC).
thread
Threads are the smallest unit of program execution, and a process consists of one or more threads.
The relationship between processes and threads
Processes communicate with each other through the Inter Process Communication (IPC). (Common sense: process is our group, thread is each member of our group).
advantages
The early single-process architecture is unstable (if multiple pages are running in a process, if a problem occurs in a thread, the whole process will crash, so the early single-process architecture is unstable, multi-process can avoid this problem)
Site isolation, security, and sandboxing (multiple processes are isolated from each other, providing an isolated environment)
disadvantages
Occupying too much memory
Increased communication costs (cross-departmental collaboration)
3. How to solve these shortcomings?
Early browser processes
The merged browser process
willNetwork Process, UI Process, Stroage Process, Device ProcessAll merged intoBrowser PrecessProcess, as a separate thread to run
Second, navigation process
What happens when the browser enters the URL and enters?
1. Process input
After you enter a URL in the address bar, the browser’s UI Thread captures your input and determines whether it is a URL or a search term. If it is a URL, it will directly access the corresponding URL. If it is a search term, it will concatenate the default search engine for access
URL: A network thread retrieves a resource
Keyword: Concatenates default search engines
2. Start the navigation
Network threads obtain resources. Start DNS resolution, TCP connection, etc
3. Read the response
The network thread reads the content-Type response header and performs different actions for different types. For example, the following image represents the principle of rendering for the HTML page browser
4. Find the renderer process
The network thread first checks to see if the resource is safe, and if so, the browser process finds a renderer to interconnect with.
5. Submit navigation
When both the resource and the renderer are ready, the browser process sends IPC to the renderer to confirm.
6. The navigation is complete
The renderer receives the data, replies to the browser to confirm the submission, and the browser updates the address bar, tags, and history. At this point, the navigation process is complete.
Third, the rendering process
Once we get to the renderer, when our renderer gets the HTML, it starts parsing it line by line.
1. Build the DOM
The main thread parses THE HTML, builds the DOM tree, creates the Document object, and loads CSS and image resources if it encounters JS blocking. JS blocks because there may be code in JS that modifies the DOM.
2. Calculation style
The main thread parses the CSS to determine the style of each DOM node (custom style + browser default style)
3. Build a Layout tree
The main thread traverses the DOM and evaluates the style to generate a Layout that contains only “visible” elements. For example: head, display node is not visible the content of the pseudo-element is visible.
4. Create the Layer tree
Layer trees are generated to facilitate 3D transformations, page scrolling, z-index, and more.
Layering rules: 1. Have cascading context properties. 2
5. Draw a sequence table
The drawing of layers is divided into a number of drawing instructions, which are then grouped into a drawing sequence table.
6. Rasterize
The previous five steps all produce data, and rasterization is the process of turning data into images.
6-1. Layer BlockingThe layer is too big and the Compositing thread will block it and hand it to the Raster thread
6-2. Composing raster threads will generate DrawQuads(save block drawing information) to generate a frame.
[GPU process] can speed up rasterization.
7. According to
[GPU process] will receive synthesizer frames and render them on the screen.
Frame rate: the number of times the screen is displayed in one second, with fluency at 60fps. That is, 1 frame 16ms.
Summary of rendering process
Fourth, optimize means
1. Avoid JS blocking
(1)
(2) Add async and defer attributes
After async: JS is loaded, js is executed immediately
Defer: After the JS load is complete, execute the JS in sequence
React 16 uses a similar approach, with the ability to block execution: time sharding
React Fiber
A rearrangement of 2.
Changes affect the style of the layout, causing rearrangements.
3. Redrawn
Changing non-geometric styles, such as colors, only triggers repainting.
Separate read and write operations, cache layout information, and modify DOM offline.
Five, the summary
Understanding the inner workings of browsers can help us write more browser-friendly code. Modern browsers are always exploring how to provide a better user experience. Writing browser-friendly code, in turn, provides a user-friendly experience.