什么是前端性能优化
从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。
为什么要做前端性能优化
在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失。
从浏览器发起请求到页面能正常浏览都有哪些阶段
- DNS 解析
- TCP 连接
- HTTP 请求抛出
- 服务端处理请求，HTTP 响应返回
- 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户
针对这五个过程进行分解，我们可以将前端性能优化划分为网络层面和渲染层面两个大的维度，并以此来进行扩展，学习。
性能优化的具体方法
内容层面
- 1、DNS解析优化（DNS缓存、减少DNS查找、keep-alive、适当的主机域名）
- 2、避免重定向（/还是需要的）
- 3、切分到多个域名
- 4、杜绝404
网络传输阶段
- 1、减少传输过程中实体的大小
- 缓存
- cookie优化
- 文件压缩（Accept-Encoding：g-zip）
- 2、减少请求的次数
- 文件适当的合并
- 雪碧图
- 3、异步加载（并发）
- 4、预加载、延后加载、按需加载
渲染阶段
- 1、js放底部，css放顶部
- 2、减少重绘和回流
- 3、合理使用Viewport 等meta头部
- 4、减少dom节点
脚本执行阶段
- 1、缓存节点，尽量减少节点的查找
- 2、减少节点的操作（innerHTML）
- 3、避免无谓的循环，break、continue、return的适当使用
- 4、事件委托
DNS 预解析
DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。
1 | <link rel="dns-prefetch" href="//jkfhto.github.io" /> |
TCP连接
通过长连接、预连接、接入 SPDY 协议。优化TCP连接。
HTTP连接
- 减少 HTTP请求数
- 减小请求体积
CDN
指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最近，来满足数据的请求。 CDN 提供快速服务，较少受高流量影响。