前端性能优化

性能优化：

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

1、尽量和并和压缩css和js文件。（将css文件和并为一个。将js合并为一个）
　　原因：主要是为了减少http请求次数以及减少请求资源的大小
　　打包工具：
　　webpack
　　gulp
　　grunt
.　　....
2、SVG图标来代替传统png图
　　因为SVG是矢量图，代码编写出来的，方大不会变形，而且渲染速度快

3、采用图片的懒加载（延迟加载）
　　目的为了，减少页面第一次加载过程中http的请求次数
　　具体步骤：
　　　　1、页面开始加载时不去发送http请求，而是放置一张占位图
　　　　2、当页面加载完时，并且图片在可视区域再去请求加载图片信息

4、能用css做的效果，不要用js做，能用原生js做的，不要轻易去使用第三方插件。
　　避免引入第三方大量的库。而自己却只是用里面的一个小功能

5、减少对cookie的使用（最主要的就是减少本地cookie存储内容的大小），因为客户端操作cookie的时候，这些信息总是在客户端和服务端传递。

6、前端与后端进行数据交互时，对于多项数据尽可能基于json格式来进行传送而不是使用xml。
　目的：是数据处理方便，资源偏小

7、前端与后端协商，合理使用keep-alive

 

二、代码优化相关

1、在js中尽量减少闭包的使用
　　原因：使用闭包后，闭包所在的上下文不会被释放

2、减少对DOM操作，主要是减少DOM的重绘与回流（重排）
　　关于重排（回流）的分离读写：如果需要设置多个样式，把设置样式全放在一起设置，不要一条一条的设置。使用文档碎片或者字符串拼接做数据绑定（DOM的动态创建）

3、在js中避免嵌套循环和"死循环"(一旦遇到死循环，浏览器就会直接卡掉)

4、把css放在body上，把js放在body下面
　　让其先加载css（注意：这里关于优化没有多大关系）

5、减少css表达式的使用

6、在js封装过程中，尽量做到低耦合高内聚。减少页面的冗余代码

7、css导入的时候尽量减少@import导入式，因为@import是同步操作，只有把对应的样式导入后，才会继续向下执行，而link是异步的操作

8、尽量减少使用递归。避免死递归
　　解决：建议使用尾递归

9、基于script标签下载js文件时，可以使用defer或者async来异步加载

10、在事件绑定中，尽可能使用事件委托，减少循环给DOM元素绑定事件处理函数。

三、存储

1、结合后端，利用浏览器的缓存技术，做一些缓存（让后端返回304，告诉浏览器去本地拉取数据）。（注意：也有弊端）可以让一些不太会改变的静态资源做缓存。比如：一些图片，js，cs

2、利用h5的新特性（localStorage、sessionStorage）做一些简单数据的存储，
　　避免向后台请求数据或者说在离线状态下做一些数据展示。