性能指标

抛开场景讲性能优化，都是耍流氓--大圣受限介绍一个神器

PerformanceAPI提到性能优化指标就不得不说PerformanceAPI，首先来看MDN上关于这个API的介绍：Performance接口可以获取到当前⻚面中与性能相关的信息。它是HighResolutionTimeAPI的一部分，同时也融合了PerformanceTimelineAPI、NavigationTimingAPI、UserTimingAPI和ResourceTimingAPI。该类型的对象可以通过调用只读属性Window.performance来获得。

上面提到我们可以通过window.performance来获取网站的各项指标信息，我们现在打开开课吧，然后在控制台输入window.performance，看看是否能够获取到相关信息，如下图：

可以看到我们获取到了相关信息，如图所以，performance包括了五个属性，其中timing是我们需要重点关注的，timing是一个map数据结构，其中key值是性能优化指标，value值是对应的时间戳。其中这些时间戳与⻚面整个加载过程中的关键节点是有着一一对应的关系，这里我们通过谷歌开发者网站的一张图来说明：

从图中可以看到很多指标都是成对出现，这里我们直接作差就可以求出对应⻚面加载过程中关键节点的时间，这里我们介绍几个比较常用的，比如：

1.FirstPaint(简称FP)：表示文档中任一元素首次渲染时间。

2.FirstContentfulPaint(简称FCP)：当浏览器首次渲染任何文本，图像（包括背景图像），非白色画布或SVG时。这个指标就是我们日常说的白屏时间。

3.FirstMeaningfulPaint(简称FMP)：首次有意义的绘制，这个指标反映的是主要内容出现在⻚面上所需要的时间，如果FMP时间过⻓的话，这里就要考虑是不是静态文件阻塞了主线程。

4.TimeToInteractive(TTI):可交互时间，等到服务器通过HTTP协议将响应全部返回之后，便开始

DOMTree的构建，完成之后，网⻚变成可交互状态，到此为止便是网⻚的可交互时间。用户可以进行正常的事件输入交互操作，这个指标是最重要的用户体验指标，用户最关心的就是什么时候可以进行交互，所以通常这个指标是我们优化的重点。

工具

浏览器performance工具

简单看下这个⻚面怎么去看

1.FPS：这个指标是衡量动画是否流畅的一个重要指标。我们可以看到图中的绿色柱状图很高，这就代表FPS帧率很高，体验也就越流畅，如果FPS帧率较低，那么图中则会是红色的横条，表明帧率较低，影响用户体验，这里图中并没有出现红色，说明我们网⻚的整个体验还是非常流畅的。这里特别说明一下不管是游戏还是网⻚，都是帧率越高，体验越好。

2.CPU：CPU自然就是展示CPU的使用情况。这个指标和下面的Sumarry指标是一一对应，而且这里它们的颜色所代表含义也是相同的，每个颜色代表各个过程所耗费的时间。从图中我们可以看到，整个加载过程中，白色部分(ldle)占比是最大的，英文好的同学根据ldle的意思就能猜到这里代表的是空闲性能，第二大占比的橙色对应的是脚本加载时间，所以要想更快我们可以试着从加快脚本加载速度方面去优化。

3.NET：这个是展示各个请求所花费的具体时间，这里看不太清，我们可以直接去Network面板当

中去具体观察各个请求所花费的时间，然后针对具体的请求具体分析。HEAP：这里展示的是请求过程中内存的使用情况，这个指标对性能优化帮助不大。

总览区域的下面是Frame，这个展示的是整个加载时间段的帧率展示。将鼠标移动上去可以看到各个时间段的帧率，在加载过程中也可以使用快捷键command+shift+p打开可以实时展示帧率的面板。接着把面板往上拉，可以看到非常重要的一个指标Main，它代表主线程，如下图：

最下面的区域分为4个tab，Summary与统计总览区域面板CPU相对应，Bottom-Up则是代表调用堆栈的前后调用关系，CallTree是调用树，最后的EventLog则是事件日志。这个区域用到的情况不多，更多的是辅助作用。

lighthouse

性能检测神器

chrome插件，ornpminstall -g lighthouse,报告直接看很方便

性能，可访问性，最佳实践，seo，pwa课件最重要的就是图片优化