Load optimization: 1, merge CSS, JavaScript
2, with small pictures, use sprite
3, cache all cacheable resources
4, the use of long Cache
5, using outreach-type reference CSS, JavaScript
6, compressed HTML, CSS, JavaScript
7 using Gzip compress content
8, using the first screen loaded
9, use demand loading
10, using the scroll load
11, by Media Query load
12 to increase the loading progress bar
13, to reduce the cookie
14, to avoid redirection
15, asynchronous loading third-party resources
Image optimization: 1, Chi Figure http://zhitu.tencent.com/
2, use css3, svg, iconfont picture instead of
3, use srcset
4, WEBP better than JPG
5, PNG8 better than GIF
6, for the first time does not exceed the load 1014kb (based on the average link speed value can reach 3 seconds)
7, pictures are not wider than 640
css optimization: 1, css written in the head, JavaScript or asynchronous write at the end of
2, do not let the link, script, img, iframe and other labels appear empty src and href
3, try to avoid the Reset image size
4, try to avoid using pictures dataUrl
5, try to avoid write attributes
6, avoid css expression
7, remove empty css
8, Run the display of the proper use of property
9, do not abuse float
10, do not abuse web font
11, not too much of a statement-size font
12, 0 when the value does not require any unit
13, standardization of various browsers prefix
14, to avoid lengthy selector
Script optimization: 1, and refluxed for reducing redraw
2, DOM cache Selection and Computation
3, to make use of the event broker, to avoid the bulk binding event
4, to make use of ID selector
5, using touchstart, touchend place of the Click
. 6, the rational use of the throttle and anti-shake
7, avoid unnecessary jump, reasonable canceled browser default event
8, avoid 404
9 configuration ETags
10, less global variables, try to use local variables
11, a number of variables or constants consolidated statement
Rendering optimization: 1, HTML using viewport
2, reducing the DOM node
3, try to use css3 Animation
4, rational use of requestAnimationFrame animation instead of the setTimeout
5, the proper use of canvas animation
6, Touchmove, Scroll events can result in multiple rendering
7, use css3 transitions, css3 3D transforms, Opacity, Canvas, WebGL, Video to trigger GPU rendering
in conclusion:
Correct nested boxes, avoiding empty tags, vacuity
avoid lengthy selector
normalized prefix various browsers
use sprite, reduce server requests
to avoid using the label attribute
value is 0 when the belt unit does not need to
try not to reset picture size
webP better than jpg, png8 better than gif
throttled and image stabilization
using the pre-loaded and lazy loading, asynchronous loading third-party resources
to use compression tool, and compress HTML, css, JavaScript
using a long connection
to reduce the cookie
use event delegation
avoid Jump necessary and reasonable use of the browser's default event canceled
less global variables, the use of local variables, number of variables or constants can be combined statement
the rational use of requestAnimationFrame animation instead of setTimeout