A Roadmap
  • Introduction
  • Roadmap
  • Basics
    • Basic Terminal Usage
      • Shell
        • 基本
        • 变量
        • 传递参数
        • 运算符
        • 命令
        • 流程控制
        • 函数
        • 输入输出重定向
    • Character Encoding
      • 字符编码
    • Data Structures & algorithms
    • Network
      • TCP/IP
      • Http/Https
        • 浏览器缓存
        • Status Code
        • GET & POST
        • HTTPS 握手过程
        • HostOnly Cookie
      • CDN
        • CDN 工作原理
    • Version Control
      • git message format
      • git commands
    • Principles
    • Design Patterns
    • Others
      • JSON
      • 正则表达式
  • Front End
    • Web Standard
      • Html
      • CSS
        • font-face 小记
        • Grid 布局简易笔记
      • Javascript
        • Ajax
          • Fetch
          • XMLHttpRequest
        • DOM
          • Selection
          • 常用 DOM 操作
          • script 标签的几个属性
        • Ecmascript
          • this 关键字
          • Event Loop
          • 隐式转换
          • Date
        • Event
          • 模拟事件
          • Others
    • Development
      • Package Management
        • npm
      • Modulization
        • 模块化机制
        • webpack 打包解析
      • Architecture
      • Build Tools
        • 如何编写一个自定义的 eslint 规则?
      • Debug
        • 移动端调试 web
      • Pre/Post Processors
      • Test
        • Jest Snapshot 使用指南
      • Type Checkers
        • TS 中 enum 的编译结果
    • Libs & frameworks
    • Platforms
      • Browser
        • Basics
          • 从输入 URL 到页面加载完成都发生了什么事情?
          • HTML 加载的过程示意图
          • 为什么读取某些属性,也会导致回流?
          • Chrome 进程模型
        • PWA
        • Compatible
        • Cross Origin
        • Performance
          • 性能检测:performance 对象
          • 性能指标
        • Others
          • 移动端 web 开发笔记
      • Server
      • Desktop Applications
      • Mobile Applications
        • Flutter 在移动端和 Web 端的技术实现
  • Back End
    • outline
    • Languages
      • Node
        • Event Loop
        • NodeJS 中的进程与线程
        • NodeJS 中的 esModule 与 commonJS
  • Clients
    • outline
    • 安装 IPA 包
  • DevOps
    • Languages
    • OS Concepts
    • Servers & terminal
  • UI & UX
    • outline
  • Others
    • Posts
      • 使用 node 爬取数据并导出到 excel
      • antd 1.x datepicker 时区问题
      • babel-transform-runtime 踩坑记录
      • lodash 按需加载注意事项
      • 记一次项目迁移的踩坑记录
      • 时区与JS中的Date对象
      • 记一次 vue + ts 开发踩坑
    • Tools
      • 个人常用的工具分享
      • tmux 简要笔记
Powered by GitBook
On this page
  • 几个关键词
  • FP (First Paint)
  • FCP (First Contentful Paint)
  • FMP (First Meaningful Paint)
  • Visually Ready (视觉上已经加载完成)
  • First Interactive
  • Visually Complete

Was this helpful?

  1. Front End
  2. Platforms
  3. Browser
  4. Performance

性能指标

Previous性能检测:performance 对象NextOthers

Last updated 3 years ago

Was this helpful?

几个关键词

在开始深入了解性能监控之前,应该要关注以下几个问题:

  • “它正在运行吗?”

  • 我的网页浏览开始了吗(服务器有回应,等等)?

  • “它有用吗?”

  • 页面上是否有足够关键的内容使我能够理解?

  • “它可以使用了吗?”

  • 我能不能和页面互动了呢?还是它依旧处于加载状态?

  • “用户体验良好吗?”

  • 是否没有滚动卡顿、动画卡顿、无样式内容闪烁和缓慢的 Web 字体文件加载等问题出现,让我感到惊喜?

让我们想一想,哪些指标可以回答这些问题?

FP (First Paint)

这个指标表示页面绘制的时间点,换句话说它表示当用户第一次看到白屏的时间点.

FCP (First Contentful Paint)

这是当用户看见一些“内容”元素被绘制在页面上的时间点。和白屏是不一样的,它可以是文本的首次出现,或者 SVG 的首次出现,或者 Canvas 的首次出现等等。

FCP 可以用来回答,“它运行了吗?”

FCP 事件在文本(正在等待字体文件加载的文本不计算在内)、图片、Canvas 等元素绘制期间就已经被触发了。因此,FP 和 FCP 的时间差异可能从几毫秒到几秒不等。这个差别甚至可以从上面的图片中看出来。这就是为什么用一个指标来表示真实的首次内容绘制是有价值的。

FMP (First Meaningful Paint)

FMP 可以用来回答,“它有用吗?”

有意义的内容指什么?比如:

  • 博客的标题和文本

  • 搜索引擎的搜索文本

  • 对于电子商务产品来说重要的图片

但是下面的内容则不属于有意义的内容:

  • 下拉菜单或类似的东西

  • 无样式内容闪烁(FOUC)

  • 导航条或页面标题

如果主要内容很久都没有展示出来,可能是因为太多资源(图片、样式、字体、JavaScript)有较高的加载优先级,阻塞了 FMP

Visually Ready (视觉上已经加载完成)

当页面看上去“接近”加载完成,但浏览器还没有执行完所有脚本文件的状态,比如此时还有异步脚本、link import 加载的样式表、字体文件、预加载/懒加载的图片文件。

First Interactive

简单来说,就是 DOMContentLoaded

Visually Complete

这个时间也是用来回答问题 - 用户体验良好吗?

参考

w3c/paint-timing