前端性能优化及其原理

前端性能优化的那些事！

①　减少请求资源大小和次数

②　代码优化

③　存储相关

一、减少请求资源大小和请求次数

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）做一些简单数据的存储，
　　避免向后台请求数据或者说在离线状态下做一些数据展示。