Overview of browser architecture


Overview of browser architecture

Browser is essentially an application software running under the computer operating system

Foreword knowledge


In short, the operating system can run multiple tasks at the same time.
The real parallel execution of multi tasks can only be implemented on multi-core CPU. However, in practical application, because the number of tasks is far more than the number of CPU cores, the operating system will automatically schedule many tasks to each core in turn, so that each task is executed alternately. Task 1 executes 0.01 seconds, switches to task 2, task 2 executes 0.01 seconds, and then switches to task 3 and executes 0.01 seconds This is repeated. On the surface, each task is executed alternately, but because the CPU is so fast, we feel like all tasks are executed at the same time.


When the code is not running, we call itprogram; running code becomesprocess
Process is the unit of system resource allocation, which is simply a running program;
When a process is started, the system will allocate address space to it (each process has its own independent address space, so it does not affect each other). A data table is established to maintain code segments, stack information and data segments, occupying a lot of resources
Processes have their own way of communication (IPC), ICP


Thread is the unit of system resource scheduling and the smallest unit of program execution;
Can be understood as the execution of code in the processPointer, threadExists in a process and executes any part of the programThe scheduling algorithm of the system determines how it works
Threads share the data in the process and use the same address space; therefore, CPU switches threads quickly, faster than operating processes;
The communication between threads is fast because they share global variables and static data under the same process

Browser structure

1. User interface
The menu bar, address bar, forward / backward button, bookmark directory, etc. in the browser, all places except the page display window belong to the user interface.

2. Browser engine
Browser engine is the core of communication between components. It transfers instructions between user interface and rendering engine. It provides the interface for the rendering engine to provide the given web address and the user browser operation (such as refresh, forward, backward, etc.) information on the user interface to the rendering engine; at the same time, the browser engine provides various information for the user interface, such as error prompt, resource download progress, etc. In addition, it can read and write data in the client’s local cache.

3. Rendering engine
The rendering engine is responsible for displaying the requested content. For example, if the requested content is an HTML file, it is responsible for parsing the HTML, CSS and other information in the file, and rendering the web content. The interior of rendering engine includes HTML parser, CSS parser and so on.

4. Networking
Processing network requests, such as HTTP requests for web pages, image resources, etc.

5. JavaScript interpreter
There are often JS scripts in web pages to dynamically operate web pages, which is parsed and executed by this JS engine. For example, chrome’s V8 engine, Safari’s JavaScript core engine, ie’s chakra

6. UI backend
The user interface described above is shown to the user. At the back end of the interface is the graphic library of the browser, which is used to draw the basic controls in the browser window, such as input box, button, radio button, combo box and window. The visual effects of different browsers are not the same, but the functions are basically the same.

7. Data persistence
Manage user data, store various data associated with browsing session on the hard disk, such as saving bookmarks, cookies, cache, preferences and other data, which can be called through the API provided by the browser engine.

Browser architecture

Browser is essentially a software (application program), using a multi process architecture, the software will create multiple processes when running, work together to ensure the normal operation of the program

  • Process classification:
Browser process (main process): manage user interaction (such as address bar, bookmark...), subprocess management, file storage, etc. (responsible for work outside the tab)

Rendering process (sandbox mode): responsible for page rendering, JS script execution, page event processing, etc. multiple rendering processes (tab pages) can be opened at the same time;
  >Both JS engine and render engine run under this process
  -Rendering thread (engine)
  -JS thread (engine)

Network process: provide network download function for rendering process and browser process

GPU (graphics processor) process: processes GPU tasks, responsible for 3D rendering

Plug in process: manage browser extensions, etc

Other processes

Recommended Today

Build HTTP service with C + + Mongoose

Mongoose source code address:https://github.com/cesanta/mo… Mongoose user manual:https://www.cesanta.com/devel… Mngoose set up HTTP service #include <string> #include “mongoose.h” using namespace std; static const char *s_http_port = “8000”; static void ev_handler(mg_connection *nc, int ev, void *ev_data) { struct http_message *hm = (struct http_message *) ev_data; if (ev == MG_EV_HTTP_REQUEST) { std::string uri; if (hm->uri.p && hm->uri.p[0] == ‘/’) […]