html and css are parsed in parallel to form DOMTree and CSSTree respectively, and the two are put together to form renderTree
Traversal complies with the depth-first principle
When it reads that it is an img tag, it hangs on the dom tree. This process is called code analysis, also known as dom node analysis. After parsing, start a new thread at the same time to download things asynchronously.
What is the advantage of writing the script at the bottom, these documents can be manipulated just after parsing js, which is faster
But when window.onload is written in js, after the document is parsed, the tree is constructed, and the document is downloaded and then executed.
js was loaded synchronously before
Why can't the download execution of js and HTMLcss be parallel? js will modify html and css
Why is js single threaded? Assuming multi-threading, one thread adds nodes, and one thread deletes nodes. It is not clear whether to delete or add.
Load js asynchronously and download htmlcss in parallel
Disadvantages of js loading: The loading tool method does not need to block the document. If the js loading will affect the page efficiency, once the network speed is not good, the entire website will wait for the js to load without subsequent rendering and other work.
Some tools and methods need to be loaded on demand, and then loaded when used, there is no need to load them.
The order of browser loading and rendering of html
1. The order of IE downloading is from top to bottom, and the order of rendering is also from top to bottom. Downloading and rendering are performed at the same time.
2. When rendering to a certain part of the page, all the parts above it have been downloaded (it does not mean that all associated elements have been downloaded).
3. If you encounter a semantically interpreted tag embedded file (JS script, CSS style), then the IE download process will enable a separate connection for download at this time.
4. After the style sheet is downloaded, it will be parsed together with all the previously downloaded style sheets. After the parsing is completed, all the previous elements (including the previously rendered ones) will be re-rendered.
5. If there is a redefinition in JS and CSS, the later-defined function will override the formerly defined function.
Loading of JS
1. Cannot download and parse in parallel (blocking download).
2. When the JS is referenced, the browser sends a js request and will wait for the return of the request. Because the browser needs a stable DOM tree structure, and there may be
code in JS that directly changes the DOM tree structure, such as using document.write or appendChild, or even directly using location.href to jump. To prevent JS from
modifying the DOM tree and need to rebuild the DOM tree, it will block other downloads and presentations.
How to speed up the loading speed of HTML pages
1. Page weight loss:
a. The weight of the page is the most important factor affecting the loading speed .
b. Delete unnecessary spaces and comments.
c. Move inline script and css to external files.
d. You can use HTML Tidy to lose weight to HTML, and you can also use some compression tools to lose weight to JavaScript.
2. Reduce the number of files:
a. Reduce the number of files referenced on the page to reduce the number of HTTP connections.
b. Many JavaScript and CSS files can be merged, it is best to merge them. People fortune help all merge their own JavaScript. functions and Prototype.js into one base.js file.
3. Reduce domain name queries:
a. DNS query and resolution of domain names are also time-consuming, so it is necessary to reduce references to external JavaScript, CSS, images and other resources. The less use of different domain names, the better.
4. Cache reuse data:
a. Cache the reused data .
5. Optimize the loading sequence of page elements:
a. First load the initially displayed content of the page and related JavaScript and CSS, and then load HTML-related things, like what is not the first display of related pictures, flash, videos and other very fat resources Just load it last.
6. Reduce the number of inline JavaScript:
a. The browser parser will assume that inline JavaScript will change the page structure, so using inline JavaScript is more expensive.
b. Do not use document.write() to output content, use modern W3C DOM methods to process page content for modern browsers.
7. Use modern CSS and legal tags:
a. Use modern CSS to reduce tags and images. For example, using modern CSS+ text can completely replace some images with text only.
b. Use legal tags to avoid operations such as "error correction" when the browser is parsing HTML, and HTML Tidy can also be used to reduce HTML weight.
8. Chunk your content:
a. Do not use nested tables, but use non-nested tables or divs. Decompose the layout based on the large nested table into multiple small tables, so that you don't need to wait until the entire page (or large table) content is loaded before it is displayed.
9. Specify the size of the image and table:
a. If the browser can immediately determine the size of the image or table, then it can immediately display the page without having to re-do some layout work.
b. This not only speeds up the display of the page, but also prevents some improper changes to the layout after the page is loaded.
c. The image uses height and width.
HTML page loading and parsing process
1. The user enters the URL (assuming it is an html page, and it is the first time to visit), the browser sends a request to the server, and the server returns the html file.
2. The browser starts to load the html code and finds that there is a tag in the tag that refers to an external CSS file.
3. The browser sends a request for the CSS file again, and the server returns the CSS file.
4. The browser continues to load part of the code in the html, and the CSS file has been obtained, and the page can be rendered.
5. The browser finds a tag in the code that refers to a picture and sends a request to the server. At this time, the browser will not wait until the image is downloaded, but will continue to render the code behind.
6. The server returns the picture file. Because the picture occupies a certain area and affects the arrangement of the following paragraphs, the browser needs to go back and re-render this part of the code.
7. The browser found a script tag containing a line of Javascript code, run it quickly.
8. The js script executes this statement, it instructs the browser to hide a certain style in the code, suddenly such an element is missing, the browser has to re-render this part of the code
9. After finally waiting for </html>the arrival, the browser burst into tears... Wait, the user clicked the "skin" button in the interface, and Javascript made the browser change the CSS path of the <link> tag.
10. The browser summoned <div><span><ul><li>everyone present , "Everyone pack and pack, we have to come back...", the browser requested a new CSS file from the server and re-rendered the page.