前端性能优化方案

1.减少http请求次数
2.使用http2.0代替http1.1 （头部压缩，服务器推送，多路复用，二进制传输）
3.静态资源使用CDN (CSS,HTML,img)
4.css放头部 JS文件放底部 （CSS不阻止页面的解析，但组织页面的渲染） （JS阻止页面的解析）
5.使用iconfont代替图片
6.使用图片懒加载
7.按需加载
按需加载就是把不同路由对应的组件分割成不同代码块。
如果没有使用懒加载，项目打包后所有JS都在一个文件中，容易造成页面长时间白屏。使用按需加载，需要的时候加载页面，有效分担页面压力。
原理：

• 将需要进行懒加载的子模块打包成单独的文件。
• 使用函数实现子模块的延迟加载。（将需要进行懒加载的子模块文件的引入语句（import()）放入函数中等待函数被调用）

8.使用requestAnimationFrame()实现动画效果。
window.requestAnimationFrame()接受一个函数为参数，用法与setInterval()相似。但不用设置时间间隔。执行频率与浏览器的刷新频率相同（每秒60帧）。把每一帧中的DOM操作都集中起来，在一次的重绘/重排中完成（高性能）。在隐藏或者不可见元素中,requestAnimationFrame将不会进行重绘/重排（高性能）。
取消动画帧 window.cancelAnimationFrame()

9.使用transform和opacity实现视觉变化
浏览器对transform开启GPU加速。
transform和opacity的实现都在合成层。不会引起页面的重绘/重排。

10.使用flex替代以往的传统布局方案。

11.使用事件委托

12.减少重绘/重排

• HTML标签尽量语义化，降低HTML标签层级。
• 添加DOM使用 document.createDocumentFragement(文档碎片)。用来创建一个文档碎片，他是一个虚拟节点，不属于文档树。将这个虚拟节点插入文档后，插入的并不是文档本身。而是文档碎片的子节点。它能够减少页面的渲染次数，提高性能。
• 动画效果脱离文档流
• 避免使用table布局