前端 性能 优化

前端性能优化整理

陈鑫杰

Lucky Chance!

参加了腾讯前端大牛的前端性能优化培训，感觉自信心又被无情的碾压了一把。

整个培训过程，从浅显一直侃到高深，感觉也是挖了不少坑，填了不少坑的样子。

本文主要是一些摘要、提点性质的文章。

硬件基础

  1. CPU 负责解析、渲染与执行
  2. 内存 DOM树、图片对象、解压数据的存储
  3. GPU 部分渲染（使用到硬件加速）
  4. GPU内存 使用到GPU渲染时，图片、绘制层信息等存储

渲染树

文件对象模型（DOM） + CSS 对象模型（CSSOM） = 渲染树（Render Tree）

浏览器处理 URL 顺序

  1. 解析 HTML，构建 DOM
  2. 请求 CSS & JS 资源
  3. 解析 CSS，构建 CSSOM 树
  4. 执行 JS
  5. 合并 DOM & CSSOM 到渲染树
  6. 布局，绘制

性能瓶颈分析法

  1. 确定性能问题的表现（速度慢、卡顿）
  2. 分析问题所属过程（加载、解析、渲染、计算…）
  3. 分析初步原因，收集问题数据（加载耗时、FPS…）
  4. 本地快速尝试优化手段
  5. 观察验证数据变化

网页加载性能优化

网络访问过程

  1. DNS 解析， 100-200ms，可缓存
  2. TCP 三次握手，100-200ms
  3. HTTP Request，半个 RTT
  4. HTTP Response，RTT不确定

RTT

同一个封包来回时间（Round-Trip Time）

浏览器发送消息到服务器 + 服务器返回消息到浏览器，一次请求来回称为 1 个 RTT。

1 个 RTT，除去 TCP/IP 头信息之外，最多只能传输 14 KB 数据。

不同网络下，RTT 耗时的参考值。

例如：GPRS，50kb/s 下行，20kb/s 上行，500ms RTT。

网络并不是一个稳定环境，经常发生的网络波动，会延长请求的 RTT 时间。

如何优化

  • 渐进式渲染
    • 未优化，页面需要等待 2s 下载完整 CSS 后，才能渲染整个页面。
    • 渐进式，页面先下载一部分 CSS（14KB）并渲染部分页面。直到 2s 后渲染出全部页面。
  • keep-alive（HTTP 持久链接）
    • 减少 TCP 握手消耗的 RTT。
    • 减少 TCP 数量，降低网络阻塞。
  • 资源使用同一域名
    • 减少 DNS 寻址耗时。
  • 资源内联
    • HTML 内联需要的 CSS。
    • 页面渲染后，加载完整的 CSS 文件。
  • 资源加载
    • 只当前页面需要的 CSS、JS。
    • 页面渲染后，预加载其他页面 CSS、JS。
  • 服务端渲染
    • 服务端直接传输 DOM 渲染树。
  • 图片懒加载
    • 页面渲染时，赋值自定义属性，不赋值 src。
    • 页面渲染后，逐步加载图片 src。
  • 网络缓存
    • HTML 304 缓存，每次对比最后修改时间。
    • 静态资源长缓存。
    • 静态资源文件名，增加 MD5 命名。
  • 浏览器数据库缓存
    • Ajax 先调用 Html Storage，如果获取数据，直接渲染页面。
    • 如果 Html Storage 未获取到数据，则获取默认配置数据，直接渲染页面。
    • 同时，异步线程请求 Server 线上数据。
    • 获取 Server 线上数据后，对页面进行二次渲染，并存储到 Html Storage。
  • HTTP 2.0
    • 首部压缩
    • 多路复用
    • 服务端推送
    • 增加 TSL 握手，两次 RTT。

etc.