:性能标准
- 当用户能够在2秒以内得到响应时, 会感觉系统的响应很快
- 当用户在 2-5 秒之间得到响应时，会感觉系统的响应速度还可以
- 当用户在 5-8 秒以内得到响应时，会感觉系统的响应速度很慢，但是还可以接受；
1. FP 白屏 First Paint Time 从页面开始加载到浏览器中检测到渲染（任何渲染）时被触发（例如背景改变，样式应用等）
2. FCP First contentiful Paint 从页面开始加载到页面内容的任何部分呈现在屏幕上的时间
3. FMP First Meaningful Paint 是记录了加载体验的最开始。如果页面显示的是启动图片或者 loading 动画，这个时刻对用用户而言没有意义
4 LCP largest contentiful paint LCP 指标代表的是视窗最大可见图片或者文本块的渲染时间
5 长任务（Long Task）当一个任务执行时间超过 50ms 时消耗到的任务 （50ms 阈值是从 RAIL 模型总结出来的结论，这个是 google 研究用户感知得出的结论，类似用户的感知/耐心的阈值，超过这个阈值的任务，用户会感知到页面的卡顿）
6 Time To interactive 从页面开始到它的主要子资源加载到能够快速地响应用户输入的时间。（没有耗时长任务）
7 First input delay 从用户第一次与页面交互到浏览器实际能够开始处理事件的时间
8 total blocking time 衡量从 FCP 到 TTI 之间主线程被阻塞时长的总和
9 DCL DOMContentLoaded html文档呗完全加载和解析完成 DOMContentLoaded 事件被触发，无需等待样式，图像和子框架的完成加载。
10 L onl oaded 当前依赖的资源 全部加载完毕
11 Cumulative layout shift 所有布局偏移分数的汇总 凡是在页面完整生命周期内预料之外的布局偏移都包括。布局偏移发生在任意时间，当一个可见元素改变了它的位置，从一个渲染帧到下一个
基于web-vitals指标的
Largest Contentful Paint
First Input Delay
Cumulative layout shift
Performance API
Performance 是一个浏览器全局对象，提供了一组 API 用于编程式地获取程序在某些节点的性能数据
对于fp和fcp 可能会拿到相同值 原因在于节点比较简单
1. web vitabs实战
先打印了CLS, LCP, FCP, TTFB
<script type="module">
import {getCLS, getFID,getFCP,getTTFB, getLCP} from 'https://unpkg.com/web-vitals?module';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
getFCP(console.log);
getTTFB(console.log);
</script>
<body>
<div>hello</div>
</body>
2. 使用Performance API
示例
查看总体的资源
更好的方式
<script type="module">
// import {getCLS, getFID,getFCP,getTTFB, getLCP} from 'https://unpkg.com/web-vitals?module';
// getCLS(console.log);
// getFID(console.log);
// getLCP(console.log);
// getFCP(console.log);
// getTTFB(console.log);
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
...
我们也可以同时那个first paint 和 largest contentful paint
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (entry.entryType === 'paint') {
if (entry.name === 'first-paint') {
console.log('fp:',entry.startTime);
}
if (entry.name === 'first-contentful-paint') {
console.log('fcp:',entry.startTime);
}
}
}
}).observe({type: 'paint', buffered: true});
...
数值一样的原因（fp, lcp）:从页面开始加载到浏览器中检测到渲染没有（任何其他的渲染）被触发（例如背景改变，样式应用等）
<body style="background-color: red;"> <div>hello</div>
原因是结构结构简单 样式和dom内容是在同一帧完成的渲染
通过一下操作fp和fcp， lcp就会不一样 完成我们的预期
const timer= setTimeout(()=>{
const divEle=document.createElement('div');
divEle.innerHTML='hello'
document.body.appendChild(divEle)
// clearTimeout(timer)
},2000)
First contentful paint和largest contentful paint不一样的情况
<div>hello</div> <!-- <button id="memory">click me</button> --> <img src="https://static.wbolt.com/wp-content/uploads/2021/08/webpagetest-lcp-testpng.png" alt="">
使用chrome dev性能面板
- record 记录浏览器运行中的某一个时间段的表现
- profiling and reload page 用于记录网页从最开始的加载到所有资源加载完成这个过程的性能表现。点击之后，页面会自动重新加载
- Screenshots 屏幕快照，显示动态加载的页面图片
- memory 查看多种内存占用变化
总览区域
1. FPS: 全称 Frames Per Second，表示每秒传输帧数，是速度单位，用来分析动画的一个主要性能指标。1fps = 0.304 meter/sec(米/秒)。如上图所示，绿色竖线越高，FPS 越高。 红色表示长时间帧，可能出现卡顿掉帧。
2. CPU：CPU 资源。此面积图指示消耗 CPU 资源的事件类型。 图中颜色分别为（与总体报告中的 Summary 颜色数据表示一致）：
总体报告
Summary：表示各指标时间占用统计报表
1 Painting + Rendering是网页渲染时间
2 script是js脚本的工作时间
火焰图
Network：表示每个服务器资源的加载情况 Frames：表示每幅帧的运行情况，这里可以和上面总览的 FPS 结合来看 Timings：
- DCL（DOMContentLoaded）表示 HTML 文档加载完成事件。当初始 HTML 文档完全加载并解析之后触发，无需等待样式、图片、子 frame 结束。作为明显的对比，load 事件是当个页面完全被加载时才触发。
- FP（First Paint）首屏绘制，页面刚开始渲染的时间。
- FCP（First ContentfulPaint）首屏内容绘制，首次绘制任何文本，图像，非空白 canvas 或 SVG 的时间点。
- FMP（First MeaningfulPaint）首屏有意义的内容绘制，这个“有意义”没有权威的规定，本质上是通过一种算法来猜测某个时间点可能是 FMP。有的理解为是最大元素绘制的时间，即同 LCP（Largest ContentfulPaint）。其中 FP、FCP、FMP 是同一条虚线，三者时间不一致。比如首次渲染过后，有可能出现 JS 阻塞，这种情况下 FCP 就会大于 FP。
- L（Onload）页面所有资源加载完成事件。
- LCP（Largest Contentful Paint ）最大内容绘制，页面上尺寸最大的元素绘制时间。
Main：记录了渲染进程中主线程的执行记录，点击 main 可以看到某个任务执行的具体情况 是我们分析具体函数耗时最常看的面板
首先，面板中会有很多的 Task，如果是耗时长的 Task，其右上角会标红，这个时候，我们可以选中标红的 Task，然后放大，看其具体的耗时点。
放大后，这里可以看到都在做哪些操作，哪些函数耗时了多少,这里代码有压缩，看到的是压缩后的函数名。然后我们点击一下某个函数，在面板最下面，就会出现代码的信息，是哪个函数，耗时多少，在哪个文件上的第几行等。
具体的定位办法
long-task 右上角标红按钮 -> 下面bottomup -> 文件夹顺序 -> 定位到占比坐高鼠标js文件映射位置（线上性能优化查询问题解决）
Or 你可以查询Call tree
标签：console,log,前端,指标,paint,entry,加载,优化,页面 From： https://www.cnblogs.com/libertylhy/p/17244883.html