前端性能优化

1.减少HTTP请求数量
　　1）将多张图片合并成一张图片
　　2）合并css和js文件

2.压缩js和css

3.css放顶部，js放底部
　　浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。

4.去除重复脚本

5.减少DOM操作

6.懒加载

7.减少重排（Reflow）
　　重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升。

8.图标使用iconFont替换

9.使用CDN
　　用户与服务器的物理距离对响应时间也有影响。把内容部署在多个地理位置分散的服务器上能让用户更快地载入页面。内容分发网络（CDN）是一组分散在不同地理位置的web服务器，用来给用户更高效地发送内容。

10.利用浏览器缓存
　　浏览器缓存分强缓存和协商缓存，他们是将网络资源存储在本地，等待下次请求该资源时，如果命中就不需要到服务器重新请求该资源，直接在本地读取该资源。
　　1）强缓存：在 web 服务器返回的响应中添加 Expires 和 Cache-Control Header。
　　2）协商缓存：通过【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对 Header 分别管理。

11.配置ETags
　　实体标签（ETags），是服务器和浏览器用来决定浏览器缓存中组件与源服务器中的组件是否匹配的一种机制，如果ETags匹配成功，会返回一个304状态码。

 

参考：1.https://segmentfault.com/a/1190000006922364
　　    2.https://www.cnblogs.com/xianyulaodi/p/5755079.html#_label7