The user enters the URL address, the browser searches the IP address according to the domain name
The browser sends an HTTP request to the server, and if the server segment comes back with a redirect of 301, the browser sends a request again based on the location in the corresponding header
Server-side withstand entreaty, processing begged to generate HTML code, back to the browser, at this time the HTML page code may be through the tightening
The browser receives the server to echo the result, if has the contraction then first carries on the decompression processing, immediately then is the page analytic contrast
Resolution foil The process is divided into the following processes:
Parsing HTML
Building the DOM tree
Dom tree with CSS style attached structure appears tree
Planning
Making
Parsing and building the DOM tree
The first two steps we put together to comment, the browser's actual work also put them together. The HTML browser has a dedicated HTML parser to parse the HTML and build the DOM tree in the parsing process. Here we review the parsing of two DOM elements, the style (link, style) and the script file. Because the browser chooses the top-down method parsing, when encountering these two kinds of elements will block the browser parsing,
Parsing of the HTML will not continue until after the external capital is loaded and parsed or fulfilled. The same sequence of styles and scripts will also affect the parsing process of the browser, the main reason: script script implementation process may modify the HTML interface (such as the document.write function), DOM node CSS style will affect the performance of JS. In my quiz, I got the following four conclusions:
1) The external style will clog the subsequent script fulfillment until the external style is loaded and the parsing ends.
View Code
2) external styles do not clog the loading of subsequent external scripts, but will clog the execution of external scripts.
Home Code
External scripts
From the waterfall we can see that the external script is loaded in parallel with the external style, but until the external style is loaded, the external script begins to fulfill
3) If the subsequent external script contains the async feature (IE is defer), then the external model will not block the script loading and performance
View Code
The ability to see external scripts loading and discharging from the waterfall diagram is not blocked by link
4) The link tag for dynamic creation does not clog the load and fulfillment of a script that was created dynamically, regardless of whether the script tag has an async feature, but for other non-dynamic creation script, the above three conclusions still apply
After parsing the HTML, the beginning of the construction of the tree Rendertree, this step is to apply the CSS style to the DOM node, the WebKit kernel will call this process attachment, the other browser has a different concept. For front-end engineers, this process involves CSS cascading questions.
First of all, according to the main style of the order, from low to high in turn:
Browser declaration
User General statement
Author General statement
Author's main statement
User Main statement
With respect to the same major rank, the priority is determined according to the particular degree of the CSS selector; the specificity of a style declaration is determined by the following four resolutions: S-I-C-E
Declares that the style characteristic from the inline is s+1;
The declaration contains the ID feature is i+1;
The declaration contains classes, pseudo-classes, feature selectors c+1;
Life contains elements, pseudo-element selectors are e+1;
The contrast is similar to the contrast size between two strings.
Each node that appears in the tree is the CSS box corresponding to its DOM node, the type of the box is related to the display feature of the DOM node, the block element generates a block box, and the inline element generates an inline box. Each occurrence of a tree node has a corresponding DOM node, but the DOM node has a corresponding tree node, for example, the display feature is none of the DOM node, and the tree nodes appear in the tree in the direction of their position in the DOM tree is the same, float and positive positioning elements, for example.
HTML Rendering process
