前端优化指标-526互联

:性能标准

当用户能够在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 onLoaded 当前依赖的资源全部加载完毕

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

<script>
...
for(let i=0;i<1000000*1000;i++){

}
</script>


<body>
  <div>hello</div>
....
</body>

内存泄露

<script>
    var memoryArr = [];
    var memoryArr = [];
startBtn.addEventListener("click", function() {
    var a = new Array(100000).fill(1);
    var b = new Array(20000).fill(1);
    memoryArr.push(b);
});

</script>

<button id="memory">click me</button>

结果分析没有发生内存泄露

数值回落到正常值

<script>
    var memoryArr = [];
startBtn.addEventListener("click", function() {
    var a = new Array(100000).fill(1);
    var b = new Array(20000).fill(1);
    memoryArr.push(b);
});

</script>