Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how the web browser works". In the daily operation, I believe that many people have doubts about the working principle of the web browser. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how the web browser works". Next, please follow the editor to study!

Web browsers access Web server resources by sending web requests to URL and display them interactively. Basic operations include acquisition, processing, display, and storage. Common browsers include Internet Explorer, Firefox, Google Chrome, Safari and Opera.

Browser architecture diagram

The browser mainly consists of the following parts:

User interface

Browser engine

Rendering engine

Data storage layer

UI BackEnd

JavaScript parser (script engine)

Network layer

User interface

This is the area where users interact with browsers. There is no specific standard for the appearance of browsers, and the HTML5 specification does not specify what UI elements should look like, but lists some common elements: address bar, personal information bar, scroll bar, status bar, toolbar, and so on.

Browser engine

It provides the interface between UI and the underlying rendering engine, queries and controls the rendering engine according to user interaction, provides a method to initialize loading URL, and is responsible for reloading, returning and advancing operations.

Rendering engine

The rendering engine is responsible for displaying web page content on the screen. The main job of the rendering engine is to parse HTML. The rendering engine can display HTML, XML, and pictures by default, and can also support other data types through plug-ins or extensions.

Rendering engine working process

Modern browsers use different rendering engines:

Gecko:Firefox

Webkit:Safari

Blink:Chrome, Opera (version 15 or above).

You can refer to this article: are various browser engines foolishly confused? Finally, someone made it clear!

The rendering process of web content is roughly as follows:

Convert HTML data to DOM

The request content from the network layer is received in the rendering engine (usually a block of 8 kb), and then converts the original bytes into characters in the HTML file (based on character encoding). Then the lexical analyzer performs lexical analysis and decomposes the input into various token. During tagging, each start and end tag in the file is recorded. It knows how to remove irrelevant characters, such as spaces and newline characters.

Then, the parser carries on the syntax analysis, and constructs the parsing tree by analyzing the structure of the document and applying the rules of speech rules. The parsing process is iterative. It requests a new token from the lexical analyzer, and if the syntax rules match, the token is added to the parsing tree. Then request another token. If there are no matching rules, the parser will store the token internally and keep requesting new token until it finds a rule that matches all the internally stored token. If no rule is found, the parser throws an exception, indicating that the document is invalid and contains syntax errors.

These nodes are linked to each other in the DOM (document object Model) tree data structure to establish a parent-child relationship and a neighboring sibling relationship.

Dom-tree

Convert CSS data to CSSOM

The raw bytes of CSS data are converted into characters, token, nodes, and eventually CSSOM (CSS object model). The hierarchical nature of CSS determines what style the element will apply. The style data for an element can come from the parent element (through inheritance) or can be set directly on the element. Browsers need to recursively traverse the CSS tree structure to determine the style of a particular element.

Cssom-tree

DOM and CSSOM constitute the render tree

The DOM tree contains the relationship information between the HTML elements, and the CSSOM tree contains the style information for these elements. Starting from the root node, the browser traverses each visible node. Some nodes are hidden (controlled by CSS) and do not appear in the rendered results. For each visible node, the browser finds the relevant rules defined in CSSOM to match, and eventually these nodes appear in the render tree with content and style.

Render-tree

Overall Arrangement

Next, let's lay out the content. The actual size and location of the content need to be calculated before it can be rendered to the page (browser viewport). This process is also called reflow. HTML uses a flow-based layout model, which means that in most cases, geometric positions are calculated at once (content size or location changes and needs to be recalculated). This process starts with the document root element and is done recursively.

Draw

Display the content on the screen by iterating through each renderer and calling the paint method. The drawing process can be global (drawing the entire tree) or incremental (the rendering tree validates a rectangular area on the screen), and the operating system generates drawing events on these specific nodes, and the entire tree is not affected. Painting is a gradual process, in which part is parsed and rendered, and the process continues to process the rest.

JavaScript parser (JS engine)

JavaScript is a scripting language that dynamically updates Web content, controls multimedia and animation, and so on, which is done through the browser's JS engine. DOM and CSSOM provide JS interfaces, which can be modified through JS. Because the browser is not sure what some JS will do, it pauses building the DOM tree as soon as it encounters a script tag.

The JS parser parses as soon as it receives the code from the server. The code is converted into an object representation that the machine can understand. Objects that hold all parsing information are called abstract grammar trees (AST), and these objects are converted into bytecode by the parser. This compilation method is called Just In Time (JITs), where JavaScript is downloaded from the server and compiled in real time on the client side. The parser and compiler are combined, the parser immediately processes the source code, the compiler generates machine code, and the client operating system can run directly.

JS engines of different browsers

Chrome: V8 engine (Node JS was built on top of this)

Mozilla: Spider Monkey (formerly known as' Squirrel Fish')

Microsoft Edge: Chakra

Safari: Nitro

UI background

Used to draw basic controls, such as check boxes and windows. The bottom layer uses the user interface method of the operating system to expose the common interface, independent of the platform.

Data storage layer

This is the persistence layer that helps browsers save some data (such as cookies,session storage,indexed DB,Web SQL, bookmarks, user preferences, etc.). The HTML5 specification puts forward the complete database function of the browser side.

Network layer

This layer deals with all kinds of network communications for browsers. Browsers use a variety of communication protocols to obtain network resources, such as HTTP, HTTPs, FTP and so on.

The browser uses DNS to parse URL. These resolution records are cached in browsers, operating systems, routers, or ISP. If the requested URL is not in the cache, the DNS server of ISP first initiates a DNS query to find the IP address of the server. After finding the correct IP address, the browser uses a specific protocol to establish a connection with the server. The browser sends a SYN packet to the server, asking if the server has opened a TCP connection. The server uses the SYN/ACK packet response as the reply to the previous SYN.

After the browser receives the reply, it sends the ACK packet to the server. The TCP connection is established through such a three-way handshake. Once the connection is established, the data can be transferred. The relevant requirements of HTTP protocol, including the rules of request and response, must be complied with in the process of data transmission.

Browser comparison

There are different browsers on the market today, and although the core functions are all the same, there are many differences between them. Including platforms (Linux,Windows,Mac,BSD and other Unix systems), protocols, user interfaces, HTML5 support, open source, ownership, and so on.

At this point, the study on "how web browsers work" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.