Lesson 01-Comprehensive understanding of Web standards and browser core engines

Web, web pages, browsers

Web

Web (World Wide Web) is the global wide area network, also known as the World Wide Web.

What we often call the Web end is the web end.

Web pages

Web pages are the basic elements that make up a website. Web pages are mainly composed of elements such as text, images and hyperlinks. Of course, in addition to these elements, web pages can also contain audio, video, and Flash.

After we enter the URL on the browser, any page that opens is a web page.

Browser

The browser is the platform on which the web page runs. Common browsers include Google (Chrome), Safari, Firefox, IE, Edge, Opera, etc.

Web Standards

W3C Organization

W3C: World Wide Web Consortium, an organization (organization) used to formulate web standards.

W3C World Wide Web Consortium is the most famous international standardization organization. Since its establishment in 1994, it has released nearly 100 standards related to the World Wide Web and has made outstanding contributions to the development of the World Wide Web.

The W3C organization is similar to the United Nations in the real world.

Why should we follow WEB standards? Because many browsers have different browser kernels, the results of page parsing may be different, which adds unnecessary workload to developers. Therefore, it is necessary to specify a unified standard.

Web Standards

Web Standards: Specifications to be followed when making web pages.

Web standards are not a single standard, but a collection of standards developed by the W3C organization and other standardization organizations.

1. Web standards include three aspects:

• Structural standards (HTML): used to organize and classify web page elements.
• Presentation standards (CSS): used to set the layout, color, size and other appearance styles of web page elements.
• Behavior standards (JS): used to define the interaction and behavior of web pages.

According to the above Web standards, the Web front end can be divided into three layers, as follows.

2. The Web front end is divided into three layers:

• HTML (HyperText Markup Language): Hypertext Markup Language. Describes the structure of the page from a semantic perspective. Equivalent to the human body structure.
• CSS (Cascading Style Sheets): Cascading Style Sheets. Beautify the style of the page from an aesthetic perspective. Equivalent to people’s clothes and dressing.
• JS: JavaScript. Describes the behavior of the page from an interactive perspective. Equivalent to human actions, making people feel alive.

3. Let me give you an example:

HTML is equivalent to the structure of a person’s body:

CSS is equivalent to people’s clothes and dressing:

JS is equivalent to people’s behavior:

Browser

Common browsers

Browser is the platform on which web pages run. Common browsers include Google (Chrome), Safari, Firefox, IE, Edge, Opera, etc. What we need to focus on is Chrome browser.

Composition of browser

Browser is divided into two parts:

• 1. Rendering engine (ie: browser kernel)
• 2. JS engine

Rendering engine (browser kernel)

The “rendering engine” used by the browser is also called “browser kernel”, which is used to parse HTML and CSS. The rendering engine determines how the browser displays the content of the web page and the format information of the page.

The rendering engine is the root cause of browser compatibility issues.

The English name of the rendering engine is Rendering Engine. In layman’s terms, its function is to read the content of the web page, calculate the display method of the web page and display it on the page.

The kernels of common browsers are as follows:

Browser	Kernel
Chrome	Blink
Oupeng	Blink
360 Security Browser	Blink
360 Speed ​​Browser	Blink
Safari	Webkit
Firefox	Gecko
IE	Trident

Note: 360’s browser used to use the Trident kernel of the IE browser, but now it has been changed to the Blink kernel of the Chrome browser.

Introduction to the four kernels:

1. Trident: An engine developed by Microsoft. Its IE products are all driven by it, and many other browsers also use it as the kernel.
2. Gecko: An open source rendering engine written in C++, powerful and rich in functions. It can support many complex web page effects and browser extension interfaces. FireFox is a representative. It has good support for w3c standards, and is very powerful in development and debugging, but the startup speed is not very good;
3. WebKit: Developed by Apple based on KHTML, it parses web pages faster, second only to Presto, but has poor fault tolerance, and non-standard web pages cannot be displayed normally. The representative browsers that use it as the core development are Safari and Chrome;
4. Presto: Started by Opera Software, it is recognized as the fastest rendering engine. When processing scripting languages ​​such as JS scripts, it will be about 3 times faster than other kernels, but there are also some problems with speed, that is, it loses some web page compatibility;

JS engine

Also known as JS interpreter. It is used to parse JavaScript code in web pages, process it and then run it.
The browser itself does not execute JS code, but executes JS code through the built-in JavaScript engine (interpreter). When the JS engine executes the code, it interprets each source code line by line (converts it into machine language), and then the computer executes it. Therefore, JavaScript is classified as a scripting language and is interpreted and executed line by line.

The JS engines of common browsers are as follows:

Browser	JS Engine
Chrome / Oupeng	V8
Safari	Nitro
Firefox	SpiderMonkey (1.0-3.0) / TraceMonkey (3.5-3.6) / JaegerMonkey (4.0-)
Opera	Linear A (4.0-6.1) / Linear B (7.0-9.2) / Futhark (9.5-10.2) / Carakan (10.5-)
IE	Trident

How browsers work

Enter the URL in the address bar

The browser looks for the IP address of the domain name based on the entered URL. The DNS lookup process is as follows:

1. Browser cache: The browser will cache DNS records for a period of time. The default cache time for different browsers is different. The default for IE is 30 minutes, and the default for Firefox is 1 minute.
2. System cache: If the required cache record is not found in the browser cache, the browser will search in the system cache.
3. Router cache: If it is not found in the system cache, the request will be sent to the router and searched in its DNS cache.
4. ISP cache: If it is not found in the router cache, the request will be sent to the ISP’s DNS cache server and searched in its records.
5. Access the root domain name server: If it is not found in the ISP cache, the ISP will recursively search the root domain name server, find the corresponding record and return it.

The browser establishes a TCP connection with the corresponding Web server and sends an HTTP request. After receiving the request, the Web server performs a series of analysis and processing (the detailed process of HTTP request response will be analyzed later) and returns the HTML file.

Browser parses HTML

The browser receives the HTML file returned by the server and parses the <head> tag:

1. Some configuration tags about the page, such as <title>, <meta>, <base>, etc., will be analyzed later, and these will set the page attributes.
2. When encountering inline CSS and JS, it will be parsed and executed immediately.
3. When encountering external CSS and JS, it will request related resources concurrently, and then parse and execute. Different browsers have different default concurrent connections for the same domain at the same time, generally within 10.
4. Then, the browser starts to parse the content in <body>:

When encountering tags that need to obtain content from other addresses, such as and <script>, it will request related resources concurrently.

When the HTML parser encounters the <script> tag, it must execute the script by default first, and then resume document parsing and rendering. The execution of the script is synchronous and blocked only by default. The <script> tag can change the way the script is executed through the defer and async attributes. Using the defer and async attributes, the browser can continue to parse and render the document while downloading the script. The defer attribute allows the browser to delay the execution of the script until the document is loaded and parsed. The async attribute allows the browser to execute the script as quickly as possible without blocking the document parsing while the script is downloaded. If the <script> tag has both attributes, browsers that support both will execute the async attribute and ignore the defer attribute. Deferred scripts are executed in the order in which they appear in the document, while asynchronous scripts are executed after they are loaded and may be executed out of order.

Browser rendering principle

Introduction to rendering engines

The browsers – Firefox, Chrome and Safari are built on two rendering engines. Firefox uses Geoko – Mozilla’s self-developed rendering engine, and Safari and Chrome both use webkit.

Main rendering process

The rendering engine first obtains the content of the requested document through the network, usually in 8K blocks. The following is the basic process of the rendering engine after obtaining the content: Parse HTML to build a DOM tree -> build a render tree -> layout the render tree -> draw the render tree

Here are a few concepts to help you understand:

1. DOM Tree: The browser parses HTML into a tree-shaped data structure.
2. CSS Rule Tree: The browser parses CSS into a tree-shaped data structure.
3. Render Tree: DOM and CSSOM are merged to generate a Render Tree.
4. layout: With the Render Tree, the browser can already know which nodes are in the web page, the CSS definitions of each node, and their subordinate relationships, so as to calculate the position of each node on the screen.
5. painting: According to the calculated rules, the content is drawn to the screen through the graphics card.
6. reflow: When the browser finds that a certain part has changed and affected the layout, it needs to go back and re-render. Insiders call this fallback process reflow. Reflow will recursively start from the root frame \ and calculate the geometric size and position of all nodes in turn. Reflow is almost inevitable. Some popular effects on the interface now, such as the folding and unfolding of tree directories (essentially the display and hiding of elements), will cause browser reflow. Mouse rollover, click… As long as these behaviors cause changes in the properties of certain elements on the page, such as the area occupied, positioning method, margins, etc., they will cause the inside, surrounding, and even the entire page to be re-rendered. Usually we cannot predict which part of the code the browser will reflow, and they all affect each other.
7. repaint: When changing an element’s background color, text color, border color, etc. without affecting its surrounding or internal layout, part of the screen is redrawn, but the element’s geometric dimensions remain unchanged.

Note:

1. Nodes with display\:none will not be added to the Render Tree, while visibility: hidden will. Therefore, if a node is not displayed at the beginning, it is better to set it to display\:none.
2. display\:none will trigger a reflow, while visibility\:hidden will only trigger a repaint because no position change is found.
3. In some cases, such as modifying the style of an element, the browser will not reflow or repaint immediately, but will accumulate such operations and then reflow once, which is also called asynchronous reflow or incremental asynchronous reflow. However, in some cases, such as resizing the window, changing the default font of the page, etc. For these operations, the browser will reflow immediately.
4. With Render Tree, the browser already knows which nodes are in the web page, the CSS definition of each node, and their subordinate relationships. The next step is called layout, which means calculating the position of each node on the screen.
5. The next step is drawing, which is to traverse the render tree and use the UI backend layer to draw each node.

In Gecko, formatted visual elements are called “frame trees”. Each element is a frame. Webkit uses the term “render tree”, which consists of “render objects”. Webkit uses “layout” to represent the layout of elements, while Gecko calls it “reflow”. Webkit uses “Attachment” to connect DOM nodes and visual information to build a rendering tree. A small non-semantic difference is that Gecko has an additional layer between HTML and DOM trees, called “content sink”, which is a factory for creating DOM objects. Although Webkit and Gecko use slightly different terms, the process is basically the same, as follows:

1. The browser will parse HTML into a DOM tree. The construction process of the DOM tree is a deep traversal process: after all the child nodes of the current node are constructed, the next sibling node of the current node will be constructed.
2. Parse CSS into CSS Rule Tree.
3. Construct Rendering Tree based on DOM tree and CSSOM. Note: Rendering Tree is not the same as DOM tree, because some things like Header or display\:none do not need to be placed in the rendering tree.

Main components of the browser

1. User interface – including address bar, back/forward buttons, bookmark directory, etc., that is, what you see except the main window used to display the page you requested.
2. Browser engine – interface used to query and operate the rendering engine.
3. Rendering engine – used to display the content of the request. For example, if the request content is HTML, it is responsible for parsing HTML and CSS and displaying the parsed results.
4. Network – used to complete network calls, such as HTTP requests. It has a platform-independent interface and can work on different platforms.
5. UI backend – used to draw basic components such as combo boxes and dialog boxes. It has a general interface that is not specific to a certain platform and uses the user interface of the operating system at the bottom.
6. JS interpreter – used to interpret and execute JS code.
7. Data storage – belongs to the persistence layer. The browser needs to save various data such as cookies on the hard disk. HTML5 defines web database technology, which is a lightweight and complete client storage technology.

Browser rendering process diagram:

1. User Interface User interface, the browser we see
2. Browser engine Browser engine, used to query and operate the rendering engine
3. Rendering engine Used to display the content of the request, responsible for parsing HTML, CSS
4. Networking Network, responsible for sending network requests
5. JavaScript Interpreter JavaScript parser, responsible for executing JavaScript code
6. UI Backend UI backend, used to draw similar combo boxes and pop-up windows
7. Data Persistence Data persistence, data storage cookies, sessionStorage in HTML5