First, the main module
1.HTML parser
parse HTML text parser, the main role is to parse the HTML code into a DOM tree
2.CSS parser
cascading style sheet parser, the main role is calculated for each element objects in the DOM the style information,
so as to provide the infrastructure for calculating the final layout of the page
3.Javascript engine
parse execute javascript script that uses javascript code can modify the content of the page,
can also modify information css That javascript can be modified by DOM, CSSDOM Interface
page content and style information, thereby changing the rendering results
4. layout
after the DOM tree created, rendering engine needs to be bound together DOM node and style information,
calculate their size and location information of layout, form an internal model can express all of the information
the drawing
using the graphics library node to the layout of each page is calculated, graphed results
Second, how is the work of the inter-module:
1. HTML parser web content referred to construct an HTML parser to parse it after dom tree, if encountered during this period js code is
given js engine to deal with; if the page contains css style, then pay A parser to process css.
2. During established dom tree, the rendering engine receives information from the CSS style parser. Construction of a new internal model.
The model is constructed by the layout module
3. Finally, the completion by the drawing module model to the graphics rendering
Third, the detailed process:
1. Conversion: browser reads the HTML raw bytes from the disk or network, the browser will decode this original document according to the corresponding coding standard
(now typically utf-8).
2. symbolized: According to the W3C standards into the corresponding symbol.
3.DOM Construction: HTML parser parses the tag label generation token,
encountered CSS or JS sends a corresponding request. HTML parsing is blocking the main thread, CSS is generally block the main thread,
that is to say they are in the resolution process is not responding. After the addition of the async JS manually loaded asynchronously reached,
generating the corresponding DOM tree according to the token.
4.CSSOM build, add CSS Style Builder CSSOM tree.
5. Construction render tree, starting from the root node of the DOM tree, traversing each node is visible, the visible to each node to find the corresponding match rule CSSOM,
and applying these rules, and calculating the content of joint styles.
6. style computing, browsers will all relative positions into a series of style absolute location calculation.
7. The layout, the browser will position elements, layout.
8. drawing, the drawing element style, color, background, size, border, etc.
9. synthesis, the synthesis of the layers together, displayed on the screen
Fourth, some of the problems:
Model 1. network are synchronized. Web page authors hope parser and executes the script immediately encountered script tag.
Parsing the document will be stopped until the script is finished. (Here inline script)
Construction 2.dom tree is much faster than the render tree
constructed 3.dom tree to tree rendering almost simultaneously, but render tree constructed based on dom tree
4. If an external script , then the entire tree construction dom js analysis execution process will stop, and then grab resources from the network until the synchronization is completed continue.
Pre-parsed (JS)
WebKit and Firefox have carried out this optimization. When performing js script, other threads will resolve the rest of the document,
identify and load other resources needed by the network load. In this manner, resources can be loaded on the parallel connection,
thereby increasing the overall speed. Please note that pre-parser does not modify the DOM tree, but leaves that to the main parser;
pre-parser will resolve external resources (such as external scripts, style sheets and images) references.
Here is the scheduling algorithm involves os, round-robin concept
5. stylesheet
other hand, has a different style sheet model. In theory, the application does not change the stylesheet DOM tree,
there is no need to wait for the stylesheet and seems to stop the document parsing.
But this involves a problem that the script will request the document parsing stage style information. If I had not loaded and analytical style,
the script will get the wrong response, this will obviously be a lot of problems. This seems to be an atypical case, but in fact very common.
Firefox in the process of stylesheets loaded and parsed, blocks all scripts. For the purposes of WebKit,
Only when the script tries to access the style sheet style properties may be affected by the impact has not been loaded, it will prohibit the script.
Fifth, the two events:
when the onload event is triggered, all of the DOM on the page, style sheets, scripts, pictures, flash have been loaded up.
When DOMContentLoaded event triggered only when the DOM is ready, not including style sheets, images, flash.