前端性能优化

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

1.尽量合并和压缩js与css文件。（将css，js合并成一个文件）

原因：主要是为了减少请求次数，以及减少请求资源的大小。

工具：webpack，gulp等...

2.尽量使用字体图标或者SVG图标来代替png图片。

原因：因为字体图标或者SVG图标是矢量图，是代码编写出来的，放大不会变形。而且渲染速度会很快。

3.采用图片的懒加载模式（延迟加载）

目的：为了减少页面第一次加载过程中http的请求次数。

步骤：（1）页面开始加载时不去发送http请求，而是放置一张占位图。

　　     （2）当页面加载完时，并且图片在可视区域再去请求加载图片信息。

4.尽量动态效果尽量使用css，用到必要js时，避免使用较大的第三方插件。

5.使用雪碧图或者精灵图。

6.减少对cookie的使用。（主要是减少本地cookie存储内容的大小），因为客户端操作cookie的时候这些信息总是在客户端和服务端传递。如果设置不当，每次发送请求将会携带cookie

7.前端与后端进行数据交互时，对于多项数据尽可能基于json格式来进行传递。相对于使用xml来说传输有这个优势。

　　目的：是数据处理方便，资源偏小。

8.前端与后端协商，合理使用keep-alive

9.前端与服务器协商，使用响应资源的压缩。

10.避免使用iframe。不仅不好管控样式，而且相当于在本页面又嵌套其他页面。消耗性能会更大。

11.在基于ajax的get请求进行数据交互的时候，根据需求可以让其产生缓存。

二、代码优化相关

1.在js中尽量减少闭包的使用。

　　原因：使用闭包后，闭包所在的上下文不会被释放。

2.减少对DOM的操作，主要是减少DOM的重绘与回流（重排）

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

3.在js中避免嵌套循环和‘死循环’（递归要有结束条件，不然造成浏览器直接卡死）

4.减少css表达式的使用。

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

6.使用window.requestAnimationFrame(js的帧动画)代替传统的定时器动画，使用定时器尽量使用setTimeout避免使用setInterval定时器。因为setInterval存在弊端：可能造成两个动画时间间隔缩短。

7.尽量减少使用递归。避免死递归。建议使用尾递归。

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

9.减少flash的使用。

 

三.存储

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

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

 

四.其他优化

1.页面中的数据采用异步编程和延时分批加载，使用异步加载数据主要是为了避免浏览器造成阻塞失去响应。如果使用同步页面速度会加载很慢。

　　那么页面会在一段时间内处于阻塞状态。目的：为了解决请求数据不耽搁渲染，提高页面的渲染效率。解决方法：需要动态绑定的是数据区域先隐藏。等数据放回并且绑定后在让其显示延迟分批加载类似图片懒加载。减少第一次见面加载时候的http请求次数。

2.页面中出现音视频标签，我们不让页面加载的时候去加载这些资源（否则第一次加载会很慢）

　　解决方法：只需要将音视频preload = none即可。

　　目的：为了等待页面加载完成时，并且音视频播放的时候去加载音视频资源。