前端性能优化方案

1、减少闭包的使用（闭包会产生不释放的栈内存），所以我们往往需要手动释放内存

2、尽量合并css、js代码，可以减少http请求次数，例如常见的自动化构建工具，如webpack、gulp等，对于移动端开发，如果一个页面的内容不是很多，可以把css，html，js写在一个页面中，减少http请求次数

3、尽量使用字体图标和SVG代替传统的png等格式的图片，因为字体图标是矢量图，放大缩小时不会失帧，这些矢量图是用代码编写出来的，渲染速度相对位图要快

4、减少对DOM的操作，主要是减少对DOM的重绘和回流（重排）

5、避免嵌套循环和死循环

6、避免使用递归，会导致栈内存嵌套，可以使用尾递归

7、采用懒加载（延迟加载），为了减少首页加载时发出的http请求次数，使得页面打开的速度更快，在首页开始加载时，真实的图片是不会发出http请求的，只有在数据加载完成以及需要加载的图片出现在用户的可视区域才进行加载

8、利用浏览器和服务器端的缓存技术（304缓存），把一些不需要经常更新的静态资源做缓存处理，比如一些js，css，静态图片img

9、尽可能使用事件委托或者事件代理进行对DOM的操作，避免对DOM元素的频繁绑定事件

10、尽量减少css表达式的使用，因为css解析器解析时是按照从右至左的顺序开始解析的

11、css可以采用雪碧图（css sprite）

12、页面中数据的获取采用异步编程和延迟加载，防止http请求堵塞

13、减少对cookie的操作，因为客户端携带cookie时，这些数据总是会在客户端和服务度频繁的传来传去

14、页面中出现对音视频的加载时，我们首先拒绝先加载音视频，会拖慢页面加载速度，可以对其设置preload=‘none’，等待页面数据加载完成之后在进行加载

15、进行for循环操作时，这样写for(var i= arr.length; i >= 0; i--) { ... }，可以提高性能

16、尽可能实现对js的封装（低耦合高内聚）（Don't repeat yourself），这样可以减少页面的冗余代码，减少http请求时的大小

17、尽量减少对css 滤镜属性filter的使用，这个属性消耗性能有点大

18、css导入时，不要使用@import方法，这种方式是同步的，而要使用link这种方式，因为该方式是异步的

19、开启服务器端gzip压缩，但是这可能会导致一些高清24位图片变得模糊

20、使用window.RequestAnimationFrame（JS帧动画）来代替定时器动画

21、标签符合语义化，header、nav、article、section、main、small、footer...

22、终极优化，采用CDN加速（如果公司有钱的话），地域式服务器分布，在一些热门区域附近设置服务器机组。

备注：如果采用22条，以上21条可以考虑忽略（仅个人观点O(∩_∩)O哈哈~）。