The most common contact of front-end personnel is the browser, whether we usually write a page, F12 view Element, or write JS function debugging Console, or debugging interface used by the Network. But our browser still has what thing, because this is also very big content, so built a special column to introduce, today first talk about his constitution, for the future specific principle mechanism to do the foundation.

The main functions of the browser

The main function of the browser is to display the web resources entered by users in the form of graphics. The common resource format is HTML. A user uses a Uniform Resource Identifier (URI) to specify the location of the requested Resource. So what does the browser actually do after the user enters the URL? We need to know what browsers have first.

Browser architecture

  1. The user interface
  2. Browser engine
  3. Rendering engine
  4. network
  5. According to the backend
  6. JS interpreter
  7. Data persistence layer

User Interface

Other than the page displayed in the browser window, everything the user sees belongs to the user interface, such as: address bar, bookmarks, preferences, user avatar (login enabled browser), forward/backward/refresh, downloader, etc. Is the user and the browser itself interactive functional components.

Browser Engine

It is an interface of the rendering engine that transmits instructions between the user interface and the rendering engine. It is used to load the specified URI, and achieve forward, backward, refresh, and other functions. Used to query/modify render engine Settings.

Rendering Engine (2D)

It is the most important module of the browser, responsible for generating visual interfaces with specified URIs and parsing RESOURCES such as HTML, CSS, and images. In fact, the parsing process is the most important thing to understand and pay attention to: backflow, redraw, CSSOM, DOM tree, the sequence of execution by different threads in a process, etc. These I will write in succession, also please pay attention to look forward to. Rendering engines are also known as browser kernels, and there are five common kernels on the market:

  1. Common Trident browsers: IE, 360 Secure Browser (1.0-5.0 for Trident, 6.0 for Trident+Webkit) Cheetah browser.
  2. Common browser for Gecko: Firefox
  3. Presto common browser: The Opera browser was used in the early days, but is now deprecated due to compatibility issues.
  4. Webkit common browsers: Google Chrome, Safari, mobile browser.
  5. Blink Common browser: Google, Opera, is jointly developed by Google and Opera.

Networking

Implement HTTP/HTTPS, FTP and other file transfer protocols. Can be converted between different character sets. You can also cache recently retrieved resources. 1. Browser cache mechanism, the most important is HTTP cache, in which the strong cache, negotiation cache are respectively what, how to implement. 2. HTTP/HTTPS is different from GET and POST requests

Display Backend

Draw user interface control collection, combo box (drop-down box, list box), font collection, etc. For example, styles of different types in input use the operating system’s user interface at the bottom.

JS interpreter

Used to interpret and execute JavaScript code. Prior to ES6, rendering engines and JS interpreters worked together. One of the most common examples is Webkit, which consists of the WebCore layout engine and JavaScriptCore parsing engine, but Chrome uses its own V8 engine for script parsing. 1. Render engine and Js interpreter work together, event loop. 2. Garbage collection mechanism in Js interpreter. 3. How the interpreter, parser, and optimizer compiler works in V8. When Js is executed, the parser parses the AST, bytecode, lexical parsing, syntax parsing, and so on.

Data Persistence

1. Advanced data such as bookmarks, toolbar Settings, etc. 2. Cookies, security certificates, cache and other low-level data. We should pay more attention to their caches: Local Storage, Session Storage, indexedDB, Web SQL. These are defined in the HTML5 specification. I’ll write a chapter about them later.

What does the browser actually do after the user enters the URL?

This is also a classic interview question. The answers can be coarse or subtle. Here roughly speaking, because details can be opened up a lot of articles. 1.DNS domain name resolution. 2. Establish a TCP connection. 3. Send an HTTP request. 4. The server processes the request. 5. Return the response result. 6. Close the TCP connection. 7. Browser parses HTML and renders layout;

DNS Domain name Resolution

DNS resolution attempts to change the semantic domain name into the IP address of the server. 1. Check whether the DNS cache in the browser has an IP address corresponding to the domain name. 2. The operating system is not queried. 3. If there is no corresponding IP address, the system sends recursive or iterative query requests to the root DNS server, top-level DNS server, and authoritative DNS server until one or a group of IP addresses is found and returned to the browser.

Establishing a TCP Connection

After finding the corresponding IP address, you need to establish a TCP connection with the server through a three-way handshake. We can talk about the differences and features between TCP three-way handshake, four-way wave, and UDP connectionless protocol.

Sending an HTTP request

The browser starts sending an HTTP request. A request message consists of a request line, a request header, a blank line, and an entity (the Get request does not have one).

The server processes the request

After the browser request packet reaches the server, the server interface processes the request packet, executes the code corresponding to the interface, and responds to the client after the processing is complete.

Return response result

Browser processing returns the result. When a client sends an Accept header (the data type the client expects, which is automatically wrapped by the browser), if the server returns any of the content-Types, the browser can parse it and display it directly on the web page.

Disabling a TCP Connection

  1. The server sends an Alert packet to the client. The type of the Alert packet is Close Notify. The Alert packet notifies the client that it will no longer send data and is about to Close the connection.
  2. The server actively closes the connection by calling the close function and sends the packet with the FIN flag bit and serial number M to the client.
  3. The client acknowledges receiving the packet and sends the packet with the ACK flag bit to the server. The acknowledgement number is M +1.
  4. After sending all data, the client sends the packet with the FIN flag bit and the serial number n to the server.
  5. The server acknowledges receipt of the packet and sends the packet with the ACK flag bit and serial number N +1 to the client. The client enters the CLOSED state immediately after receiving the confirmation group. At the same time, the server enters the CLOSED state after waiting for two Maximum Segment Lifetime (MSL).

The browser parses the HTML and renders the layout

The browser parses the HTML, generates the DOM tree, parses the CSS, generates the CSS rule tree, and then generates the render tree from the DOM tree and the CSS rule tree. This is where the rendering engine comes in, and we’ve devoted an article to it. \