High-performance website construction rules

The golden rule for performance is only 10% & amp; ndash; 20% of end users spend time downloading HTML documents, and the remaining 80% ~ 90% of the time is spent on all the components on the download page (80%-90% of the user's waiting time is from the front-end page loading) 1. reducing the number of blocking times and blocking time 1. set... syntaxHighlighter. al performance golden Law
Only 10%-20% of end users spend time downloading HTML documents, and the remaining 80% ~ 90% of the time spent on all the components on the download page
(80%-90% the user's waiting time is from the front-end page loading)
 
1. Reduce blocking times and blocking time
1. Place CSS on the top
2. Place JS at the bottom
3. Delete duplicate scripts
4. Delayed loading of unnecessary scripts for rendering pages
5. asynchronous download on demand
Note: This rule does not affect the performance, but is related to the user experience.
If the style sheet is placed on the top, the browser displays a white screen in the following three cases:
1. open in a new window
2. Reload
3. As the homepage
 
2. Make Ajax cacheable
Passive Request)
Active Request)
 
3. Reduce HTTP requests
The prime rule of performance: we must reduce the time for users to download html documents. The most basic method is to reduce http requests, including image, and merge CSS and JS files. Encode the image into Base64 data and embed it into the webpage
 
4. Avoid redirection
In the following situations
1. the trailing slash is missing.
2. Connect to the website
3. Tracking internal traffic
4. Track outbound traffic
5. Beautify the URL
 
5. Use CDN
CDN is a group of Web servers distributed across multiple geographic locations for more effective content publishing to users.
Note: If the web server of the application is closer to the user, the response time of one http request will be shortened. If the component web server is closer to the user, the response time of multiple http requests is shortened. At the same time, we need to pay attention to the CDN Cache. For example, if a js file has been modified, we need to clear the CDN Cache in time, or even avoid synchronization.
 
6. Reduce DNS Lookup
DNS lookup can be cached to improve performance. You can use Keep-Alive and fewer domain names to Reduce DNS lookup.
 
7. Use external Javascript and CSS
Try to use external js and css files on the page. Although it will bring additional http Request access time, the cache mechanism will save the http request for later access.
Special case: Home Page. Try to write js and css on the homepage, which will save the access time on the homepage.
The Best of both worlds
Download a after loading
After loading foreign currency on the home page, the js and css files are dynamically loaded. For example, our loadJs and loadCss methods.
B dynamic inline
You can use the cookie Method for example. If JavaScript loads, a cookie value is written. The cookie value is dynamically detected. If not, the cookie value is loaded. If so, the loading process jumps out.
 
8. Streamline Javascript and delete repeated scripts
Simplified: Remove unnecessary characters from the code to reduce the size and improve the loading time. Remove all comments and unnecessary Spaces
Obfuscation: In addition to streamlining, it also converts the names of functions and variables to shorter strings.
Configure Etag (Entity Tag)
 
9. Etag is a mechanism used by Web servers and browsers to verify the validity of cache components. It uniquely identifies a specific version of a component.
GET/I/yahoo.gif HTTP1.1
Host: us.yimg.com
HTTP 1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
Etag: "a531782d768ca1: dcc"
Content-Length: 1195
GET/I/yahoo.gif HTTP 1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "a531782d768ca1: dcc"
HTTP 1.1 304 Not Modified
Problem: Some attributes of a component are usually used to construct the component. These attributes are unique for a specific, hosted website server. The request initiated by another server does not match.