How to improve page load speed, and outlined principles

Loading the page is divided into downloading , parsing , rendering three steps, the following three aspects of this method to enhance the loading speed of:
1, to speed up the file download speed, reduced resource for blocking file download page resolution. Page load will first download the HTML file, and then start parsing from top to bottom, the parsing process if you encounter external resources will begin a download until the download is complete before continuing resolution. So, to speed up the file download speed is a method to effectively improve page load speed. Specific can be
1) By setting the CDN, caching, etc. HTTP, HTTP reduce transmission time;
2) compressing files, the file size is reduced;
3) on the script, CSS file references label set is downloaded asynchronously property, to avoid clogging generated HTML file parsing
 
2, the writing style in the head, the JS code or files referenced in the body of the last written.
In the process of downloading the HTML file, the file will be synchronized to the stream is parsed into a DOM structure, when faced with the CSS code, it resolves it to the CSSOM tree; when it comes to JS script, which will be performed synchronously and blocks continuing resolution, just continue parsing after the execution. Finally, the DOM and CSSOM to render the page. So, in the style write head can be constructed as soon as possible CSSOM tree; the last JS code written in the body, will not cause obstruction to resolve the DOM, the fastest way to complete the construction of page
 
3, as much as possible to enhance the browser rendering speed. include
1) to avoid redundancy HTML tags, DOM structure constructed to enhance the speed;
2) Compact and CSS style selector , and improve matching speed CSSOM construct;
3) If the application is a single page, the page structure dependent on the implementation of the JS. JS code can be optimized, as soon as the output fold structure; or using server-side rendering mode, direct transmission HTML structure, reduce the time the fold

Guess you like

Origin www.cnblogs.com/SallyShan/p/11520620.html