Go into the browser behind the scenes and have a look!!!

Time:2021-6-22

preface

I believe that after a period of contact with front-end development, you will find that the more you learn, the more confused you will be, or there will be more and more questions( It’s better to feel the stone to cross the river when you are tired of fishing

For example:
We all know 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 comb of JS operation mechanism”, “in simple terms, JS engine” and so on. But some details are still confused. Even some non science students may have forgotten after reading it…
Secondly, I think that fragmented knowledge may not accompany you for a long time More hope is to be able to have a comprehensive understanding. This is also a starting point of this series of blogs. Let’s explore three things behind the scenes of browsers.

This series tries to explain the terms in vernacular as much as possible. For some term definition concepts, reference links will also be posted for those who need them.

Cognitive content

Let me sort out what the browser contains, and what are the secrets of the familiar modules.

What is a browser?

The browser is used to retrieve, display and passWebApplication of information resources. Attention andSEO(search engine).

Browser architecture, which modules are included in the implementation

According to the introduction of chrome (to be exact, chromium), I want to find a picture to paste, but I’m afraid it’s too complicated to understand. Draw a simple paste when you’re done.

  1. The main process mainly includes main thread and I / O thread (input / output). And some public APIs and resources; Responsible for synthesis.
  2. The subprocess mainly includes the main thread and other threads, such as render.
  3. The kernel mainly includes webcore, V8, WebKit and so on.
  4. The third-party library mainly includes graphics library (2D, 3D) to store audio and video, etc.

Note: the browser is a multiprocess and multithreaded architecture. We will make a simple understanding of the internal implementation later (not too far away from the front end).

Browser main components

Go into the browser behind the scenes and have a look!!!
PS: please leave a message.

  1. UserInterfaceUser interface – includes address bar, forward / backward button, bookmark menu, etc. All parts of the display belong to the user interface, except for the page you requested in the main browser window.
  2. Browser EngineBrowser engine – transfers instructions between the user interface and the rendering engine.
  3. Rendering EngineRendering 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. NetworkingNetwork – 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 BackendUser interface back end – used to draw basic widgets, such as combo boxes and windows. It exposes a platform independent general interface, and uses the user interface method of the operating system at the bottom.
  6. JavaScript InterpreterJavaScript interpreter. Used to parse and execute JavaScript code.
  7. Data PersistenceData persistence layer. This is storage. The browser needs to save all kinds of 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 role is to turn the page into a visual (accurately speaking, plus audible) image results, which is the browser kernel. In general, it is also called a rendering engine. Common kernels include:

  1. Trident kernel represents Internet Explorer (ie)
  2. The gecko kernel represents the browser Mozilla Firefox
  3. WebKit kernel represents browser safari
  4. Blink kernel represents Chrome browser. Remarks indicate that the kernel is based on the branch pulled out of WebKit kernel for secondary development (Google team thinks it’s going faster)
  5. Other kernels

JavaScript (JS) engine

We often say Google Browser / nodejs V8 engine, note that it is not a rendering engine, V8 is a JS engine, is used to compile and execute JS code.

JavaScript engine is a virtual machine specialized in handling JavaScript scripts, which is usually attached to the web browser. It’s usually called JS engine, to name a few(I asked the interviewer several times, do you know any JS engine besides V8? It’s almost a total annihilation..):

  1. JavaScript core stands for browser safari
  2. Rhino stands for the browser Mozilla Firefox
  3. Chakra stands for Internet Explorer (ie)
  4. V8 stands for chrome

V8 will be introduced later

rendering engine

Go into the browser behind the scenes and have a look!!!
PS: please leave a message.

It can be understood as follows:

  1. Parsing HTML to build DOM tree
  2. Construct rendering tree
  3. Layout the rendering tree
  4. Drawing a rendering tree
    It is worth noting that in the parsing process: JS code may modify the DOM tree structure. If the parsing process relies on external resources, the loader will be used for loading (asynchronous loading), but the DOM tree will be built after loading.

last

Let’s see what happens next time.

First of all, looking back, today is generally very happy. The circle of friends is much quieter and more peaceful than in previous years. So I decided to write an article in return for the majority of single nobles and you fighting in the front line.

There will be a follow-up of the promised series. JS engine internal rendering engine network and so on these must be written.

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

“Class is over!”