前端性能优化方案

• 减少DOM的访问次数，可以将DOM缓存到变量中；

• 减少重绘和回流，任何会导致重绘和回流的操作都应减少执行，可将多次操作合并为一次；

• 尽量采用事件委托的方式进行事件绑定，避免大量绑定导致内存占用过多；

• css层级尽量扁平化，避免过多的层级嵌套，尽量使用特定的选择器来区分；

• 动画尽量使用CSS3动画属性来实现，开启GPU硬件加速；

• 图片在加载前提前指定宽高或者脱离文档流，可避免加载后的重新计算导致的页面回流；

• css文件在标签中引入，js文件在标签中引入，优化关键渲染路径；

• 加速或者减少HTTP请求，使用CDN加载静态资源，合理使用浏览器强缓存和协商缓存，小图片可以使用Base64来代替，合理使用浏览器的预取指令prefetch和预加载指令preload；

• 压缩混淆代码，删除无用代码，代码拆分来减少文件体积；

• 小图片使用雪碧图，图片选择合适的质量、尺寸和格式，避免流量浪费。使用picdiet压缩图片，使用ffmpeg压缩视频