Front-end performance optimization divided into the following aspects:
First, the deployment of code:
1, the compression and merge code
2, images, js, css and other static storage resources and the domain name address different from the master station, so that when the belt transmission resources are not unnecessarily cookie information.
3, using a content delivery network CDN
4, is set to file Last-Modified, Expires and Etag
5, using GZIP compression transmission
6, weighed DNS lookups (using different domain names will increase DNS lookup)
7, to avoid unnecessary redirection (plus "/")
Second, coding
html：
1, using the structure clear, simple, semantic label
2, to avoid empty src and href
3, do not scale the image in HTML
css：
1, streamlining css selector 2, placed on top of the CSS
3, avoiding the introduction of style @import way
4, css base64 picture data is used to replace a picture file, reducing the number of requests, online transfer base64 website: HTTP: //tool.css- js.com/base64.html
5, instead of using css javascript animated animation
6, using the font icon, icon library website: http://fontawesome.io/icons/, online production site: www.iconfont.cn
7, using css the sprite was dropped
8, the use of graphics svg
9, avoid using CSS expressions
a {star : expression(onfocus=this.blur)} 10, to avoid the use of filters
javascript：
1, a reference library to reduce the number
2, or the use requirejs seajs asynchronous loading JS
. 3, the JS introduced into the bottom of the page
4, to avoid global find
5, to reduce the attribute lookup
6, using native method
7, instead of the complex with a switch statement if else statement
8, reducing the number of the statement, for example, can be written in a plurality of variable declaration
9, literal expressions used to initialize an array or an object
10, or the use DocumentFragments substituted innerHTML elements into complex
11, using the proxy event (event delegate)
12, dom avoid multiple access selection set
13, the high-frequency triggering event is provided the use of a throttle function, such as: onMouseMove, the onmouseover
14, using the Web Storage data cache
15, the Array method instead join the string "+" connected to (first to concatenated string into the array)