前端性能优化的那些事！
① 减少请求资源大小和次数
② 代码优化
③ 存储相关
一、减少请求资源大小和请求次数
1、压缩与合并css，js等
原因：较少请求次数以及资源的大小
方法：gulp ， webpack，grunt
2、多用SVG或字体图标代替 png图
原因：二者矢量图，代码编写出来的，放大不会变形，渲染速度更快
3、图片懒加载
原因：减少一次请求过多，降低http请求次数
①：通过滚动计算实现懒加载，当滚动到页面最后位置时进行请求
②：幻灯片相册等，可以使用图片预加载，将当前图片的前一张和后一张优先下载。
③：css图片（CSSscript，SVGscript，iconfont，Base64）
④：图片过大--缩略图（vue-lazyload）
4、能用css，尽量不用js。能用原生js，尽量不用插件
原因：避免dom操作，避免引入大量的第三方库
5、使用雪碧图 精灵图
6、少用cookie
原因：cookie总是在客户端与服务端传递，使用不当，会造成发送时携带cookie
7、前后端交互，数据尽量json格式
原因：数据才处理方便，体积小
8、前后端协商合理使用keep-alive
使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。
9、前端与服务器协商，使用响应资源的压缩
10、避免使用iframe
11、在基于ajax的get请求进行数据交互的时候，根据需求可以让其产生缓存
二、代码相关优化
1、减少闭包使用
原因：闭包所在上下文不会被释放
2、减少dom操作
原因：降低回流和重绘的此时
3、避免循环嵌套和死循环
4、减少css表达式的使用
5、css放在body上边加载，js放在body下面加载
6、css选择器解析规则所示从右往左解析的。减少元素标签作为对后一个选择对象
7、尽量将一个动画元素单独设置为一个图层（图层不要过多）
8、低耦合高内聚
9、最好使用z-index 让每一层不在同一平面上
10、减少递归的使用
11、基script标签下载js四，使用defer或async异步加载
12、尽可能使用事件委托 绑定事件
13、减少flash使用
三、存储相关
1、结合后端，利用浏览器的缓存技术，做一些缓存（让后端返回304，告诉浏览器去本地拉取数据）。（注意：也有弊端）可以让一些不太会改变的静态资源做缓存。比如：一些图片，js，cs
2、利用h5的新特性（localStorage、sessionStorage）做一些简单数据的存储，
避免向后台请求数据或者说在离线状态下做一些数据展示。