preface

I believe that after a period of contact with front-end development, you will find that the more you learn, the more confused, or more and more questions. (Feel tired as feel the stones across the river –)

Here are some 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 the browser multi-process to JS single thread, JS running mechanism of the most comprehensive comb” “Simple JS engine” and so on these excellent blog explanation. But there is still some confusion about the details. Even some non-students may read it and slowly forget it… Secondly, there is a point that the personal view of fragmentation of knowledge is not necessarily can accompany you to go for a long time (520 happy!! More hope is to be able to understand the overall. This is the starting point for this series of blogs to explore three or two things that go on behind the scenes in browsers.

This series tries to explain terms in the vernacular as much as possible. Reference links are also posted to those who need them for some of the definitions of terms and conceptual questions.

Cognitive content

What is a browser?

A browser is an application used to retrieve, display, and transfer Web information resources. Pay attention to the distinction between SEO(search engine).

Browser architecture, which modules are included in the implementation

According to Chrome (exactly for Chromium) for the introduction to find a picture to paste but afraid too complex is not easy to understand. Draw a simple post.

  1. The main process consists of the main thread and I/O threads (input/output input/output). And some public apis, resources; Responsible for synthesis.
  2. The child process mainly consists of 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 contains graphics library (2D,3D) storage audio video and so on.

Note: the browser is a multi-process and multi-threaded architecture, so a brief look at the internal implementation will follow (without getting too far out of the front end).

Major browser components

Ps: Picture source network intrusion delete please leave a message.

  1. UserInterfaceUser interface – includes address bar, forward/back buttons, bookmark menu, etc. Every part of the display except for the page you requested in the browser’s main window belongs to the user interface.
  2. Browser Engine – Passes instructions between the user interface and the rendering Engine.
  3. Rendering Engine – Responsible for displaying the requested content. If the requested content is HTML, it parses the HTML and CSS content and displays the parsed content on the screen.
  4. Networking – Used for network calls such as HTTP requests. Its interface is platform independent and provides the underlying implementation for all platforms.
  5. UI Backend – Used to draw basic widgets such as combo boxes and Windows. It exposes a common interface that is platform-independent and uses the operating system’s user interface approach underneath.
  6. JavaScript Interpreter The JavaScript Interpreter. Used to parse and execute JavaScript code.
  7. Data Storage Data Storage. This is the persistence layer. Browsers need to keep various kinds of data, such as cookies, on hard drives. The new HTML specification (HTML5) defines the “Web database,” which is a complete (but lightweight) in-browser database.

What is the browser kernel?

In the browser, there is one of the most important modules, whose main function is to turn the page into visual (and more accurately, audible) image results, and this is the browser kernel. In general, it is also referred to as a rendering engine. Common kernels include:

  1. The Trident kernel stands for the browser Internet Explorer
  2. The Gecko kernel stands for Mozilla Firefox, the browser
  3. The WebKit kernel stands for Safari, the browser
  4. The Blink kernel stands for Chrome. Note that the Blink kernel is based on the pull out branch of the WebKit kernel (the Google team felt they were moving faster).
  5. Other kernel

JavaScript (js) engine

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

A JavaScript engine is a virtual machine that specializes in handling JavaScript scripts and is typically shipped with a Web browser. Do you know of any other JS engines besides V8? Almost the whole army was wiped out. :

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

V8 will be covered later

Rendering engine

Ps: Picture source network intrusion delete please leave a message.

To simplify it, it means:

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

It is worth noting that during parsing: the JS code may modify the DOM tree structure. If the parsing process is dependent on external resources, the loader will be used to load (asynchronous loading), but it will also wait until the loading is complete before building the DOM tree.

The last

Listen to next time how to predict the future.

First of all, I would like to review that today is generally a happy day. The circle of friends and social circle is much quieter and more peaceful than in previous years. So I decided to write an article to repay the majority of singles and you fighting on the front line.

There will be a follow-up to the agreed series of content. JS engine internal rendering engine network and so on these have to be written.

Happy 5,20 again. Hope tomorrow 5,21 to continue peaceful ~

“下课!”