We use browsers almost every day. When we type a url into the browser’s address bar or open a web page with a link, the browser displays the target content. How is the process, for the front-end developer, it is necessary to know is, because of a more detailed understanding of the principle of operation of the browser, can help us better understand the cause of the best development practices, and choose a better implementation scheme in the development, such as how to load the JS script, web performance best how to tune, and so on.
Browser architecture
First to understand the main structure of the browser, refer to how Browser Work, as shown in the figure
- User interface The menu bar, the address bar, the forward/back buttons, the bookmarks directory, and everything else in the browser except the page display window belongs to the user interface.
- Browser Engine The browser engine is the core of communication between components, passing instructions between the user interface and the rendering engine. Provide interface for rendering engine to provide information for rendering engine on user interface given url, user browser action (such as refresh, forward, backward, etc.); At the same time, the browser engine provides various messages to the user interface, such as error messages and resource download progress. Also, it can read and write data in the client’s local cache.
- 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. So inside the rendering engine there are Html parsers, CSS parsers, and so on.
- The network module handles network requests, such as HTTP requests for web pages, image resources, etc.
- JavaScript engine web pages often dynamic JS script operation web pages, is to rely on this JS engine to parse execution. For example, the V8 engine of Chrome and the JavaScriptCore engine of Safari.
- In front of the backend interface is introduced the user interface of the display to the user, the backend interface is the graphics library browser, used to draw the basic internal control a browser window, such as the input box, buttons, radio buttons, combo box and window, etc., the visual effect of different browser rendering don’t want to, but the basic functions are the same.
- Data store Manages user data and stores various data associated with browsing sessions on hard disks, such as bookmarks, cookies, caches, preferences, etc., which can be called through the API provided by the browser engine.
The core content of this is the rendering engine and JS engine, which will be introduced in detail later. It is important to understand that not all browser rendering engines and JS engines are the same, depending on the technical implementation of the browser manufacturer, common browser rendering engines and JS engines are as follows:
Multi-process architecture for browsers
First, we know that the browser application is a separate process from the operating system. If you use a Mac computer, open Chrome and view the Chrome process information in the Activity Monitor.
What about the inner workings of browser apps? Is it a single-process multithreaded model, a multi-process multithreaded model, or some other model architecture? Here’s the answer. Modern browsers use a multi-process architecture, consisting of the following five processes:
- Browser process The browser process is the main thread of the browser. It is responsible for page management, page creation, page closing, page forward and backward, and network resource download management. This process corresponds to the browser engine in the preceding browser.
- Renderer process is the core process of the browser, responsible for page rendering, JS script execution, page event processing, etc., corresponding to the above rendering engine and JS engine, in the browser, each Tab window page corresponds to a renderer process, so a browser can contain multiple renderers.
- The GPU process is responsible for GRAPHICS Processing Unit (GPU) rendering and interface drawing. There is only one browser application.
- Plug-in processes Plug-ins installed by the browser (extensions). Each plug-in creates a process, such as gold digging plug-ins, Evernote plug-ins, etc., so a browser can contain multiple plug-in processes.
- The web process is responsible for the network request related operations, and there is only one browser application.
To understand these processes, you can open the Chrome Task Manager and view all the processes running in the current browser, as well as the memory usage and process ID of each process.
- 1 browser process
- One GPU process
- One network process
- 3 renderers (three tabs open, one for each TAB)
- Three extender processes
The browser multi-process architecture has the following advantages:
- Avoid single page crashes affecting the entire browser
- The advantages of preventing third-party plug-ins from crashing and affecting the entire browser ensure browser stability.
The general workflow of the browser
Now that you know the architecture of the browser, let’s look at the overall process from entering the url to presenting the content. The overall process can be broken down into two parts in sequential order: web resource requests and browser rendering.
- The network resource request process is to request corresponding resources from the server based on the URL, including URL resolution, DNS query, TCP connection, HTTP request, server response, and disconnect request.
- The browser rendering process is responsible for rendering the requested resources, including building a DOM Tree, building a CSSDOM Tree, creating rendering tree, layout, and painting.
These two processes involve a lot of knowledge, I will continue to write two articles to introduce respectively ~
The resources
Inside look at modern web browser
From browser multi process to JS single thread, JS running mechanism is the most comprehensive combing