交互响应性能之优化FID

由于 FID 需要一个真实用户的交互，所以无法用实验数据测试。

为了在实验数据下预测 FID，通常会用 TBT(Total Blocking Time)，具体这个指标后面文章会介绍。他们测量的内容不同，但改善 TBT 通常也能改善 FID。

一个糟糕的 FID 主要原因是JS执行过长，优化JS的解析、编译、执行可以直接降低 FID。

过长的JS执行

当JS执行过程中，浏览器无法响应用户交互，因为主线程被占用，为了改善这点，可以:

• 分解长任务
• 优化页面，为交互准备
• 使用 Web Worker
• 减少JS执行时间

分解长任务

如果你准备尝试减少单个页面的js的体积，可以先考虑把较长执行的js代码分解成小的异步任务。

长任务指的是用户可能会发现页面无响应的时期执行的js代码。任何阻塞主线程大于等于50ms的代码都是长任务。长任务一般是js体积过大的潜在因素（浏览器加载并执行了比页面初始化所需要的更多的js）。

分解长任务可以降低用户输入延迟。

当你采用最佳实践（例如拆分代码、分解长任务），FID 会有显著改善。虽然 TBT 并非现场数据指标，但这对于改善 FID 和 TTI(Time To Interactive) 都很有帮助。

优化页面，为交互准备

造成 FID 和 TBT 分数低有很多原因，大多都是js引起的。

自己站点的脚本执行可能会延后交互

• JS体积过大，执行时间过长，无效的分包会导致页面响应用户交互变慢，影响 FID、TBT、TTI。逐步加载代码和功能块可以拆分这些任务，提升响应速度。
• 服务端渲染看上去页面是出来了，但用户的交互还是受限于js的执行时间，可以考虑把更多逻辑代码放在服务端实现，或者在构建的时候创建更多静态内容。

下图是 TBT 得分的优化前后对比。通过将非必须的昂贵的脚本的加载和执行移出关键路径，用户就可以更快的去与页面交互。