Go behind the scenes of the browser and check it out!!!

Preface

I believe that after you have been in contact with front-end development for a period of time, you will find that the more you learn, the more confused you will be, or more and more questions. (It's better to cross the river by feeling the stones if you are tired from fishing and touching--)

To give a few examples:
Everyone knows that js is single-threaded, but why is it single-threaded? Is the browser also single-threaded?

I believe you have seen a lot of related content such as: "From browser multi-process to JS single thread, the most comprehensive one-time combing of JS operating mechanism", "In-depth explanation of JS engine" and other excellent blog explanations. But there is still some confusion about some details. Even some students in non-disciplinary classes may slowly forget after reading it. . .
Secondly, there is another point that I personally think that fragmented knowledge may not be able to accompany you for a long time (520 happy!!) I hope to have a comprehensive understanding. This is also a starting point for this series of blogs, let us explore the three things behind the browser.

This series tries to explain the terms in a vernacular way as much as possible. Regarding some of the definition of terms and concepts, reference links will also be posted and provided to those who need it.

Cognitive content

Let me sort out what the browser contains, and what secrets exist in the modules that have always been familiar.

What is the browser?

The browser is an application program used to retrieve, display, and deliver Web Note that it SEO (search engine).

Browser architecture, which modules are included in the implementation

According to chrome (chromium to be precise), I want to find pictures to post, but I am afraid that it is too complicated to understand. Draw a simple post when you are done.

1. The main process mainly includes the main thread and the I/O thread (input/output input and output). And some public API, resources; responsible for synthesis.
2. The child process mainly includes the main thread and other threads such as the rendering thread Render.
3. The kernel mainly includes WebCore V8 WebKit and so on.
4. The third-party libraries mainly include graphics libraries (2D, 3D) to store audio, video, and so on.

Note: The browser is a multi-process and multi-threaded architecture, and the follow-up will make a simple understanding of the internal implementation (not too far away from the front end).

The main components of the browser

ps: Please leave a message if the source of the picture is network invasion.

1. UserInterface user interface-including address bar, forward/back button, bookmark menu, etc. Except for the page you requested displayed in the main window of the browser, all other displayed parts belong to the user interface.
2. Browser Engine browser engine-transfer commands between the user interface and the rendering engine.
3. Rendering Engine rendering engine-responsible for displaying the requested content. If the requested content is HTML, it is responsible for parsing HTML and CSS content and displaying the parsed content on the screen.
4. Networking network-used for network calls, such as HTTP requests. Its interface has nothing to do with the platform, and provides the underlying implementation for all platforms.
5. UI Backend user interface backend-used to draw basic widgets, such as combo boxes and windows. It discloses a general interface independent of the platform, and uses the user interface method of the operating system at the bottom.
6. JavaScript Interpreter JavaScript interpreter. Used to parse and execute JavaScript code.
7. Data Persistence data persistence layer. This is storage. The browser needs to save various data on the hard disk, such as cookies.

What is the browser kernel?

In the browser, there is one of the most important modules. Its main function is to transform the page into a visualized (and to be precise) image result. This is the browser kernel. Usually, it is also called a rendering engine. Common kernels include:

1. Trident core represents the browser Internet Explorer (IE)
2. The Gecko kernel represents the browser Mozilla Firefox
3. The WebKit core represents the browser Safari
4. The Blink kernel represents the browser Chrome, and the remarks indicate that the kernel is based on the branch pulled out by the WebKit kernel for secondary development (the Google team feels that it is moving faster)
5. Other cores

JavaScript (js) engine

We often say that the v8 engine of Google Chrome/nodejs, note that it is not a rendering engine, V8 is a js engine, it is used to compile and execute js code.

The JavaScript engine is a virtual machine that specializes in processing JavaScript scripts, and is usually attached to a web browser. It is usually called a js engine, to name a few engines ( asked the interviewer several times, do you know any other JS engines besides v8? It is almost annihilated... ):

1. JavaScriptCore stands for browser Safari
2. Rhino stands for browser Mozilla Firefox
3. Chakra stands for Internet Explorer (IE)
4. V8 stands for Chrome

Follow-up will introduce V8

Rendering engine

ps: Please leave a message if the source of the picture is network invasion.

Simplified understanding is:

1. Parse HTML to build DOM tree
2. Construct a render tree
3. Lay out the render tree
4. Draw the render tree

It is worth noting that in the parsing process: js code may modify the DOM tree structure. If you rely on external resources during the parsing process, the loader will be used to load (asynchronous loading), but the DOM tree will also be constructed while waiting for the load to be completed.

At last

Please listen to the next decomposition if you know what will happen.

First of all, let’s look back today. Overall, I am very happy. The social circle in the circle of friends is much quieter and peaceful than in previous years. So I decided to write an article to reward the majority of single aristocrats and you who are fighting on the front line.

The content of the promised series will definitely be followed up. JS engine internal rendering engine network and so on must be written.

Finally, I wish you all a happy 5,20. I hope that tomorrow 5, 21 will continue to be peaceful~

"get out of class off!"