前端性能指标

标准的技术指标：

Web 性能优化 - 图1

后端时间定义

  • DNS时间：用户在浏览器输入网址名称（网址）后，浏览器通过查询DNS服务器所需要的时间
  • 建立连接时间：根据TCP协议要求，请求方（浏览器等）与接受方（服务器）经过一系列协商所需要的时间
  • 服务器处理时间：接收方（服务器）处理请求所需时间
  • 数据传输时间：从请求方（浏览器等）到接收方（服务器）以及从接收方（服务器）到请求方的时间

前端性能定义

  • 白屏时间：用户浏览器输入网址后至浏览器出现至少1px图片为止
  • 首屏时间：用户浏览器首屏内所有的元素呈现所花费时间
  • 流畅操作时间：N 秒内可操作
  • 用户可操作时间(dom ready) ：网站某些功能可以使用的时间
  • 页面总下载时间(onload):网站中所有资源加载完成并且可用时间

几个具体因素参考和建议：

  • StartRender：
    • StartRender = TTFB + TTDD + TTHE
      • TTFB(Time To First Byte)：发起请求到服务器返回数据的时间
      • TTDD(Time To Document Download)：从服务器加载HTML文档的时间
      • TTHE(Time To Head End)：HTML文档头部解析完成所需要的时间
  • DOMReady
    • DOMContentLoaded DOM 加载完毕。
    • Time To Dom Ready = TTSR + TTDC + TTSR
      • TTSR(Time To Start Render)：浏览器开始渲染的时间
      • TTDC(Time To Dom Created)：DOM树创建所耗时间
      • TTST(Time To Script)：BODY中所有脚本加载和执行的时间
  • PageLoad
    • window.onload 触发的时间。Page Load不仅仅是HTML文档解析完毕还包括了所有资源加载所需要的时间，例如图片资源的加载、iframe的加载等。
  • TTI
    • TTI ( Time To Interact ) 指的是页面可交互的时间。页面中的交互包括很多方面，例如点击一个链接、点击一个搜索按钮都属于页面交互的范畴，但是对于衡量性能的TTI则主要指核心功能可以交互的时间。核心功能的定义则是随着页面的不同而不同，例如对于百度首页而言，最为关键的就是搜索框出现的时间、而对于一些购物网站的商品详情页最关键的是购买功能可用和描述出现的时间。而目前的实际情况，TTI 大都等于 DOM Ready 时间，因为不论交互功能是否重要，相关的 Javascript 都会在 DOM Ready 后才进行初始化和绑定，而实际上 TTI 是可以更早的。

RAIL 的具体含义，这里有一些关键性的数据指标：

  • Respond：0 - 100ms，视窗一般需要在这个时间段响应用户，超过这个时间段，用户就会感觉到延时。
  • Animation：0 - 16ms，屏幕每秒刷新60次，16ms 代表的是每一帧的时间。用户是非常关注动画的，当动画失帧很容易引起用户察觉。所以动画一般要控制在 60FPS。
  • Idle：最大化主进程的空闲时间，这样可以及时响应用户输入。
  • Load：内容需要在 1000ms 内加载出来，超过1000ms 会觉得加载缓慢。

亦或是：

  • 首次有效绘制（First Meaningful Paint，简称FMP，当主要内容呈现在页面上）
  • 英雄渲染时间（Hero Rendering Times，度量用户体验的新指标，当用户最关心的内容渲染完成）
  • 可交互时间（Time to Interactive，简称TTI，指页面布局已经稳定，关键的页面字体是可见的，并且主进程可用于处理用户输入，基本上用户可以点击UI并与其交互）
  • 输入响应（Input responsiveness，界面响应用户输入所需的时间）
  • 感知速度指数（Perceptual Speed Index，简称PSI，测量页面在加载过程中视觉上的变化速度，分数越低越好）
  • 自定义指标，由业务需求和用户体验来决定。

CPU 指标

  • 2/8 原则 将耗时最高的函数进行「核心」优化。

内存指标

  • 内存泄露检查。

核心优化思想

  • 资源传输 Size 优化
  • 更快的硬件速度（网络、CPU、I/O 增强）
  • 更快的执行速度（WebAssembly、Worker 等）
  • 更快的算法（软件执行性能优化，例如 CSS 优化、DOM 优化、并发调度等）
  • 缓存（PWA、LS、SS）
  • 预加载
  • 懒加载

性能分析工具

  • Google Lighthouse
  • JSPerf
  • Google PageSpeed
  • Chrome InsetToolkit
  • Chrome Profiler
  • HTTP Watch
  • WebPagetest：根据用户浏览器真实的连接速度，在全球范围内进行网页速度测试，并提供详细的优化建议。

代码性能优化

编码优化：Ref => 代码性能优化.md

image.png

网络性能优化

网络优化：Ref => 网络性能优化.md

资源优化技术

优化资源内容：

  • 图像优化
    • SVG优化
    • 图像压缩（png gif jpge）
      • 考虑使用 webp 这种高压缩保真图片格式
      • 根据从客户端获取的网络情况替换页面所使用的图片资源
    • 高分屏的适配工作（Retina Display 适配）提高用户体验
    • Sprite 图像（合并请求）
    • 图像 Lazyload：加快访问速度，但是会影响首屏时间
    • Base64 图像压缩嵌入 Document 中，减少请求
  • 媒体优化
    • 声音和视频以及媒体资源的压缩
  • 文档优化：优化、合并、压缩、模块化按需加载

资源预加载：

  • 离线化技术
  • 保活技术
  • PRE-FETCH H5：图片、视频、HTML 等
  • 降低更新频次
  • …

    缓存优化技术

客户端缓存技术

  • LocalStorage
  • SessionStorage
  • Meta-Mainfest 文件中声明的数据缓存信息
  • 使用资源的版本号来更新资源
  • 业务定制缓存技术比如：淘系的 ZCache

服务端缓存技术

  • HTTP头缓存：设置 Expire 以及 Cache-Control 头控制缓存策略
  • 服务端：页面缓存，直接缓存生成的页面不需要重新经过模板引擎合成和数据 Query，直接将 HTML 文件返回给用户，这样可以执行：容灾的任务。
  • 服务端：页面部分缓存，缓存 HTML 的部分，例如：head 以及部分静态片段。
  • 服务端：数据缓存，对高命中率的数据进行缓存，2/8。
    • 查询缓存：将数据库查询的结果进行缓存，可以缓存到文件中，或者内存中，可以节省查询数据库的时间。
    • 分布式高性能的内存式缓存服务器，如：memcached、Apache 缓存模块等。

服务端优化技术

Ref => 服务端性能优化.md

  • 服务端资源压缩工具：Gzip
  • 配置高效率的服务器：Nginx

硬件优化技术

高级优化工具

  • Chunked 分段传输思维
  • Lazyload
  • CDN 节点静态资源加速
  • 心跳 KEEP ALIVE，无线网络层面和信号站的优化，目的在于保持 HTTP 长连接

Ref

标准：

文章：

指南：

front-end-performance-checklist-2018.pdf

实战：