Event cycle
The program running requires its own own memory space. You can simply understand this memory as the process
Each application has at least one process.
Thread
After there is a process, you can run the code of the program
[People] running code is called a thread
There is at least one thread in a process. After the process is turned on, it will automatically create a thread to run the code, which is called the main thread
If the program is executed at the same time, the main thread will start more threads to execute the code, so one process can contain multiple threads
Browser's process mode
Browser is a multi -process multi -thread application
To avoid mutual impact, to reduce the chance of serial collapse. After starting the browser, it will automatically start multiple processes
image
Browser process
Network process
** Rendering process **
After the rendering process is started, a rendering main thread will be opened. The main thread is responsible for the HTML CSS JS code. By default, the browser opens a new rendering process for each tab page to ensure that different tabs will not affect each other. There will be multiple threads in the rendering process, but the main discussion of the main thread of rendering
How to schedule tasks in the main thread? queue
image-20240827114736405
image
User click the button,
A timer is time to time
At the beginning, the main thread of rendering entered an infinite loop for (; 😉
Each cycle will check whether the message queue has a task. If so, take the first task to execute and enter the next cycle after execution. If there is no task, enter the dormant state
All other threads include the threads of other processes, which can add tasks to the end of the message queue at any time. If the main thread is dormant, it will awaken the main thread execution task
** The entire process is called an incident cycle **
What is asynchronous
During the code execution process, there will be some tasks that cannot be processed immediately, such as
Settimeout () to be executed after the timing is completed
The task that needs to be performed after network communication is XHR FETCH
ADDEVENTLISTENER (), which needs to be executed after the user is operated
Single threads are the cause of asynchronous. Event cycle is an asynchronous implementation method
If the timing of the rendering main thread is reached, it will cause the main thread to be in a state of long -term blocking, which will cause the browser to get stuck
image-20240827120004682
image
Browser uses asynchronous methods
How to understand the asynchronous of js
JS is a single -thread language because it runs in the main thread of the browser, and there is only one main thread. Rendering the main threads to bear many tasks such as HTML, CSS JS, rendering page, and so on.
If the synchronization method is used, it is very likely that many tasks in the message queue need to wait to be completed, which will cause the busy main thread to waste time. On the other hand, the page cannot be updated in time, causing users to die
Therefore, the browser uses asynchronous ways to avoid. Specifically, when performing certain tasks, such as timers, networks, event monitoring, the main thread will hand over the task to other threads, and immediately end the task execution, and perform the follow -up code. When other threads are completed, pack the prior transmitted callback function into the task to add to the tail of the message queue and wait for the main thread to execute. In this asynchronous mode, the browser will not block it, so as to maximize the process of the single -threading process running
JS will affect the rendering of the page
image
Priority of task
There is no priority of the task, and the first first came out in the message queue
But *** message queue has priority ***
W3C explanation:
Each task has a task type. The same type of task must be in a queue, and the message queue can be row. Different types of tasks can be divided into different queues. In an incident cycle, the browser can take out tasks from different queues according to the actual situation. OK
The browser must prepare a micro queue, the task in the micro queue prefer all other tasks to perform
image
After the rendering main thread is executed, then scheduling the task from the queue
image-20240828104745561
image
Micro queue> Interactive queue> delay queue
Explain the incident cycle of JS
The event cycle is also called a message cycle, which is the way to rendering the main thread of the browser.
In Chrome's source code, it turns on a for -not -end loop. Each cycle will take the first task to execute from the message queue, and other threads only need to add the task to the end of the queue at the right time.
According to the W3C explanation, each task has different types. Similar tasks must be in a queue, and different tasks can belong to different queues. Different task queues have different priorities. In a cycle of an incident, the right browser decides which queue task is to take. However, the browser must have a micro queue. The task of the micro queue must have the highest priority.
Can the timer in JS be accurate timing? Why?
No, because
Computer hardware has no atomic clock, and it cannot be accurate time counting
The timing function of the operating system itself has a small number of deviations. Because the timer of JS finally calls the function of the operating system, it also carries these deviations.
According to the standard of W3C, when the browser implements the timer, if the nested level exceeds 5 layers, it will have a minimum time of 4 milliseconds, so that the deviation is brought to the deviation when the time time is less than 4 milliseconds.
Affected by the incident cycle, the callback function of the timer can only run when the main thread is free, so it brings deviation
The rendering principle of the browser
How is the browser rendering the page
When the browser's network thread receives the HTML document, a rendering task will be generated and the message queue is passed to the main thread of rendering. Under the influence of event cycle, the rendering main thread gets the rendering task
- Analyze HTML
image
When encountering the CSS code during HTML analysis,
In order to improve the analysis efficiency, the browser will start a pre -resolved analyzer to download and analyze the CSS first
When html analysis, when encountering JS code during the analysis
When rendering the main thread, you must suspend all behaviors when you encounter JS. After the download is completed and executed, you can continue to solve the thread to share the task of downloading JS.
The calculation process of style calculation EG CSS attribute value
image-20240904170728564
image
Get all calculated styles computed style (final style)
At present, each node has its own style
Calculate the final style in sequence of DOM Tree
layout
image-20240904171436534
image
CSS attribute calculation process, visual formatting model
DOM Tree does not correspond to the layout tree
image
Layer
In the scene of the subsequent page changes, reduce the workload of rendering
image
Interview questions
When the browser's network thread receives the HTML document, a rendering task will be generated and the message queue is passed to the main thread of rendering.
Under the influence of the event cycle mechanism, the rendering main threads take out the rendering tasks in the message queue and turn on the rendering process.
The entire rendering process is divided into multiple stages, namely: HTML analysis, style calculation, layout, layering, drawing, block, grating, drawing
Each stage has a clear input and output. The output of the previous stage will become the input of the next stage.
In this way, the entire rendering process has formed a tightly organized assembly line.
The first step of rendering is to analyze HTML.
In the process of parsing, CSS analyzes CSS and JS executes JS. In order to improve the analysis efficiency, before the analysis of the browser, a pre -analysis thread will be launched to download the external CSS file and the external JS file in HTML.
If the main thread is parsed to the LINK position, at this time the external CSS file has not been downloaded and parsed, and the main thread will not wait, and continue to parse the subsequent HTML. This is because the work of downloading and analyzing CSS is carried out in the pre -resolution thread. This is the fundamental reason why CSS will not block HTML parsing.
If the main thread is parsed to the SCRIPT position, it will stop resolving HTML, and then wait for the JS file to download, and the global code analysis is completed before the resolution of HTML. This is because the execution process of the JS code may modify the current DOM tree, so the generation of the DOM tree must be suspended. This is the root cause of JS blocking HTML analysis.
After the first step is completed, the DOM tree and CSSOM tree will be obtained. The default style, internal style, external style, and line style of the browser will be included in the CSSOM tree