浏览器性能分析相关

查官方文档

1. 页面整体的性能数据之 performance

image.png

window.performance.timing对象包含了完整的网页加载性能数据, 下面详细介绍如何通过对象各个属性获取页面加载期间各个阶段的性能

• 页面加载的第一个时间点是navigationStart, 表示上一个页面的unload事件触发, 接下来的事件点是fetchStart, 表示开始获取当前页面内容. fetchStart时间点和navigationStart时间点之间的时间差是浏览器内核为加载新页面做的一些准备工作耗时.
• 获取页面内容的第一步是查询是否有跟页面相关的资源缓存, 查询完毕之后, 会触发开始DNS解析的时间点domainLookupStart. domainLookupStart时间点和fetchStart事件点之间的时间差是查询缓存所消耗的时间.
• DNS解析结束的时间点是domainLookupEnd. domainLookupEnd时间点和domainLookupStart时间点之间的时间差是DNS解析消耗的时间
• DNS解析技术之后会开始建立TCP连接, TCP连接开始和结束的时间点分别是connectStart和connectEnd. connectStart时间点紧接着domainLookupEnd时间点, connectEnd时间点和connectStart时间点之间的时间差是建立TCP消耗的时间.
• TCP连接建立之后, 开始发送请求内容至服务器端, 这个时间点是requestStart. 服务器端接收到完整请求并处理完毕后, 会将响应结果返回客户端, 开始发送响应结果的时间点为responseStart. 浏览器收到完整的响应结果之后, 会触发responseEnd时间点
• 浏览器接收到响应的结果之后, 会开始DOM树解析, 这个时间点是domLoading, DOM解析完成的时间点是domInteractive. DOM解析完成是指DOM树构建完成, 页面依赖的外部资源, 如css, javascript, 图片等. 还未开始加载.(domLoading时间点不一定在responseEnd时间点之后, 有可能浏览器只接受了部分响应数据就开始解析DOM树)
• DOM树解析完成之后, 会开始按照顺序运行页面脚本和加载依赖外部资源, 其中Javascript资源会同步加载和执行. 一但所有页面脚本运行完毕, 会触发DOMContentLoaded事件, 这个时间点是domContentLoadedStart.
  开发者注册的DOMContentLoaded事件执行完毕之后, 会触发domContentLoadedEnd时间点.
• 当依赖的外部资源全部加载并解析完成之后, 会触发domComplete时间点, 同时会发触发暴露给开发者的load事件. loadEventStart时间点表示load事件开始触发, loadEventEnd时间点表示所有开发者注册在load事件上的脚本执行完毕.

页面依赖资源的加载性能

image.png

2. 关键名词

image.png

image.png

FP (First Paint) 首次绘制

FP (First Paint) 首次绘制: 标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点.

FCP (First Contentful Paint) 首次内容绘制

FCP (First Contentful Paint) 首次内容绘制 标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至 元素.

LCP (Largest Contentful Paint) 最大内容渲染

LCP (Largest Contentful Paint) 最大内容渲染: 代表在viewport中最大的页面元素加载的时间. LCP的数据会通过PerformanceEntry对象记录, 每次出现更大的内容渲染, 则会产生一个新的PerformanceEntry对象.(2019年11月新增)

DCL (DomContentloaded)

DCL (DomContentloaded): 当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的完成加载.

FMP(First Meaningful Paint) 首次有效绘制

FMP(First Meaningful Paint) 首次有效绘制: 例如，在 YouTube 观看页面上，主视频就是主角元素. 看这个csdn的网站不是很明显, 这几个都成一个时间线了, 截个weibo的看下. 下面的示例图可以看到, 微博的博文是主要元素.

L (onLoad)

L (onLoad), 当依赖的资源, 全部加载完毕之后才会触发.

TTI (Time to Interactive) 可交互时间

TTI (Time to Interactive) 可交互时间: 指标用于标记应用已进行视觉渲染并能可靠响应用户输入的时间点.

TBT (Total Blocking Time) 页面阻塞总时长

TBT (Total Blocking Time) 页面阻塞总时长: TBT汇总所有加载过程中阻塞用户操作的时长，在FCP和TTI之间任何long task中阻塞部分都会被汇总.
来个例子说明一下:在主线程上运行任务所花费的总时间为560毫秒，但只有345(200 + 40 + 105)毫秒的时间被视为阻塞时间(超过50ms的Task都会被记录).

FID (First Input Delay) 首次输入延迟

FID (First Input Delay) 首次输入延迟: 指标衡量的是从用户首次与您的网站进行交互（即当他们单击链接，点击按钮等）到浏览器实际能够访问之间的时间, 下面来张图来解释FID和TTI的区别:

CLS (Cumulative Layout Shift) 累积布局偏移

CLS (Cumulative Layout Shift) 累积布局偏移: 总结起来就是一个元素初始时和其hidden之间的任何时间如果元素偏移了, 则会被计算进去, 具体的计算方法可看这篇文章 https://web.dev/cls/

SI (Speed Index)

SI (Speed Index): 指标用于显示页面可见部分的显示速度, 单位是时间,

在官方的网站：https://web.dev/ 可以查看详细的解释和说明.
1.性能分析页面

image.png

工具条： 包含录制，刷新页面分析，清除结果等一系列操作
Overview总览图：高度概括随时间线的变动，包括FPS，CPU，NET
火焰图：从不同的角度分析框选区域 。例如：Network，Frames, Interactions, Main等
总结区域：精确到毫秒级的分析，以及按调用层级，事件分类的整理

【Overview】

Overview 窗格包含以下三个图表：
　　1、FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿
　　2、CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型
　　3、NET。每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间）
　　可以放大显示一部分记录，以便简化分析。使用 Overview 窗格可以放大显示一部分记录。 放大后，火焰图会自动缩放以匹配同一部分
　　选择部分后，可以使用 W、A、S 和 D 键调整您的选择。 W 和 S 分别代表放大和缩小。 A 和 D 分别代表左移和右移

【火焰图】

在火焰图上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件
　　在火焰图中选择事件时，Details 窗格会显示与事件相关的其他信息

【总结区域】

蓝色(Loading)：网络通信和HTML解析
黄色(Scripting)：JavaScript执行
紫色(Rendering)：样式计算和布局，即重排
绿色(Painting)：重绘
灰色(other)：其它事件花费的时间
白色(Idle)：空闲时间
Loading事件

参考链接:

https://developers.google.com/web/showcase ( First Input Delay)
https://web.dev/speed-index/ (speed-index)
https://web.dev/tbt/ (Total Blocking Time)
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event ( DOMContentLoaded )
一文彻底搞懂前端监控-51CTO.COM
https://juejin.im/post/5dd6682e6fb9a05a7e67123b#heading-2
https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#%E8%80%97%E6%97%B6%E8%BE%83%E9%95%BF%E7%9A%84%E4%BB%BB%E5%8A%A1
Web性能领域常见的专业术语 - 知乎 (zhihu.com)