A website in the browser how to render?
First, the process of rendering html page loads.
It should first be asked to return HTML, from a byte stream into a character stream, a character stream to get the browser, then the browser corresponding to the corresponding token lexical analysis, then continuously added to the DOM tree by next-token in. Then there are the Link tab, concurrent browser to request some CSS resources, CSSOM is parsed into a tree, combined with the generated DOM tree rendering.
Carding: enter the URL in the browser, the corresponding IP resource request to the server returns an HTML document, the document is parsed browser HTML parser, by lexical analysis, these Tag, a different analysis of the corresponding token , from top to bottom in order to resolve our token from the HTML documentation for CSS, js and other external resources when faced Link this tag, the browser sends a request to the server further. For JavaScript external resources, it will be forwarded to the browser kernel v8 JavaScript execution engine to execute. CSS resource request will go back to generate the corresponding CSS tree. In the request back css generate Nepal, in fact, even if the DOM tree has been parsed completely, it will not go before the tree css rendering, render that merge tree after CSS and the DOM tree are generated generate renderTree, further layout and drawing.
Second, some of the features of HTML rendering process
- Order execution, concurrent load. (HTML introduces css, js external resources, which are complicated to load, but the concurrent loading by limiting the number of on-line, thus setting 3-4 CDN domain names, to prevent a CDN domain reached on the line, not concurrent requests multiple resources)
- It is blocked. (Whether an add resources will block load other resources, CSS load whether the load will block js etc.)
- Dependencies. (Css code where introduced, sometimes there will be no style, appeared suddenly flashing style, if css introduced in the header, it will not appear, there js introduced, with the asynchronous loading after async, in fact, it is to give up dependence, who should executive who finished loading)
- Introduction. (Script src introduction of the issue will be congestion, consider using defer, async label. Dynamic resource loading)
2.1 order execution, concurrent load
- Lexical analysis: Browser HTML document analyzing a way
- Concurrent load: the introduction of HTML resources are concurrent loaded
- Concurrent limit: resource request for a domain by the concurrent on-line
2.2 css obstruction
- Link tag css head in the introduction, the page rendering can be solved flashing
- js css obstruction of execution (js to dynamically modify the DOM tree so js modify the DOM tree when the guarantee was, the tree has finished loading the css, js so it can modify)
- css does not block loading external script (webkit have a pre-scanner will send a request for resources behind the need to load)
2.3 JS obstruction
- Js render directly into the blocked page (directly through the script in the src introduced, and not defer asyn property, understand: js code may call structure document.write dynamic changes to the document, will affect the rendering and subsequent analysis of the document, HTMLparser document structural analysis and rendering to wait until the execution of the js)
- js resource loading is not blocked (because of increased pre webkit scanner to scan behind the words, when scanning back to the link tag references to external resources, it will send a request to load a subsequent resource)
- js sequentially performed, blocking subsequent execution logic js (such as introducing 10 js script, execution sequence, and to perform the blocking of the rear js)