这是我参与「第四届青训营」笔记创作活动的的第 7 天
性能指标
前端开发中我们有很多的性能指标如 FP、FCP、LCP 等，可以用于评判我们的前端页面的性能与用户体验好坏，本文就来简单介绍这些性能指标以及如何通过 performance 等浏览器 API 获取这些性能指标。
load 事件
onload event 代表页面依赖的所有资源都加载完（包含异步加载，但不包含延时加载的资源）。有时 FCP 比 onload 早触发，因为存在图片加载完成前先渲染文字的可能。
performance.timing.loadEventEnd - performance.timing.loadEventStart
DCL
DOMContentLoaded 事件，也就是 HTML 文档被完全加载和解析之后触发。
performance.timing.domContentLoadedEventEnd - performance.timing.domContentLoadedEventStart
FP FCP
FP（First-Paint）首次渲染，FCP（First-Content-Paint）首次内容渲染。渲染出第一个像素时触发 FP，第一次渲染内容时触发 FCP。
渲染文本、图片等属于内容，此时会触发 FCP，有时有可能只有样式没有内容，此时只会触发 FP。
但不可能只触发 FCP 不触发 FP 或者 FCP 在 FP 之后触发，因为如果渲染了内容，则一定渲染了像素；但渲染了像素的时候，不一定渲染了内容。
如果要渲染的内容在视口之外，那么不会触发 paint。
如果 DOM 元素少，则浏览器会先解析完 DOM 再进行渲染；但如果 DOM 元素很多，则浏览器可能会在解析完所有 DOM 前就开始渲染。因此 FP 可能在 DCL 前也可能在 DCL 后。
// FP
performance.getEntriesByType('paint').find(e => e.name === 'first-paint').startTime
// FCP
performance.getEntriesByType('paint').find(e => e.name === 'first-contentful-paint').startTime
LCP 最大内容渲染时间
LCP 表示视口当中最大内容的元素可以被看见的时间。LCP 相比与 FMP (First Meaningful Paint) 和 SI (Speed Index) 这类性能指标意义更加明确，相比 DOMContentLoaded 等更加贴近用户实际体验。
new PerformanceObserver((entries) => {
for(const entry of entries.getEntries()){
console.log('LCP:', entry.startTime, entry)
}
}).observe({ type: 'largest-contentful-paint', buffered: true })
首次可交互时间
即 DOM 加载并解析完成后，用户首次可以与界面上的元素进行交互的时间。
performance.timing.domInteractive - performance.timing.fetchStart
DNS 查询时间
即浏览器在解析 URL 时，对域名进行 DNS 查询的耗时。
如果使用了持续连接（persistent connection）或者缓存，则 domainLookupEnd 和 domainLookupStart 都与 performance.timing.fetchStart 相等。
performance.timing.domainLookupEnd - performance.timing.domainLookupStart
DOM Complete
页面所有内容都被完全加载的时间。
performance.timing.domComplete - performance.timing.domContentLoadedEventStart
