前端性能优化的方法

前端性能的优化可从网络请求过程、浏览器渲染过程、用户操作过程三个方面来考虑：

1. 网络请求过程的优化

1.1 减少http请求次数

多个资源（图片、js脚本）合并为1个；

使用缓存；

图片懒加载

1.2 减少http请求的数据量

代码（js、css）压缩（uglify）；

图片压缩、使用合适的格式；

按需加载；

1.3 CDN

CDN内容分发网络用于为用户提供物理上更近和更低延迟的资源

1.4 减少重定向

2. 浏览器渲染过程

2.1 CSS加载优化

样式表放顶部；

避免@import:url()的方式，加载速度慢

2.2 CSS代码优化

font、margin、padding、border、background等使用简写；

减少无效属性，比如设置display:inline后就不要设置width、margin等属性；

避免使用复杂的选择器，层级越少越好；

利用继承，减少代码量；

2.3 JS加载优化

脚本放底部；

异步加载；Ajax、<script>标签的async属性（开启另一个线程下载这个脚本，一旦下载完成就会执行）；

懒加载： <script>标签的defer属性；

2.4 JS代码优化

避免频繁的DOM操作：

innerHTML代替DOM操作；

批量增加删除节点时，使用documentFragment或将元素的display样式设为none；

需要设置很多样式时：设置className而非直接操作style或先克隆节点，在克隆节点上操作后再替换原来的节点；

使用局部变量缓存动态更新的值，如DOM节点查询的结果（HTML Collection）的length、元素的offsetWidth等属性；

事件委托

避免eval

4. 用户操作的角度

web worker开启另一个线程，防止浏览器出现“假死”，提升用户体验。

Ajax异步请求，不用刷新页面；

  预加载；