前言

前段时间用Vue3开发了一个线上标准的项目，也都已经提测了，最近可以抽时间来整理一下项目中用到的技术栈，（ 我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】。

在开发之前特地重温了一下18年尤大的VUE CONF（杭州），过程中发现尤大使用到了这个Performance去分析JavaScript每一帧的计算，之前知道这个工具，但是平时基本不怎么用，借此机会学一下并做一些记录。

关于 Chrome Performance

众所周知，身为前端开发，我们最常用的就是Chrome，但是很多人其实都不太了解Chrome Performance，因为一打开它，迎面而来的就是各种复杂的图表📈和信息，不知道该从何看起，的确，Chrome Performance提供了相当丰富的信息，今天聊一下基本的信息与图标，以备应对日常Debug时的需求，话不多说，开干！

Start Debug

两个选择，打开无痕窗口或者确保自己的chrome是clean的

紧接着随便进入一个web页，这儿我就用 自己的博客网站，然后打开控制台，选择Performance

左上角的⭕️代表开始记录，点击之后，操作网页，Devtool会记录当前操作网页时的一些指标，比较时候我们做一些交互类或者反馈类的操作的监测。

左上角的刷新按钮代表开始刷新，并在页面无互动之后自动停止。

我这选择对整个网页进行Profiling分析，点击刷新按钮，一段时间后Devtool就会出现结果：

接下来开始分析Profiling的结果。

先来看一下最上面这部分的记录📝

FPS

FPS是网页动画性能最直接的体现，他的全称是Frames Per Second（每秒传输帧数），其实就是平常我们所说的帧，打游戏的同学可能会比较了解，人类的肉眼对动画的感知度60FPS是一个较好的水平，

可以看到这个位置有一个粉红色&红色组合的条，代表页面在加载到这个位置可能出现了掉帧的情况，所以这可以着重优化。

CPU

CPU的消耗在页面加载的过程中是有浮动的，很正常，我们可以通过view screenshot详细的追踪

可以观看这个位置，查看详细的信息：

这里重点介绍一下这些信息是干什么的。

Idle: Idle Time指程序空闲时间
System: 浏览器内部处理时间
Painting: 页面绘制时间
Rendering: 样式渲染计算时间
Scripting: JS的执行&处理各种事件的时间
复制代码

其实看到这个基本上已经获取到了很多信息了，介可以根据相应的情况，处理相应的问题。

Memory

Frames

记载的是每一次更新的screenshot，每一次更新就是一次frame，如果长时间没有更新就会出现 long frame。

点击screenshot可以根据时间顺序浏览捕捉到的frame。

Timing

Timing 可以看到网页加载时的时间线

主要说一下这几个指标是什么意思：

• FP(First Paint) 像素绘制的时间
• FCP(First Contentful Paint) 首次内容绘制，建立HTTP连接到达网站后，首次显示网站的内容需要部分时间。
• DCL(DOM Content Loaded) HTML载入并解析完毕的时间
• LCP(Largest Contentful Paint) 计算网页viewport中最大元素的载入时间，通俗来说就是用户可见网页主要内容的时间，这个比较重要
• L(onload) 解析HTML后资源全部加载完成的时间

在最下方有一行Total blocking time，这个是指在profiling的过程中，浏览器Main Thread被阻塞的时间总和。

Network

可以看到在网页加载的过程中，一些资源在请求加载时的网络占用情况，以及一些详细信息（URL、Duration、Request Method、Priority、Mime Type、Encoded Data、Decoded Body），但其实我们用Network就可以完成这个信息的获取了，所以这里就不多展开了。

Main

可以看到这个地方有很多的CPU Task，而且用这种倒转的火焰图，表现出，下面的function或者task是由上一层的task触发的，根据这个特性，我们可以方便的去追踪task 和 function 之间的依赖关系。

总结

我认为Chrome Performance可以在我发现页面部分地方卡顿，或者出现响应慢的时候，帮我快速的定位问题所在（比如FPS、CPU、Memory），然后根据问题找解决方案，可以在必要的时候大幅提高我debug的能力，Chrome Performance大概就说这么多，其实他还有很多信息，以后可以多研究研究。