How browsers work

As a front-end, we deal with browsers every day. But do we know the internal mechanism and working principle of browsers? I have seen an article about the working principle of the browser translated by someone else. It feels really good. The original Article is too long. Here I will sort out some basic and important content and share it with you.

How browsers work: Behind the scenes of modern Web browsers;

Http://kb.cnblogs.com/page/129756/#chapter1.

I. Introduction

Browsers can be considered to be the most widely used software. This article will introduce the working principle of browsers. We will see what happened on the Google homepage from entering Google.com in the address bar.

Browsers to be discussed

Today, there are five mainstream browsers: IE, Firefox, Safari, chrome, and opera.

This article will be based on some examples of open-source browsers-Firefox, chrome and safari. Safari is partially open-source.

According to the browser statistics of W3C (World Wide Web Consortium World Wide Web), Firefox, Safari and chrome have a market share of nearly May 2011 in 60%. (The original article was in October 2009, and the data has not changed much.) Therefore, it can be said that open-source browsers have occupied half of the browser market.

Main functions of the browser

The main function of the browser is to present the selected web resources. It needs to request resources from the server and display them in the browser window. The resource format is usually HTML, it also includes PDF, image, and other formats. The user uses uri (Uniform Resource Identifier of the Uniform Resource Identifier) to specify the location of the requested resource. For more information, see the network chapter.

The HTML and CSS specifications specify how the browser interprets HTML documents. W3C organizes and maintains these specifications. W3C is the organization responsible for formulating web standards.

The latest version of the HTML specification is html4 (http://www.w3.org/TR/html401/), HTML5 is still under development (Note: two years ago), the latest CSS Specification Version is 2 (http://www.w3.org/TR/CSS2 ), css3 is still being developed ).

Over the years, browser vendors have developed their own extensions, but their compliance with the specifications is not perfect. This poses a serious compatibility problem for Web developers.

However, the browser user interface is similar. Common User interface elements include:

• Enter the URI Address Bar
• Forward and backward buttons
• Bookmarks
• Used to refresh and pause the refresh and pause buttons of the currently loaded documents
• Button used to go to the home page

The strange thing is that there are no officially published regulations that define the user interface. These are the results of mutual imitation and continuous improvement between browser vendors over the years.

HTML5 does not specify the UI elements required by the browser, but lists some common elements, including the address bar, Status Bar, and toolbar. Some browsers have their own proprietary functions, such as Firefox download management. More information will be introduced later in the discussion of the user interface.

High level structure)

The main components of the browser include:

1. the user interface-including the address bar, the back/forward button, and the bookmarks directory, that is, what you see is not only used to display the main window of the page you requested.

2. browser engine-interfaces used to query and operate rendering engines.

3. Rendering Engine-used to display the request content. 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 platform-independent interfaces and can work on different platforms.

5. The UI backend is used to draw basic components such as a combination selection box and a dialog box. It has a common interface not specific to a platform and uses the user interface of the operating system at the underlying layer.

6. js interpreter-used to explain the execution of JS Code.

7. Data Storage-a persistent layer. Browsers need to store Cookie-like data on hard disks. HTML5 defines the WEB database technology, which is a lightweight and complete client storage technology.

Unlike most browsers, chrome allocates rendering engine instances for each tab. Each tab is an independent process.

Ii. Rendering Engine)

The rendering engine is responsible for rendering, that is, displaying the requested content in the browser window.

By default, the rendering engine can display HTML, XML documents, and images. It can also use plug-ins (a browser extension) to display other types of data, such as the PDF Reader plug-in, the PDF format can be displayed. A special chapter will be used to explain plug-ins and extensions. Here we will only discuss the main purpose of the rendering engine-display HTML and images after CSS is applied.

Rendering main flow)

The rendering engine first obtains the content of the requested document through the network, which is usually completed in 8 K blocks.

The following figure shows the basic process of the rendering engine after obtaining the content:

Parse HTML to build the DOM tree-> build the render tree-> layout the render tree-> draw the render tree

DOM tree Rendering

The output tree, that is, the resolution tree, is composed of DOM elements and attribute nodes. Dom is the abbreviation of Document Object Model. It is the object representation of HTML documents and serves as an external interface of HTML elements for JS calls.

The root of the tree is a "document" object.

The Relationship Between Dom and tags is basically one-to-one, for example, the following labels:

Will be converted to the following DOM tree:

The parsing Algorithm)

As discussed in the previous chapter, hmtl cannot be parsed by a general top-down or bottom-up parser.

The reason is:

1. the tolerance of the language itself

2. browsers have Fault Tolerance Mechanisms for some common illegal html

3. the parsing process is reciprocating, and the source code will not change during the parsing process. However, in HTML, the script tag contains the "document. write "may add tags, which indicates that the input is modified during parsing.

You cannot use the regular expression parsing technology. The browser customizes an exclusive Parser for HTML.

The parsing algorithm is described in the HTML5 specification. The algorithm consists of two stages: symbolic and build tree.

The process of lexical analysis is to parse the input into symbols. The HTML symbols include the start tag, end tag, attribute name, and attribute value.

After recognizing a symbol, the symbol reader passes it to the tree builder and reads the next character to identify the next symbol until all input is processed.

WebKit CSS parser (WebKit CSS parser)

WebKit uses the flex and bison parser to automatically generate a parser from the CSS syntax file. Recall the introduction of the parser. Bison creates a bottom-up parser and Firefox uses the top-down parser. They resolve each CSS file to a style sheet object, and each object contains CSS rules. CSS rule objects include selector and declaration objects, and other objects that comply with CSS syntax.

Position Scheme

There are three policies:

1. Normal-the object is located based on its position in the document, which means that it is located at the same position in the rendering tree and in the DOM tree, and is laid out based on its box model and size.

2. Float-the object is first laid out like a normal stream, and then moved left or right as much as possible.

3. Absolute-the position of an object in the rendering tree is independent of that in the DOM tree.

Static and relative are normal, absolute and fixed belong to absolute.

In static positioning, the default location is used without defining the location. In other policies, the author specifies the top, bottom, left, and right positions.

The box layout method is determined by the following items: box type, box size, positioning policy, and extended information (compared to the size and screen size ).

Box Type

Block box: A block, that is, a browser window has its own rectangle.

Inline box: it does not have its own block area, but is contained in a block area.

Block is formatted vertically, while inline is formatted horizontally.

The Inline box model is placed in the row or line box. Each line is at least as high as the highest box, when the box is aligned with the baseline, that is, the bottom of an element is aligned with a point on the other box except the bottom. The row height can be higher than the highest box. When the container width is insufficient, the row element is placed in multiple rows, which often occurs in a P element.

 

How browsers work