前端性能优化

网络请求

1.CSS、JS文件的合并或者压缩

多个CSS、JS文件合成一个，再利用工具（webpack）压缩，或者是less转css，es6转es5等语法整合

能够减少HTTP请求次数

2.精灵图技术

把一些小图合并到一张大图上面，使用的时候通过背景加定位

能够减少HTTP请求次数

3.图片懒加载和数据懒加载

在加载页面时只加载前几屏，随着页面的滑动继续加载下面的内容

减少单次内容的大小

4.利用字体图标代替图片

字体图标更加轻量化

减少HTTP请求次数，减少请求内容的大小

5.浏览器的缓存处理

对于某些不经常更新的数据，将其保存在浏览器本地缓存中，在此打开页面时优先从本地缓存中获取

减少HTTP请求次数

6．Audio和Video标签设置preload:none

页面加载时不加载音频、视频资源，只有在播放时才加载

减少请求内容的大小

7.客户端和服务端利用JSON数据格式传输

JSON数据格式直观、数据更加轻量化

减少请求内容的大小，减化数据处理过程

8.采用CDN加速

在最近的服务器查找数据

缩短数据传输时间

代码优化

1.提高代码重复使用率

在CSS中抽离出公共类

2.CSS放在head中，JS放在body尾部

3.尽量少使用标签选择器、ID选择器，选择器前的前缀也尽量缩减

4．CSS3动画代替JS动画

5.尽量减少对DOM的操作

操作DOM会产生回流和重绘

6.多使用异步编程

各部分独立加载互不影响

7.避免一次循环过多数据

循环时同步操作吗，且会产生死循环

8.JS中避免使用eval

性能消耗大、代码压缩时容易出现问题

9.JS中尽量少使用闭包

容易造成内存泄漏

10.多使用事件委托