Home > Developer > JavaScript
The process of loading and rendering HTML by the browser (standard-defined process and optimization of modern browsers), loading and rendering
First look at the standard definition of the browser rendering process (found online ):
When the browser opens the webpage, the browser loads and renders the html in sequence. JS loads.
There are several points to note:
1. We know that the processing process of the browser is to parse html to generate a DOM tree-> Generate a render tree based on the DOM tree and style sheet-> render a render tree display. The browser parses html to generate a partial DOM tree so that users can see the page more quickly. Then, the browser generates some render trees and then displays them.
2. There are two types of external resources in this process: Blocking script execution, thus blocking rendering, namely external js and external css. External js blocks DOM tree generation because the browser needs a solid DOM tree, js may damage this structure (of course, it may also change the style [note that it is a style rather than a style table], but this will not affect if it is not blocked ); external css style sheets also block script execution. Theoretically, since style sheets do not change the Dom tree, there is no need to stop document parsing and wait for them. However, there is a problem, the script may request the style information during the parsing process of the document. If the style has not been loaded or parsed, the script will get the wrong value. Obviously, this will cause many problems, this looks like an edge, but it is quite common. Firefox blocks all scripts when a style sheet is loaded and parsed, chrome blocks these scripts only when the script attempts to access certain style attributes that may be affected by unloaded style sheets.
3. other external resources are non-blocking rendering. We can see that the general frame of the page is displayed many times, that is, the position of the image is not displayed, after the image is downloaded, it is re-rendered.
Optimization of modern browsers:
Rendering and downloading based on the standard browser. The following code loads external resources in the same order as the resources in html. Where the head adds an external resource request http://hm.baidu.com/hm.js? A041a0f4ff93aef6aa83f34134331a1d should be loaded before all styles
<Html>But it is actually in chrome. Firefox, ie8 +, and other browsers found the following results (using https://www.webpagetest.org/test)
Why? This isPre-resolution (Speculative parsing)
Webkit and Firefox both perform this optimization. When the script is executed, another thread parses the remaining documents and loads the files to be passedNetworkThe loaded resource. In this way, resources can be loaded in parallel to make the overall speed faster. It should be noted that pre-resolution does not change the Dom tree. It leaves this job to the main parsing process and only parses external resource references, such as external scripts, style sheets, and images.
The figure above shows that a lot of external resource references are resolved during script execution, and the thread is started to download them. The main thread is still waiting for hm. js to return.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
