1. The principle of explanation usually said on the Internet
Analyze the DNS address from your input url and find the corresponding web resource to download through the dns server address. After downloading, the page starts to render the page
Have you ever wondered how the page is rendered?
How does the page load css files, html files and js files?
These are about the browser's kernel
2. The kernel execution principle of the browser
The browser kernel execution is divided into two engines, one is the browser's typesetting engine, and the other is the js engine
If the typesetting engine executes css and HTML. Let me tell you about the typesetting engine
Introduction to some typesetting engines
(1) Trident
Triident is the engine used by the Internet Explorer (IE) browser. Trident is designed as a functional module in the Windows operating system, enabling developers of other software to easily add web browsing functionality to their applications.
Many domestic dual-core browsers provide a "compatibility mode", which uses the Trident engine. Its representative software includes Aoyou, Window of the World, QQ Browser, Cheetah Safe Browser, 360 Safe Browser, 360 Speed Browser, etc.
(2) EdgeHTML
Microsoft provides a new browser Microsoft Edge in the Windows 10 operating system, the most notable feature of which is the use of the new engine EdgeHTML. EdgeHTML has greatly improved in terms of speed, deleted outdated old technical support codes on the basis of Trident, and added many technical support for modern browsers.
(3) Gecko
Gecko is the engine used by Mozilla FierFox (Firefox browser). Its characteristics are that the source code is completely open and can be developed to a high degree. Programmers all over the world can write code and add functions for it. Gecko was originally developed by Netscape and is now maintained by the Mozilla Foundation. Gecko is cross-platform and supports running on operating systems such as Windows, Linux, and macOS.
(4) WebKit
WebKit is an open source browser engine. The WebCore typesetting engine and JavaScriptCore engine included in it come from KHTML and KJS of the KDE project team. After Apple adopted KHTML as the engine for developing the Safari browser, it derived the WebKit engine and released the source code of WebKit according to the open source agreement. WebKit has the characteristics of high efficiency and stability, good compatibility, clear source code structure, and easy maintenance. The Google Chrome browser also used the WebKIt engine.
(5) Blink
Blink is a browser typesetting engine developed by Google and Opera Software ASA. Google uses this engine as part of the open source browser Chromium project. Blink is a fork of the WebCore component in WebKit and is used in browsers such as Chrome (version 28 and later), Opera (version 15 and later).
At present, most browsers in China have adopted the WebKit or Blink kernel, and some dual-core browsers use it as the "quick mode" kernel. In mobile devices, Apple IOS platforms such as iPhone and iPad use WebKit; the Android system browser kernel before Android 4.4 is WebKit, which is changed to Blink in Android 4.4 system.
About the browser's js engine
Chrome V8
Firefox SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）
Safari Nitro（4-）
Opera Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）
IE -> Edge JScript (IE3.0-IE8.0 / Chakra (after IE9+)
Remarks: SpiderMonkey is the first JS engine, written by Brendan Eich, the father of JavaScript, when he was at Netscape. In a sense, Firefox is orthodox.
Here comes the point, how do these engines work?
1. First, let’s talk about the execution order of the typesetting engine
When the browser accesses the server, the first thing to start downloading is index.html by default, and it will be executed from this file.
First, it will parse the html, find the imported css, start parsing the css, find js and download it, execute the js parsing to stop the parsing of the html, when the js parsing is completed, it will parse the html again, when parsing the html, it will First parse html into DomTree
Of course, at this time, css will also be parsed into css style rules (StyleRules). When forming their own dom numbers and cssom, js will complete an html operation and css operation before the formation process, and then form their own trees , after the whole analysis is completed, it will be combined into a rendering tree (randeTree). When a rendering tree is used, there will be another engine, the layout engine (layout engine, to layout and layout different displays), which also triggers a knowledge Point, redrawing will definitely cause rearrangement, and the principle of redrawing will not cause redrawing
After these operations are completed, we have explained the entire workflow of the typesetting engine
2. Let’s talk about the principle of js engine
Let's take Google's V8 engine as an example
If you have read the source code of the v8 engine, it is not difficult to find that the js engine is executing js
The js engine will parse the js code into an AST abstract syntax tree through lexical analysis and syntax analysis. What is it similar to?
If you define a variable var age = "10";
var name =10;, it will be lexed like this
Then through the IGNITION function in V8, the AST grammar book is translated into bytecode, and then the bytecode is translated into machine code that can be executed by different types of CPUs, and handed over to the CPU for processing. Before the bytecode is translated, the Ignition function also One thing I can do is to optimize and store some commonly used js codes through the Turtofun function, so that I don’t need to compile this code when I call it next time. Here is a knowledge point
Why do we use typescript? Because typescript will specify your input parameter type or you define variable type, it can optimize the efficiency in the process of v8 parsing js. Of course, we also expect the official js to be able to meet this constraint, so typescript will be eliminated.
run away
So far js and elements have been rendered and parsed