"How browsers work: Behind the scenes of modern Web browsers" Study Notes

How browsers work: Behind the scenes of modern Web browsers has been viewed in the last two days.ArticleThe following uses Firefox, Safari, and Google Chrome as an example to describe how modern browsers work. (IE6 is dead. This is my personal opinion. I mentioned this in the original article)

The Browser contains user interface, browse engine, rendering engine, networking, UI backend, javascript interpreter, and data storage, such:

This article focuses on the working principle of rendering engine. Its work includes parsing HTML to construct the DOM tree, constructing the rendering tree, layout the rendering tree, and drawing the rendering tree. My Chinese translation is not accurate. For details, see

In the parsing HTML stage, rendering engine first parses and constructs a DOM tree, and then generates the corresponding style rules based on CSS. Rendering engine uses style rules to convert DOM tree nodes to render Tree nodes. During parsing, lexical analysis and syntax analysis are required to construct a parse tree. However, the parse tree cannot be directly understood by machines and must be translated into codes that can be understood by machines. Parsing uses many computational theories, such as context-independent grammar, regular expressions, and automatic machines. (I didn't learn this course well in college. Sorry !) Parsing HTML and CSS references related spec released by W3C.

A constructed render tree is a tree that contains rectangles. These rectangles contain information such as colors and coordinate dimensions. The order of the rectangles represents the order in which the rectangles will be drawn later. With the render tree, the solution is the layout. The layout is to place each node of the render tree in a proper position on the screen. The layout process is a recursive process, starting from the root of the render tree, recursively traversing each subtree. After the layout is complete, the painting is finished. The method of drawing the UI backend layer is called to draw the render tree on the screen. To improve efficiency, the browser uses the dirty bit system, which means to re-layout and draw the modified parts. Unless there are some global changes, such as font size changes and screen scaling, you have to re-lay and draw the entire screen. It is worth mentioning that the work of rendering engine is a gradual process: the browser will not start parsing, rendering, layout, and painting until all resources are obtained through the network. It presents the obtained resources to the user and continues to obtain the remaining resources through the network to draw the remaining webpage content. Taking WebKit as an example, the workflow of rendering engine is shown in:

I have used safari, opera Mini, and UC browsers on IOS. In general, the rendering engine of safari and opera Mini is better than the UC browser. Safari and opera mini can draw beautiful web pages with the same layout. The layout of the same web page becomes ugly and rough on the UC browser. It may be that UC browser has to save traffic for verification.