How the browser works

[1] Browser function: The user selected Web resources, need to request resources from the server and display them in the browser window, the resource format is usually HTML, also includes PDF, image and other formats, the user uses a URI to specify the location of the requested resource.

[2] Structure of the browser
[UI user Interface] includes address bar, bookmark option, forward back, refresh, pause, home page, etc. except for the page display area
[Browser engine browser] interface for querying and manipulating the rendering engine
[Render engine rendering] Displays HTML and images formatted with CSS
[Network networks] for network requests, such as HTTP requests, which include platform-independent interfaces and platform-independent implementations
[UI back-end UI backend] draws the underlying components, such as combo boxes and windows, providing platform-independent interfaces for internal use of the appropriate implementation of the operating system
[JS interpreter JavaScript interpreter] For parsing execution of JavaScript code
[Datastore data Persistence] The browser needs to store all the data on the hard disk, such as cookies

[3] render engine
Firefox is using Geoko
Safari and Chrome using WebKit
[3.1] Basic process: The rendering engine first obtains the content of the requested document over the network, usually in the form of a 8k block Parse HTML build DOM tree--Construct render tree--layout render tree--Draw the render tree
[3.2] Detailed flow: The rendering engine begins parsing the HTML and converts the label into a DOM node in the content tree. Next, parse the style information in the external CSS file and the style tag, and the style information in the HTML will be used to build another tree-render tree. The render tree consists of some rectangles that contain CSS properties, which are displayed to the screen in the correct order. When the render tree is built, the layout process is performed, which determines the exact coordinates of each node on the screen. The next step is to draw, which is to traverse the render tree and draw each node using the UI back-end layer.
[3.3] Features: For a better user experience, the rendering engine will render the content to the screen as early as possible, and will not wait until all the HTML has been resolved to build and lay out the render tree, which is a part of the parsing of the content to display, while The rest of the content may also be downloaded over the network.
[3.4] Note: The positioning of elements in WebKit is called layout, while Gecko is called reflow.

[4] parsing with the DOM tree build (parsing and Dom tree construction)
[4.1]html parsing
[4.1.1]html cannot be parsed by a general top-down or bottom-up parser for the following reasons:
[1] The Catholic nature of the language itself
[2] The browser to some common illegal HTML has a fault-tolerant mechanism
[3] The parsing process is reciprocating, usually the source code will not be changed during the parsing process, but in HTML, the script tag contains document.write may add the label The parsing algorithm that describes HTML in the input
[4.1.2]HTML5 specification: Includes two stages-symbolic and build trees. Symbolization is the process of lexical analysis, the input is parsed into symbols, the HTML symbol includes the start tag, the end tag, the attribute name and the attribute value, the symbol recognizer recognizes the symbol, passes it to the tree builder, and reads the next character to identify the next symbol until all input is processed.
[4.2]css parsing
[4.2.1] attribute: CSS parsing is a context-independent grammar
[4.2.2] Implementation: WebKit automatically generates parsers from CSS grammar files using Flex and Bison parsing generators. Bison creates a bottom-up parser, and Firefox uses a top-down parser. They all parse each CSS file into a style sheet object, each containing CSS rules, CSS rule objects that contain selectors and declarative objects, and other objects that conform to CSS syntax.
[4.2.3] handles scripts and the order of style sheets
[4.2.3.1] Script: The mode of the Web is synchronous. The developer can identify the script as defer so that it does not block document parsing and executes after the document resolves.
[4.2.3.2] pre-parsing: When the script is executed, another thread resolves the remaining documents and loads the resources that need to be loaded over the network later. This approach allows resources to be loaded in parallel to make the overall speed faster.
[4.2.3.3] style sheet: The script may request style information during document parsing, and if the style is not loaded and parsed, the script will get the wrong value, and Firefox blocks all scripts when there is a stylesheet still loaded and parsed. Chrome blocks These scripts only when the script tries to access certain style properties that might be affected by a style sheet that is not loaded.

[5] Render tree build
[5.1] When the DOM tree is built, the browser starts building another tree-the render tree, which consists of the visible elements in the element display sequence, which is a visual representation of the document, which is constructed to draw the contents of the document in the correct order.
[5.2] Implementation: Firefox describes the elements in the render tree as frames,webkit by renderer or rendered objects. The
[5.3] renders the object as opposed to the DOM element, but the correspondence is not one-to-one, and the invisible DOM element is not inserted into the render tree, such as the head element and the element with the display property of none will not appear in the render tree. Elements with the visibility property of hidden will appear in the render tree in the
[5.4] process of creating the tree:
[5.4.1]firefox, which is expressed as a listener that listens for DOM updates, delegating the creation of a frame to the frame constructor, this builder calculates the style and creates a frame
[5.4.2]webkit] The process of generating a render object in a calculated style is called attachment, and each DOM node has a attach method, The attachment process is synchronous, and the Attach method that invokes the new node inserts the node into the DOM tree

[6] Layout
[6.1] When rendered objects are created and added to the tree, they do not have location and size, the process of calculating these values is called layout or reflow
[6.2] Global and incremental layout
[6.2.1] When layout is triggered by the entire render tree, it is called global layout, which may occur in the following cases:
1. A global style change affects all render objects, such as the change of font size
2. Window Resize
The global layout is usually triggered synchronously, and in some cases, layout is treated as a callback after the initial layout, such as sliding bars.
[6.2.2] The process of incremental layout is asynchronous, Firefox generates a reflow queue for incremental layout, and a schedule executes these batch commands. WebKit also has a timer for performing an incremental layout--traversal tree, which is re-layout for the rendered object of the dirty state. When a script requests style information, such as offsetheight, the incremental layout is triggered synchronously.
[6.3] When a render object needs to be folded during layout, pausing and telling it that the parent needs to wrap, the parent will create additional render objects and invoke their layout

[7] Drawing painting
[7.1] Drawing stage, traversing the render tree and invoking the paint method of the Render object to display their contents on the screen, drawing using the UI foundation components
[7.2] The stacking order of a block render object is: background color, background image->border->children->outline
[7.3] Dynamic change: The browser always tries to respond to a change with minimal action, so a change in the color of an element will only result in the redrawing of the element, the change in the position of the element will approximate the layout and redrawing of elements, adding a DOM node, will also cause the layout and redrawing of this element. Some major changes, such as increasing the font size of HTML elements, will invalidate the cache, resulting in overall layout and redrawing.

How the browser works