终端性能优化杂谈

[hoperyy]

性能优化的理论方法

• Yahoo！性能军规（Best Practices for Speeding Up Your Web Site）
• Google PageSpeed Insights Rules（https://developers.google.com/speed/docs/insights/rules）

常用工具

• Chrome 自带的 Dev Tools
• Google 推出的 PageSpeed Insights
• Lighthouse

Browser Processing Model

术语

• redirect: timing.fetchStart - timing.navigationStart
• dns: timing.domainLookupEnd - timing.domainLookupStart
• connect: timing.connectEnd - timing.connectStart
• network: timing.connectEnd - timing.navigationStart
• load: timing.loadEventEnd - timing.navigationStart
• domReady: timing.domContentLoadedEventStart - timing.navigationStart
• interactive: timing.domInteractive - timing.navigationStart
• ttf: timing.fetchStart - timing.navigationStart
• ttr: timing.requestStart - timing.navigationStart
• ttdns: timing.domainLookupStart - timing.navigationStart
• ttconnect: timing.connectStart - timing.navigationStart
• ttfb: timing.responseStart - timing.navigationStart
• firstPaint: timing.msFirstPaint - timing.navigationStart

核心指标

• 非视觉指标（Non-Visual Metrics）

  • 首字节时间（用于衡量网络链路和服务器响应性能）
  • 白屏时间（firstPaint）
  • 可交互时间（interactive）
  • 完全加载时间（load）

• 感官指标（Visual Metrics）

  • First Paint Time (First Non-Blank Paint Time)

    文档中任一元素首次渲染的时间

  • FCP: First Contentful Paint Time

    代表文档中内容元素（文本、图像、Canvas，或者 SVG）首次渲染的时间。

    它通常情况下是无意义的渲染，比如头部和导航条。

  • FMP: First Meaningful Paint Time

    首次有意义的渲染时间（它的统计在重大的布局变化之后，往往代表了用户所关心的首次渲染时间）。

  • First Interactive Time

    首次可交互时间

  • Consistently Interactive Time

    持续可交互时间

  • Fisrt Visual Change

    首次视觉发生变化的时间点

  • Last Visual Change

    最后一次视觉发生变化的时间点

  • Speed Index (SI)

    视觉速度：Mean Pixel-Histogram Difference 算法。

    算法如下，它代表了我们页面在加载过程中视觉上的变化速度，其值越小代表感官性能越好：

    

  • PSI: Perceptual Speed Index(PSI)

    视觉速度：Structural Similarity Image Metric 算法。

    更贴近用户的真实感受。

重点指标

• 非视觉指标（Non-Visual Metrics）

  • 首字节时间（用于衡量网络链路和服务器响应性能）
  • 白屏时间（firstPaint）
  • 可交互时间（interactive）
  • 完全加载时间（load）

• 感官指标（Visual Metrics）

  • FCP
  • FMP
  • PSI

落地工具

• 开发阶段

  • Chrome 自带的 Dev Tools
  • Lighthouse
  • 同时借助非视觉指标（Non-Visual Metrics）和视觉指标（Visual Metrics）进行分析

• 生产状态

  • 用研：眼动仪、用户沟通、用户反馈、调研问卷、专家评估，缺点是无法量化
  • 自研：跨平台对标分析

优化策略

• 纯前端离线化（在浏览器中通过纯前端的手段进行资源文件的离线化）
• 客户端离线化（在客户端容器内通过离线包的方式实现资源文件及页面的离线化）
• 页面组件化并按需加载（通过组件化方式对页面细粒度拆分并按需加载）
• 预渲染提升感官性能（在框架启动之前，通过预渲染的方式确保页面框架最快呈现）

lighthouse 分析

• https://developers.google.com/web/tools/lighthouse

• Chrome 对速度的描述

  https://developers.google.com/web/tools/lighthouse/audits/speed-index

• Navigation_timing_API

  https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

• Speed Index 算法

  • https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index
  • https://github.com/GoogleChrome/lighthouse/blob/master/lighthouse-core/audits/metrics/speed-index.js

常用性能监控方案

• 全量
• 抽样

参考资料

• https://tech.meituan.com/2017/09/22/optimization-of-front-end-sensory-properties.html