性能分析工具和 Performance API

性能分析

灯塔（lighthouse）指标详解
性能名词解释
- FCP (First Contentful Paint)
- LCP (Largest Contentful Paint)
- TBT (Total Blocking Time)
- CLS (Cumulative Layout Shift)
- TTFB
- FID
- TTI
利用Performance API分析网站性能

灯塔（lighthouse）指标详解

1.Performance（性能）

First Contentful Paint(FCP)：衡量页面开始加载到页面中第一个元素被渲染之间的时间。元素包含文本、图片、canvas等。
Speed Index：代表页面内容渲染所消耗的时间，该值越低越好。
Largest Contentful Paint(LCP)：衡量标准视口内可见的最大内容元素的渲染时间。元素包括img、video、div及其他块级元素。
Time to Interactive(TTL)：测量页面所有资源加载成功并能够可靠地快速响应用户输入的时间，即互动时间。
Total Blocking Time(TBT)：这是 FCP 与 TTL 之间的所有时间段的总和。
Cumulative Layout Shift (CLS)：衡量视觉稳定性，为了提供良好的用户体验，页面的CLS应保持小于 0.1。

2.Accessibility（可访问性）

无障碍功能：
当我们说某个网站具有无障碍功能时，我们的意思是网站的内容可用，其功能可由任何人操作。所有用户都能看见和使用键盘、鼠标或触摸屏，并且与网页内容的交互方式也清晰明了。这会让使用者获得良好的体验。我们在探讨无障碍功能时往往是围绕身体有缺陷的用户，

性能名词解释

官网解释

FCP (First Contentful Paint)

首次内容绘制标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文本、图像、SVG 甚至元素. 网站应该努力将首次内容绘制控制在1.8 秒或以内
FCP 发生在第二帧，因为那是首批文本和图像元素在屏幕上完成渲染的时间

虽然部分内容已完成渲染，但并非所有内容都已经完成渲染。这是首次内容绘制 (FCP) 与Largest Contentful Paint 最大内容绘制 (LCP)（旨在测量页面的主要内容何时完成加载）之间的重要区别。

LCP (Largest Contentful Paint)

最大内容渲染: 主要内容基本加载完成时，在页面加载时间轴中标记出相应的点，’svg‘ 元素目前不被视为 LCP 候选对象。为了提供良好的用户体验，网站应该努力将最大内容绘制控制在2.5 秒或以内。由下面的图片可以理解为，最大的元素加载完的时间点为LCP

TBT (Total Blocking Time)

页面阻塞总时长:First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间，应该努力将总阻塞时间控制在300 毫秒以内。

虽然在主线程上运行任务的总时间为 560 毫秒，但其中只有 345 毫秒被视为阻塞时间

CLS (Cumulative Layout Shift)

累积布局偏移: 是测量视觉稳定性的一个以用户为中心的重要指标，应该将CLS 分数控制在0.1 或以下。例子：您正要点击一个链接或一个按钮，但在您手指落下的瞬间，诶？链接移位了，结果您点到了别的东西。具体的计算方法可看这篇文章

TTFB

Web 服务器响应能力的基本指标。它有助于识别 Web 服务器何时响应请求快慢，TTFB 是衡量资源请求与响应的第一个字节开始到达之间的时间的度量。

FID

首次输入延迟，FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。控制在100 毫秒或以内

TTI

可交互时间 (TTI)，TTI 指标测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。应该努力将可交互时间控制在5 秒以内。

利用Performance API分析网站性能

window.performance.timing对象包含了完整的网页加载性能数据, 下面详细介绍如何通过对象各个属性获取页面加载期间各个阶段的性能，目前IE9以上的浏览器都支持，其中 window.performance.memory字段代表JavaScript对内存的占用。

字段说明：
connectStart 和 connectEnd: 分别代表TCP建立连接和连接成功的时间节点。

domComplete：html文档完全解析完毕的时间节点。

domContentLoadedEventStart 和 domContentLoadedEventEnd：代表DOMContentLoaded事件触发和完成的时间节点。页面文档完全加载并解析完毕之后,会触发DOMContentLoaded事件，HTML文档不会等待样式文件,图片文件,子框架页面的加载(load事件可以用来检测HTML页面是否完全加载完毕(fully-loaded))。

domInteractive： 代表浏览器解析html文档的状态为interactive时的时间节点。domInteractive并非DOMReady，它早于DOMReady触发，代表html文档解析完毕（即dom tree创建完成）但是内嵌资源（比如外链css、js等）还未加载的时间点。

domLoading： 代表浏览器开始解析html文档的时间节点。我们知道IE浏览器下的document有readyState属性，domLoading的值就等于readyState改变为loading的时间节点。

domainLookupStart 和 domainLookupEnd：分别代表DNS查询的开始和结束时间节点。如果浏览器没有进行DNS查询（比如使用了cache），则两者的值都等于fetchStart。

fetchStart：是指在浏览器发起任何请求之前的时间值。在fetchStart和domainLookupStart之间，浏览器会检查当前文档的缓存。

loadEventStart 和 loadEventEnd：分别代表onload事件触发和结束的时间节点。

navigationStart：代表浏览器开始unload前一个页面文档的开始时间节点。比如我们当前正在浏览baidu.com，在地址栏输入google.com并回车，浏览器的执行动作依次为：unload当前文档（即baidu.com）->请求下一文档（即google.com）。navigationStart的值便是触发unload当前文档的时间节点。

redirectStart 和 redirectEnd：如果页面是由redirect而来，则redirectStart和redirectEnd分别代表redirect开始和结束的时间节点。

requestStart：代表浏览器发起请求的时间节点，请求的方式可以是请求服务器、缓存、本地资源等。

responseStart 和 responseEnd：分别代表浏览器收到从服务器端（或缓存、本地资源）响应回的第一个字节和最后一个字节数据的时刻。

secureConnectionStart：可选。如果页面使用HTTPS，它的值是安全连接握手之前的时刻。如果该属性不可用，则返回undefined。如果该属性可用，但没有使用HTTPS，则返回0。

unloadEventStart 和 unloadEventEnd：如果前一个文档和请求的文档是同一个域的，则unloadEventStart和unloadEventEnd分别代表浏览器unload前一个文档的开始和结束时间节点。否则两者都等于0。

主要性能指标：

DNS查询耗时 = domainLookupEnd - domainLookupStart
TCP链接耗时 = connectEnd - connectStart
request请求耗时 = responseEnd - responseStart
解析dom树耗时 = domComplete - domInteractive
白屏时间 = domloadng - fetchStart
domready时间 = domContentLoadedEventEnd - fetchStart
onload时间 = loadEventEnd - fetchStart

原文链接：https://blog.csdn.net/scorpio_h/article/details/109329123