What is a process and what is a thread
A process is the smallest unit of CPU resource allocation, and a thread is the smallest scheduling unit of a process. In our operating system, there are many processes, and every time the operating system does something, it is entrusted to a process, such as opening music, which is a process. And each process contains many threads, such as opening a music player, playing a song, creating a new thread, switching to the next song, and possibly another thread. In short, the relationship between them is that a process contains multiple threads.
Is the browser multi process or single process
Browsers are generally multiprocessing, and every time a tab page is opened, it becomes a new process. That’s why a tab page crash doesn’t affect the entire browser crash. He is mainly divided into the following processes:
- Main process: Only one, responsible for scheduling and controlling the entire browser
- Plugin process: Each plugin has a process that is only created when the plugin is called
- GPU process: Only one, responsible for 3D drawing
- Rendering process: One per tab page, responsible for webpage rendering, script execution, and event handling. This process is also the process that the front-end needs to understand the most.
Render Process
To understand the rendering process, you need to start with how many threads it has.
The rendering process mainly consists of the following threads:
- GUI thread: responsible for page construction and rendering. When the page needs to be drawn, this thread will be launched. It should be noted that it is mutually exclusive with the JavaScript engine thread and cannot be executed in parallel
- JavaScript engine thread: responsible for parsing and executing JavaScript scripts. Due to its mutual exclusion with GUI threads, JavaScript code can cause inconsistent page rendering, commonly known as blocking page rendering
- Event triggered thread: Belongs to the browser, not the JS engine. It mainly controls the event loop, adds a series of tasks to a queue, and executes them when the JS engine is idle
- Timer thread: manages the timing of timers, pushes events into the task queue when the time is up, and waits for the JS engine to execute
- Asynchronous HTTP request thread: Every time a request is sent, a new thread is opened, waiting for a response and pushing the callback function into the task queue, waiting for the JS engine to execute.
The above are the main threads of the rendering process. In fact, from the above understanding, we can roughly understand why the execution order of JavaScript code is like that. It can be simply assumed that only synchronous code is executed in the JavaScript engine thread at the first time, while other tasks such as macro tasks and micro tasks are managed by other threads. When the conditions are met, the code is handed over to the JavaScript engine for execution.
Browser rendering process
- Firstly, the browser will parse the HTML file, construct a DOM tree, and then parse CSS to generate a CSS tree.
- After both the DOM tree and CSS tree are built, they will be merged to generate the final render tree
- Next, layout the render tree and calculate the position dimensions. Then draw the render tree.
- Finally, the information from each layer is sent to the GPU, which synthesizes the rendering layer and ultimately presents the page.
During the rendering process in the browser, there are two hooks that will be triggered, namely the load event and the DOMContentloaded event
What is the difference between the two?
The DOMContentloaded event will be executed after the completion of the dom tree construction (excluding style sheets, images, etc.), while the load event will be executed after rendering is complete. All the former are executed before the latter.
Browser Reflow and Redraw
Reflow refers to when an element undergoes a change in size and position, causing the entire structure to also change. At this point, the browser will trigger reflow, and redrawing refers to changes in the color, background color, and other areas of the element that do not affect layout changes, which will trigger redrawing.
Reflow must trigger redrawing, but redrawing does not necessarily trigger reflow.
How should we try to avoid these two problems as much as possible in our daily lives?
- Try to unify the process of operating the DOM as much as possible to reduce the number of reflow redraws
- Display the dom that requires multiple operations first as’ none ‘, and then display it after completing the operations
- Detach animated dom from document flow
- Try to use offset transformer instead of left top and other displacement attributes as much as possible
- Replace the original writing style with some styles that can trigger GPU acceleration
Script Tags
After talking about html, css, of course, we will talk about the most important js link.
After reading the above content, we probably know why js blocks page rendering. Is there any way to avoid it.
First, learn about the async and defer attributes on the following script tags
Async: load the js file asynchronously. It will execute the js file immediately after the asynchronous loading is completed, so it will still block subsequent dom rendering.
Defer: It is also asynchronous loading. Unlike async, it will not be executed immediately after the loading is completed. Instead, it will wait until the DOM tree is built and the DOM Content Loaded is executed before executing the script.
And because async loads and executes, it causes async to load js files out of order, which may lead to the problem that when a js needs to rely on a previous js, the previous js has not been loaded. Defer executes js in an orderly manner, in the order of the script tags you write.
Well, after learning so much, you should understand why js is usually introduced at the bottom of the page. Just remember that the GUI rendering thread and the js thread are mutually exclusive and can answer most blocking questions.
