Learn about HTML page rendering process for the front end of the performance optimization

Recently in learning front-end performance optimization, it is necessary to understand the page rendering process, in order to suit the remedy to the case, find the performance bottleneck. The following are some of the things I saw, share to everybody. Reference: Understanding the renderer render of the page has the following characteristics: • Single-threaded event polling • Clearly defined, continuous and orderly operation (HTML5) • Segmentation and build a DOM tree • Request resources and preload • Build the render tree and map page specifically: when we get the corresponding bytes of HTML from the Internet, began to build a DOM tree. Shall be the responsibility of the browser to update the UI thread. When faced with the following situations, the structure of the DOM tree will be blocked, • HTML response flow is blocked in the network • Have not finish loading the script • Met a script node, but still not loading up the style file since the render tree to build a DOM tree, and can be blocked style file. Because it is based on single-threaded event polling, even if there is no script and style of the jam, when these scripts or style is parsed, implementation and application, will block the rendering of the page. Some will not block the page rendering: • Define the defer attribute and async attributes • Did not match the style of the media type of the file • Didn't pass the insert script parser node or style below, by an example to explain (complete code) :

code is as follows: <Html> <Body> <Link rel="stylesheet" href="http://www.jb51.net//web/example.css" > <Div> Hi there! </div> <Script> ... First of all, the parser encounters the example. The CSS, and download it from the network. Download the stylesheet process is time-consuming, but the parser is not blocked, continue to parse. Next, the parser encounters script tags, but due to the style file to load down, blocked the execution of the script. Parser is blocked, can not continue to parse. Render tree will also be blocked style file, so this time no browser won't go to render a page, in other words, if the example. The CSS file download down, Hi there! Is to show not to come out. Next, to continue...

code is as follows: <Html> <Body> <Link rel="stylesheet" href="http://www.jb51.net//web/example.css" > <Div> Hi there! </div> <Script> Document.write (' <script SRC="http://www.jb51.net//web/other.js" > </SCR '+' ipt> '); </script> As soon as the example. The CSS file is loaded, the render tree is built. Inline script execution, the parser will immediately be other. Js blocked. Once the parser is blocked, the browser will get drawing request, " Hi there! " Would be displayed on the page. When other. Js loading is completed, the parser to parse down...

code is as follows: <Html> <Body> <Link rel="stylesheet" href="http://www.jb51.net//web/example.css" > <Div> Hi there! </div> <Script> Document.write (' <script SRC="http://www.jb51.net//web/other.js" > </SCR '+' ipt> '); </script> <Div> Hi again! </div> <Script SRC="http://www.jb51.net//web/last.js" > </script> After the parser encounters last. Js will be blocked, and then received another browser rendering request, " Hi again! " Is displayed on the page. Last last. Js will be loaded and will be executed. However, in order to slow down the render is blocked, modern browsers use the guess preload (speculative loading). In this case, the above script and style files will be blocking the rendering of the page. Guess the purpose of the preload is to reduce the blocking time. When the render is blocked, it will do the following things: • Light-weight HTML (or CSS) scanner (scanner) continue to scan &bull in the document; To find those who may be able to use the url of the resource file in the future • Before the renderer to use them to download it but guess preloading cannot be found through javascript script to load the resource files (e.g., the document. The write ()). Note: all &other; Throughout modern &; Browsers support this way. Come and look at the example again, back by speculation preload is how to work this way.

code is as follows: <Html> <Body> <Link rel="stylesheet" href="http://www.jb51.net//web/example.css" > <Div> Hi there! </div> <Script> ... Parser cashback for example, CSS, and from the network access, the parser is not blocked, continue to parse, when met with inline script node, have been blocked, because the style file is not loaded, blocked the execution of the script. Render tree is also blocked style file, so that the browser didn't receive the rendering request, can't see anything. So far, and just mentioned is the same that way. But then by the change. Preload (Speculative loader) continue &other; Read &throughout; Document, discovered last. Js and view load it. Next:

code is as follows: <Html> <Body> <Link rel="stylesheet" href="http://www.jb51.net//web/example.css" > <Div> Hi there! </div> <Script> Document.write (' <script SRC="http://www.jb51.net//web/other.js" > </SCR '+' ipt> '); </script> As soon as the example. The CSS file is loaded, the render tree is completed building, inline scripts can also perform, after again by the other parsers. Js blocked. Parser is blocked, the browser will receive the first rendering request, &other; Hi there! Throughout the &; Be realistic on the page. This step and just that kind of situation is the same. Then:

code is as follows: <Html> <Body> <Link rel="stylesheet" href="http://www.jb51.net//web/example.css" > <Div> Hi there! </div> <Script> Document.write (' <script SRC="http://www.jb51.net//web/other.js" > </SCR '+' ipt> '); </script> <Div> Hi again! </div> <Script SRC="http://www.jb51.net//web/last.js" > </script> Parser found last. Js, but due to the preload device have just give it to load down, put in the browser's cache, so last. Js will be implemented immediately. Then, the browser will receive a render request &other; Hi again” Also be displayed on the page. Through the comparison of two situations before and after, in the hope that we can have a certain knowledge of rendering of the page, and then targeted to do some optimization. Good night! The ^_^

Script Home, is a commitment to share good utility software, network material, station source, template procedures, information technology, network technology, personal web blog. This website aims to establish with more people sharing networks to bring the joy and wonderful!