Browser engine-Interface for querying and operating the rendering engine

Rendering engine – Responsible for displaying the requested content. For example, when requesting HTML, it will be responsible for parsing HTML, CSS and displaying the results in the window

Network – Used for network requests, such as HTTP requests. It includes platform-independent interfaces and platform-independent implementations

UI backend – drawing basic components, such as combo boxes and windows. It provides a platform-independent interface and uses the corresponding implementation of the operating system internally

JS interpreter/js engine—-Used to parse and execute JavaScript code

Data storage persistence layer-The browser needs to store all data on the hard disk, such as cookies. The new HTML5 specification stipulates a complete (though lightweight) database web database in a browser

The core of the browser is two parts: rendering engine and JavaScript interpreter (also known as JavaScript engine). At first, the rendering engine and the js engine were not distinguished very clearly. Later, the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine.

JavaScript must also contain DOM and BOM in the browser implementation. Web browsers generally use public APIs to create host objects that are responsible for reflecting DOM objects into JavaScript. The JS engine is responsible for interpreting, compiling and executing JavaScript, so that the web page can achieve some dynamic effects.

BOM is the browser object model, used to obtain or set the properties and behavior of the browser, for example: create a new window, get Screen resolution, browser version number, etc.

DOM is the document object model, used to get or set the attributes of the tags in the document, for example, get or set the value of the input form. We know that HTML is composed of tags, tags set tags. JavaScript can get through the DOM which tags are there, what are the attributes in the tags, what is the content, etc…

Rendering engine

The main rendering engine The function is to “render” the webpage from the code into a flat document that the user can visually perceive. Different browsers have different rendering engines.

Firefox: Gecko engine
Safari: WebKit engine
Chrome: Blink engine
IE: Trident engine
Edge: EdgeHTML engine

Rendering The engine processes web pages and is usually divided into four stages.

Parsing code: HTML code is parsed as DOM, CSS code is parsed as CSSOM (CSS Object Model)
Object synthesis: Combine DOM and CSSOM into a render tree
Layout: Calculate the layout of the render tree (layout)
Draw: Draw the render tree Go to the screen
The above four steps are not strictly performed in sequence, often the second and third steps have already begun before the first step is completed. Therefore, you will see this situation: the HTML code of the web page has not been downloaded yet, but the browser has already displayed the content.

JavaScript engine

The main function of the JavaScript engine is to read the JavaScript code in the web page, and run it after processing.

This section mainly introduces how the JavaScript engine works.

Note: Chrome browser is different from other browsers. Chrome uses multiple rendering engine instances, One for each Tab page, that is, each Tab is a independent process.

Emphasize again, javascript is single-threaded operation, don’t be confused by functions like setTimeout() and setInterVal() and mistakenly think it is multi-threaded.

Generally speaking, every time the