WebApp Front End Performance optimization specification

Load optimization
Merging CSS JavaScript
Merging small pictures using Sprite chart
Cache all resources that can be cached
Use the long cache
Using an outer chain reference Css,javascript
Compression Html,css,javascrpt
Enable gzip
Loading with the first screen
Load with On Demand
Using the scroll screen to load
Loading via media query
Add Loading progress bar
Reduce cookies
Avoid redirects
Loading third-party resources asynchronously
CSS optimization
CSS Uninstall header, JavaScript written at tail or async
Avoid empty src such as pictures and IFRAME
Try to avoid resetting the image size
Picture try to avoid using Dataurl
Try to avoid writing the style attribute in the HTML tag
Avoid CSS expressions
Remove an empty CSS rule
Correct use of Display properties
No misuse of float
Do not publish with Web fonts
Do not declare too many font-size
A value of 0 does not require any units
Standardize browser prefixes
Avoid making selectors look like regular expressions
Picture optimization
Using the Smart Map http://zhitu.tencent.com
Use (Css3,scg,iconfont) instead of pictures
Using Srcset
WEBP better than GIF
PNG8 better than GIF
First load not greater than 1014KB
Picture not wider than 640
Scripting optimizations
Reduced redraw and Reflow
Cache Dom Selection and calculation
Cache List
Use time proxies as much as possible to avoid bulk binding events
Use the ID selector as much as possible
Use Touchstart,touchend instead of click
Rendering optimization
HTML using viewport
Reduce DOM nodes
Use CSS3 animations as much as possible
Rational use of requestanmationframe animation instead of settimeout
Use canvas animations appropriately
Touchmove,scroll event causes multiple renderings
Use (CSS3 transtions,css3 3D transforms,opacity,canvas,webgl,video) to start GPU rendering

WebApp Front End Performance optimization specification