众所周知，第一印象很重要，不仅是在与人交流上，在构建web体验的时候也是如此。
在web上，一个好的第一印象是决定用户去留的关键。那么问题来了，怎样才能留下好的第一印象，怎样测试你的网站给用户留下的第一印象？
在web上，第一印象也分很多方面：站点设计、视觉体验、速度和响应。
很难用API去测试一个网站的设计和视觉，但却可以测试速度和响应。
测试你的站点给用户的第一印象加载多快，可以通过 FCP 的指标。但在屏幕上绘制像素仅仅是这个故事的一部分，同样重要的，还有你的网站对用户的交互响应有多快。
FID(First Input Delay) 的指标可以帮你测试用户对你站点的交互响应的第一印象。
什么是FID？
FID 测量的是当用户第一次在页面上交互的时候（点击链接、点击按钮或者自定义基于js的事件），到浏览器实际开始处理这个事件的时间。
好的FID得分多少？
75%的用户在100ms以内。
FID具体内容
开发者编写了事件响应代码，我们通常认为这个代码会在事件触发的时候立刻响应。但是从用户角度上看，经常与预期相反，我们在手机上打开一个网页，试图去点击按钮或者滑动页面，然而什么也没有发生。
通常，输入延迟发生在主线程忙的时候，所以浏览器无法响应用户的交互。比较常见的一个原因是，当浏览器在解析和执行一个较大的js文件的时候，浏览器会忙一会。当遇到这种情况的时候，浏览器无法响应事件，因为要处理加载中的js交给它的一些任务。
FID 只是测量事件处理之前的延迟，不能测量时间处理所花费的时间本身，也不包含时间处理之后的UI更新时间。
看一下下图的经典的页面加载的时间线:
上图展示了页面加载过程中，加载了其他资源文件（js或者css），在这些资源文件下载完后，会由主线程去处理。
这导致主线程处于忙碌状态，高亮表示的色块。
较长的 FID 一般发生在 FCP(First Contentful Paint) 和 TTI(Time to Interactive) 之间，因为页面正在渲染内容，还不能交互。为了说明这是怎么发生的，我们将 FCP 和 TTI 在时间线中标注了:
上图我们可以观察到，有3处较长的时间段，在 FCP 和 TTI 之间。如果用户刚好在这些时间段内做了交互，就会产生一个延迟，从点击事件发生开始到主线程空闲，如下图:
由于输入发生在了浏览器忙的过程中，必须等待浏览器处理完手头上的事情，才能响应，等待的时间就是 FID 的值。
如果某一个交互没有事件回调？
FID 测量的是从接收到输入事件开始，到主线程下一次空闲的时间差值。这也意味着，即使没有注册事件监听，FID也能被测量。因为很多用户交互都不需要监听事件，但却需要主线程空闲。
以下html标签都需要在主线程空闲的时候，才能交互:
- 文本域，单选框，多选框 (