前端性能优化整理

2017年07月03日 陈鑫杰

前端 性能 优化

摘要: 每年参加一两次的技术会议,可以更好的发掘自身的短板与不足。一味的埋头苦干,不跟时代潮流相交集,那只是外强中干而已。谨自勉之!

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.

(转载本站文章请注明作者和出处 FoamValue – www.foamvalue.com ——=== 访问 404页面 寻找遗失儿童。 ===——