Web front-end performance optimization: HTML,CSS,JS and server-side optimization

Article Description: Web front-end Performance optimization summary.

For front-end development engineers, the importance of front-end performance optimization is self-evident, the most well-known is the YSlow 23 optimization rules, in my understanding, performance optimization is not simply refers to the speed of users to visit the site, but also include the development of efficiency, here I summarize my understanding of the Web front-end performance optimization.

HTML Section

1. Semantic HTML: The advantage is that the code can be concise and clear, supporting different devices, conducive to search engines, easy team development;
2. Reduce DOM nodes: Speed page rendering;
3. Add the correct width to the picture: This reduces the page redraw while preventing the image from zooming;
4. Prevents the SRC attribute and link's href attribute from being null: When the value is empty, the browser is likely to load the current page as its property values;
5. Correct closed Tags: if you avoid using <DIV/>, the browser will be more than one to parse it into the <div\></div\> process;
6. Link to the directory or home page after the address plus "/", such as http://www.qq.com/;
7. Use link instead of @import way to import style;
8. The style is placed in the header, JS is placed at the end of the page;
9. Reduce favicon.ico and cache;

CSS Section

1. Avoid using CSS Expressions (CSS expressions): such as Background-color:expression (New Date ()). GetHours ()%2? "#B8D4FF": "#F08A00 ″);
2. Avoid using CSS filter (CSS filter);
3. Use CSS abbreviations to reduce the amount of code;
4. By csssprites the similar picture synthesis one, reduces the picture request;
5. Reduce the query level: such as. header. logo is better than. header. Top logo;
6. Reduce the scope of the query: such as. Header>li is better than. Header Li;
7. Avoid tag tags and class or id coexist: such as a.top, Button#submit;
8. Delete the duplicate CSS;

Javscript Part

1. Use global variables as little as possible;
2. Use event agent binding events, such as binding events to agents on the body;
3. Avoid frequent manipulation of DOM nodes;
4. Do not use eval;
5. Reduce object lookup, such as A.B.C.D, which is very performance-intensive, and defines it in variables as much as possible;
6. Type conversions: Converts numbers to strings using the "" + 1, floating-point number converts to an integral type using Math.floor () or Math.Round ();
7. Loop over strings, such as substitution and lookup, using regular expressions;
8. Delete duplicate JS;

Server Section

1. Try to merge CSS, JS file, or write it directly on the page, reduce the HTTP request;
2. Compress css, JS file, shorten file transfer time;
3. Avoid 404 errors: In particular, to avoid assigning a lockout page to 404, all 404 errors will be loaded one page at a time;
4. General requirements to reduce the number of DNS queries, as a page request resources as little as possible to use different host names, which can reduce the number of concurrent downloads, but many sites in order to speed up the download of resources is deliberately used a number of host names, here to do a trade-off;
5. Use CDN Acceleration to enable users to download files from their nearest server;
6. Reduce the size of cookies, using a domain without cookies, the client requests static files, reduce the repeated transmission of cookies on the main domain name;
7. Specifies expires for the file header to cache the content;
8. Use gzip to compress content;