This is the 29th day of my participation in the August More Text Challenge
Understanding the working principle of the browser is absolutely helpful for us to design page content, page interaction and optimize page performance.
Browser is a very big topic, from 1990 the world’s first browser WorldWideWeb, to the present Chrome and Edge, experienced 30 years of development, let’s start from the browser interface!
Browsers and Processes
The browser you are opening now contains two main modules: the browser frame and the concrete Tab page
-
The browser framework includes navigation, favorites, history, user information, etc. The framework is fixed and all pages are shared;
-
The Browser Process is responsible for the framework functions, including search, navigation, download, update history, Cache management, favorites management, and page interaction.
-
Browser processes are divided into different threads based on their functions, such as UI threads, which are responsible for user interface interaction and search. Network threads are responsible for network requests, Storage threads are responsible for file reads and writes, and so on.
-
Page is the display of network resources, responsible for page display is the Render Process, depending on the design, some browsers will use the same Render Process for all pages, and some will arrange a Render Process for each page;
-
Rendering a web page is not a simple job, it is a complex process, so according to different processes, the rendering process is divided into different threads, such as the main thread parsing HTML files. Raster threads, composition threads, etc., are responsible for rasterizing pages.
-
In addition to browser processes and renderers, browsers generally use plugin processes that manage different plug-ins and GPU processes that ultimately draw the screen.
-
Browser page loading is not an overnight Process, but an iterative Process that requires the cooperation of different processes and interaction through Inter Process Communication (IPC).
-
Modern browsers use multi-process architectures, which have the following benefits:
- Browsers are more reliable. Now web applications are more and more complex, some illegal or non-standard input will lead to process bugs, the use of multi-process mode, can let the process isolated from each other, a process hung will not affect other processes, the stability of the system improved.
- The page loads more smoothly. Different processes can be executed in parallel to reduce waiting time.
- The system is more secure. Different processes do not share memory and can allocate different levels of read and write permissions based on actual requirements. In this way, a process is like a sandbox and is isolated to some extent.
-
The disadvantage of multi-process is that it consumes memory. If there are too many pages, or too much memory, it will seriously affect browser performance.
- Some browsers limit the number of processes, and if they exceed a certain value, merge them to reduce the load on memory.
- Other browsers can also reduce memory stress by automatically terminating processes and freeing up memory for pages that have not been acted on or updated for a long time.
navigation
When we open the browser and start to enter the content we want to visit, the page load is complete, can be divided into two big steps: navigation and rendering, let’s first look at navigation:
-
Processing input: When we start typing a string into the browser’s search box, the browser determines whether this is a search or a specific site URL based on our input. The input is processed by UI threads in the browser process;
-
Start navigation: If it is a search request, the browser opens the search page, takes the user’s input as a parameter, and presents a list of search results. If it is the URL of a specific site, the SYSTEM sends a RESOLUTION to the DNS server to obtain the specific IP address, establishes a TCP connection to the destination IP address, and sends an HTTP request to obtain site resources. Network threads in the browser process are responsible for url resolution and resource requests.
-
Read the response: The browser will determine the MIME type of the obtained file according to the HTTP response header and response body, and do some security checks. If there is no security problem, it will submit the received web page resources to the browser’s renderer, and begin to prepare for the display of the page. The network thread is responsible for reading the corresponding thread;
- Prepare the render process: When the network thread is sure that the browser can navigate to the requested page, it notifies the UI thread that the data is ready, and the UI thread starts a Renderer process for the page to prepare the render.
-
Commit navigation: when both data and renderer are ready, the browser tells the renderer process via IPC to commit navigation. When the browser process receives the renderer’s submission response, the navigation is complete;
-
After the navigation is complete, a security lock icon appears in the browser navigation bar. The browser also adds the current web page connection to the history, and the current session history is saved on the hard disk.
At this point, the page loading icon continues, after which, the browser process will receive the site data stream to the corresponding rendering process, the page rendering will officially begin, the page loading.
In our next article, we’ll go through the process of rendering a page in detail.
Thank you for reading, if there are inaccurate and wrong place please comment, I will immediately correct, thank you!
Summary is not easy, please do not reprint without permission, otherwise don’t blame old uncle you are welcome
Welcome technical friends to communicate with me, wechat 1296386616
References:
The Inside look at modern web browser “By Mariko Kosaka developers.google.com/web/updates…
“How Browsers Work: Behind the scenes of modern web browsers “By Tali Garsiel and Paul Irish www.html5rocks.com/zh/tutorial…
The Critical Rendering Path “Ilya Grigorik developers.google.com/web/fundame…
“Populating the Page: How Browsers Work” MDN developer.mozilla.org/zh-CN/docs/…
The web performance management, rounding nguyen other www.ruanyifeng.com/blog/2015/0…
The front-end should know how the browser works, do you understand? _ Yang walk segmentfault.com/a/119000002…
“A look at the Chrome browser working principle” attack of scallion juejin.cn/post/684490…