performance

名词和参数

FP -> First Paint -> 首次绘制

是时间线上的第一个“时间点”，浏览器第一次向屏幕传输像素的时间，也就是页面在屏幕上首次发生视觉变化的时间

注意：FP不包含默认背景绘制，但包含非默认的背景绘制

FCP -> First Contentful Paint -> 首次内容绘制

浏览器第一次向屏幕绘制 “内容”

注意：只有首次绘制文本、图片（包含背景图）、非白色的canvas或SVG时才被算作FCP

FP与FCP主要区别：

FP是当浏览器开始绘制内容到屏幕上的时候，只要在视觉上开始发生变化，无论是什么内容触发的视觉变化，在这一刻，这个时间点，叫做FP

FCP指的是浏览器首次绘制来自DOM的内容。例如：文本，图片，SVG，canvas元素等，这个时间点叫FCP

FP和FCP可能是相同的时间，也可能是先FP后FCP

FMP -> First Meaningful Paint -> 首次有效绘制

表示页面的“主要内容”开始出现在屏幕上的时间点。它是我们测量用户加载体验的主要指标

LCP -> Largest Contentful Paint 表示可视区“内容”最大的可见元素开始出现在屏幕上的时间点

lighthouse 指标

Time to Interactive 交互时间 页面变为完全交互式所花费的时间

在以下情况下，页面被认为是完全交互式的：

• 该页面显示有用的内容，由First Contentful Paint 得到

• 已为大多数可见的页面元素注册了事件处理程序

• 该页面在50毫秒内响应用户交互

优化：

• 可以对TTI产生特别大影响的一项改进是推迟或删除不必要的JavaScript工作

• 代码拆分，优化第三方JavaScript

• 减少主线程工作

• 减少JavaScript执行时间

Speed Index 速度指数 衡量页面加载过程中内容可视化显示的速度

• 减少主线程工作

• 减少JavaScript执行时间

• 确保文本在Webfont加载期间保持可见

Total Blocking TimeTBT度量阻止页面响应用户输入（例如鼠标单击，屏幕敲击或键盘按压）的总时间

该总和是通过将“第一内容绘画”和“时间”之间的所有长任务的阻塞部分加到Interactive来计算的

任何执行时间超过50毫秒的任务都是一项漫长的任务。50 ms之后的时间是阻塞部分。例如，如果Lighthouse检测到70 ms长的任务，则阻塞部分将为20 ms

优化：

不必要的JavaScript加载，解析或执行。在“性能”面板中分析代码时，您可能会发现主线程正在执行实际上不需要加载页面的工作。 通过代码拆分，删除未使用的代码或 有效地加载第三方JavaScript来减少JavaScript有效负载，可以提高您的TBT得分。

低效的JavaScript语句。例如，在“性能”面板中分析代码后，假设您看到一个调用，document.querySelectorAll(‘a’)该调用返回2000个节点。重构代码以使用仅返回10个节点的更具体的选择器可以提高您的TBT得分。