# 什么是前端性能优化

从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。

# 为什么要做前端性能优化

在构建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。

<link rel="dns-prefetch" href="//jkfhto.github.io" />

# TCP连接

通过长连接、预连接、接入 SPDY 协议。优化TCP连接。

# HTTP连接

  • 减少 HTTP请求数
  • 减小请求体积

# CDN

指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本,因此服务器可以根据哪些服务器与用户距离最近,来满足数据的请求。 CDN 提供快速服务,较少受高流量影响。

# 参考

更新时间: 5/13/2020, 11:23:00 PM