前言：网站性能分析工具有很多种，在性能优化是我们怎么查看我们网页的性能指标呢？
第一种：通过控制面板自带的的network工具，找到瀑布栏这一列，鼠标移动到对应的请求就可以看到当前请求在网络阶段的各项指标，如下图。
从下图中可以看出，这个网页的TTFB是可以优化的，将近1秒时间。可能是服务端在首页渲染是做了太多的借口请求或逻辑。
- 优化1：可能后端可以帮忙做些借口聚合，只返回必要字段
- 优化2：查看服务端渲染的逻辑是否存在长任务，非必要的渲染是否可以放在客户端。减少TTFB的时间
- 优化3：如果没有采用服务端流式渲染，是否可以接入流渲染
第二种：通过控制面板自带的Performence来查看网页性能指标,如下图
点击加载，按钮查看网页加载是的一个性能指标
点击调用栈，可以查看整个网页js线程调用栈的执行情况
第三种：可以通过控制面板自带的Performence moniter查看往前网页，js堆内存，cpu使用率，dom节点数量，事件监听情况等。
打开控制面板，点击“esc”调出“Performence moniter”，网页是否有内存泄漏也可以通过“Performence moniter”的js heap size来帮忙判断
第四种：借用lightHouse来测量网页性能，lightHouse的好处是生成性能报告后，可以直接给出网页的性能瓶颈，以及需要做的优化。
点击生成报告，得到如下图的指标
再查看报告给出性能优化的建议
第五种通过web-vitals来监测网站性能指标
- web-vitals的npm地址：www.npmjs.com/package/web…
- FID(first input delay)首次输入延迟
- FCP 最大内容绘制时间
- CLS 累计布局偏移时间
import {getLCP, getFID, getCLS} from 'web-vitals';
getCLS(console.log); // 获取累计布局偏移时间
getFID(console.log); // 获取首次输入延迟时间
getLCP(console.log); // 获取最大可视内容绘制时间
第六种 通过webPageTest这个工具来测试网页性能
- webPageTest的好处是能指定测试的浏览器所在的国家地区
这样就很方便我们测试当前网站在不同地区的打开速度。比如跨境电商网站的用户可能是全球各地，每个地区的网络环境也不一致。排查过程中我们也很难模拟出用户所在的真实场景。甚至还需要买一台用户所在区域的服务器去模拟用户操作，查看用户所在区域的性能指标
- 在使用webPageTest的时候访问网站，能指定请求发出所在区域，也能指定访问的浏览器。更加方便的获取不同地区的性能指标。
如何查看内存泄漏
打开dev-tool，ctrl+shift+p调用出命令行，输入Memory得到下图
- 点击开始记录，这时操作浏览器会记录当前浏览器内存使用情况，若红色框内的竖线时不断升高的，则这时就代表发生内存泄漏了。
- 结束记录后也会按使用内存的大小排好序展示，如下图使用内存最多的为系统本身，之后就是数组占有的内存最大了。
当然查看内存使用情况的方式有很多种，调用dev-tool中的Memory只是其中一种。
- PerforMance中的memory也可以记录当前操作的内存使用情况。
如何查看fps绘制频率情况
打开dev-tool，ctrl+shift+p调用命令行，输入fps,并选中fps
就可以在网页中实时显示当前fps绘制的频率，cpu和内存使用的情况
如何查看js和css的使用覆盖率
打开dev-tool，ctrl+shift+p调用出命令行，输入coverage选中加载页面时覆盖所有的使用率
就可以得到每个js文件和css文件的使用覆盖率
如何查看那部分dom发生了重绘
打开dev-tool，ctrl+shift+p调用命令行，输入rendering,并选中Paint flashing
发生重绘的Dom节点就会被标记为绿色的底色（如下图所示）
指标的量化标准
结尾
以上的这些方式我们可能查看的场景有限，只能在自己当前的网络环境中用以上工具分析网页性能。但是随着业务的发展，用户面临的网络环境千差万别。我们怎样统计到所有用户的性能参数，来做一个统计和分析呢？这就需要我们引入performence api来及时上报用户的网页性能参数。那怎样统计这些性能参数和指标呢？ 可以查看这篇文章网页性能监控关键指标的计算
