How the browser works

After entering a URL on the browser, a beautiful page appears in front of us. What happened in the middle? For an ordinary user, you may not need to think about this issue, but as a front-end developer or a student who wants to develop plug-ins, it is very necessary to master the working principle of the browser!

Main browser functions

Today we will discuss five mainstream browsers - IE, Firefox, Safari, Chrome and Opera. The functions and purposes of the browsers are the same, but there are some differences in the parsing process. So what are the main functions of the browser?

1. User interface (this is not important) - including the address bar, back/forward buttons, bookmark directory, etc., that is, the other parts you see except the main window used to display the page you requested.

2. Browser Engine - an interface used to query and operate the rendering engine. It is also used to operate the browser’s data storage.

3. Rendering engine - used to displayrequested content. For example, if the requested 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 combination selection boxes and dialog boxes. It has a universal interface that is not specific to a certain platform. The bottom layer uses the user interface of the operating system.

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 similar to cookies in the hard disk. HTML5 defines web database technology, which is a lightweight and complete client-side storage technology

Figure 1: Main components of the browser

It should be noted that unlike most browsers, Chrome allocates its own rendering engine instance to each Tab, and each Tab is an independent process.

Reference page:

Thunderbolt Tutorial_-HTML Tutorial-HTML Tutorial

Thunderbolt Tutorial_-HTML Tutorial-HTML Introduction

Thunderbolt Tutorial_-HTML Tutorial-HTML Basics

Thunderbolt Tutorial_-HTML Tutorial-HTML Elements

Thunderbolt Tutorial_-HTML Tutorial-HTML Attributes

Thunderbolt Tutorial_-HTML Tutorial-HTML Title

Thunderbolt Tutorial_-HTML Tutorial-HTML Paragraph

Thunderbolt Tutorial_-HTML Tutorial-HTML Link

Piliyuan Tutorial_-HTML Tutorial-HTML Head http://www.piliyuan.com/HTML/22.html

Piliyuan Tutorial_-HTML Tutorial-HTML CSS http://www.piliyuan.com/HTML/23.html

Piliyuan Tutorial_-HTML Tutorial-HTML Image http://www.piliyuan.com/HTML/24.html

Piliyuan Tutorial_-HTML Tutorial-HTML Table Introduction http://www.piliyuan.com/HTML/27.html

Piliyuan Tutorial_-HTML Tutorial-HTML List http://www.piliyuan.com/HTML/28.html