A website in the browser how to render the?
html itself will first be rendered into a DOM tree, html is actually coming through the Web site after the first request, the request came, html itself will transfer one byte into a character stream, the browser is to take character stream, then by after lexical analysis, syntax analysis of the respective token corresponding to, for example, header token, token transformation Tag different, then append to the tree by dom token type.
Css again to be encountered after link token tag, and then to request css, over request parsing, generating CSSOM, and then combined to form a DOM tree Render Tree such render tree. Then the layout and rendering.
Encounter script tag, and then to ask for JS-related web resources, will js request back to v8 engine browser parses
Some features of HTML rendering process
1, the order of execution
Because he is the ability to use lexical analysis, top to bottom analysis of the entire html, tag corresponding situation, so the first feature is the execution order. Lexical analysis is a way to parse html the document, from top to bottom in order to tag parsing, top to bottom, in many cases determines the blockage.
2, concurrent load
Our html may introduce a lot of css, js of web resources, these web resources in the browser is concurrent loading, where the need to optimize the point is that the degree of concurrency the concurrent loading process is governed by our browser domain restrictions. It will set 3-4 CDN domain, single domain limits prevent
3, is blocked
First, whether the load will block js css load, load js js execution is blocked, and whether the load css will block the rendering of the page.
css then introduced by way link in the head, he will block the page rendering. It is to wait until after this finished loading css rendering. So this time after the analysis is completed with a style, it is recommended that the request is in the head inside css
css link by the way, css will block the rendering of the page, js css will block the execution, because the style will affect js, js execution will depend on the properties of some css, css if not finished loading may be a problem. But does not block css loading external script, because there is actually a pre-webkit scanner, he can pre-scan the words back, so he will not stop the process of loading, but will stop the process of implementation.
Js introduced directly block the rendering of the page, because js execution will affect the modified dom node, it will be blocked nodes behind the creation. This is also logical.
4, dependencies
html rendering process, if there are dependencies to follow, how to ensure the correct dependencies to improve the efficiency of the situation. For example, in some cases html has come out, but there is no style, and then suddenly flashed out of style. This situation is not following dependencies general css on the head tag inside css and other pages will load well, generated cssom, and then rendered, this time on the issue css flashing does not occur. Sometimes js will add async, this time is to give up dependence js, this time need to focus on the dependencies of js
Page rendering relies on css load
Js dependency order of execution of the
js logic for dependencies dom nodes need to get some js dom node
5, introduced way
For example, the introduction of a link, or the introduction of import, both What is the difference. For js, such as tag, such as dynamic introduced.
The introduction of direct rendering will block the page
defer, do not block the rendering of the page, in defer the time, all the trees have been constructed dom completed. defer the implementation of the order
async, rendering does not block the page, with defer the difference is, it does not guarantee the order of execution, which start with the back end service, which first execution
The introduction of asynchronous dynamic js, when necessary, the dynamic introduction of new js files, spa very extensive single-page page
Based on these characteristics, we can find optimized point
1, css stylesheets top
2, with a link instead of import, refer to the inside css import, the import is written at the bottom, thus introduced is not good when css
3, js script set at the end, concurrent requests when not distinguish css and js and js wrote at the top will affect css loaded, during rendering, css due js, so rendering with page independent js placed on the bottom of the page
4, the rational use of asynchronous loading capacity js, optimize loads and executes the js
Real
1, the number of concurrent loading is capped, mixed and css js placed css cause delays, lead to flash page, opposed to the bottom so js
2, css placed header, the rendering blocked pages, css finished loading, reloading dom, place the page style transition, so as to ensure rendering one step
3, css js concurrent load without blocking back, but block the execution of js. If js placed in the header, it will block the rendering of html.
4, the js are placed header, were put async, defer.
async does not block page rendering, does not guarantee the order of execution, the first to come back who performs, does not guarantee re-executed after the completion of construction dom book.
defer not block page rendering, ensure the implementation of the order, to ensure re-executed after the dom tree structure is completed.
5, @ import link gymnastics
@import There are two major defects, the first point it does not support concurrent execution. After he wants to import, go to import the second, he does not support concurrent.
Second, he needs the whole page finished loading after all, the implementation of import before going inside the code.
But ,,, these two major shortcomings may have existed before, but now these two issues has not, with effect link is exactly the same. He is more suitable for modular css. But @import in different css file does not support concurrent, before going inside css @import loaded only after the file has been loaded css