前端性能优化 - 提升 FID（First Input Delay）

导读

FID (First Input Delay) 是评估用户与网页互动时响应速度的关键性能指标之一。它主要衡量用户首次与页面互动（如点击按钮、链接或输入框）到浏览器实际响应这一互动之间的时间差。良好的 FID 能够为用户提供流畅的体验，而较差的 FID 会让用户觉得页面卡顿，从而影响用户体验和留存率。

优化 FID 是提升前端性能的重要部分。本文将介绍优化 FID 的一些有效策略和方法。

什么是 FID？

FID 是 Core Web Vitals 的三个关键指标之一，FID 是用户在加载页面后与页面进行第一次交互时的延迟时间。

这个延迟时间主要由主线程上的任务阻塞造成的。如果主线程在处理其他任务（如解析和执行 JavaScript）时，用户的输入将被延迟响应，导致较高的 FID 值。因此，降低主线程的阻塞时间是优化 FID 的核心。

为了获得良好的用户体验，Google 建议 FID 时间在 100 毫秒以内。如果 FID 超过 300 毫秒，则需要进行优化。

FID 的重要性

理解和优化 FID 对于提升网站的用户体验至关重要。以下是 FID 重要性的几个关键方面：

1. 提升用户体验

FID 直接影响用户在页面上的交互体验。当用户与网页互动时，如果浏览器能快速响应，就会给用户带来流畅、无缝的体验。相反，较高的 FID 会让用户感到页面迟钝或卡顿，导致他们感到挫败，从而增加放弃页面的可能性。

2. 反映页面的交互性能

FID 是一个反映页面交互性能的关键指标。它衡量的是页面对用户操作的首次响应速度，而不是页面加载完成的时间。这意味着即使页面的视觉内容已经加载完毕，如果用户的输入无法及时得到响应，用户仍会感到不便。因此，FID 是一个专注于实际用户体验的指标。

3. 与用户留存率和转换率相关

研究表明，较差的 FID 会显著影响用户留存率和转换率。如果用户在页面上遇到较长的输入延迟，他们更可能会离开页面，寻找其他替代品。特别是在电子商务和服务类网站上，糟糕的 FID 可能直接导致潜在客户流失，降低销售和转化率。

4. 影响搜索引擎排名

Google 和其他搜索引擎越来越重视用户体验，并将页面性能作为排名算法的一部分。Google 将 FID 作为其核心网络指标（Core Web Vitals）之一。这意味着，如果一个网站的 FID 表现不佳，它在搜索引擎中的排名可能会受到负面影响，进而减少有机流量的获取。

5. 帮助识别性能瓶颈

FID 可以帮助开发者识别和修复页面性能的瓶颈。通过分析 FID，开发者可以了解页面加载过程中哪些部分导致了延迟，进而采取针对性的优化措施。这种数据驱动的方法不仅可以提升当前页面的性能，还可以为未来的开发提供宝贵的经验。

如何优化 FID？

优化 FID 的目标是减少页面加载和交互期间主线程的阻塞时间。以下是一些优化 FID 的常见方法：

1. 减少主线程的任务负担

JavaScript 执行是导致主线程阻塞的主要原因，因此，减少 JavaScript 的执行时间可以有效降低 FID。

• 代码拆分（Code Splitting）： 将 JavaScript 文件拆分为更小的模块，根据页面需求按需加载。这种方式可以减少初始加载时间，避免加载不必要的代码。
• 懒加载（Lazy Loading）： 对于非关键资源，使用懒加载技术，延迟加载这些资源直到它们实际需要时再加载。这样可以减少初始加载时主线程的负担。
• 优化第三方脚本： 第三方脚本（如广告、社交分享按钮等）可能会显著增加主线程的负担。考虑异步加载这些脚本，或者使用性能优化的替代方案。

2. 使用异步和延迟加载

通过使用 async 或 defer 属性来加载脚本，可以避免阻塞浏览器的解析和渲染。

• async 属性： 加载脚本时不阻塞 HTML 的解析，当脚本下载完成后立即执行。这适用于独立脚本，不依赖其他脚本的执行。
• defer 属性： 脚本下载时不阻塞 HTML 解析，且脚本会在文档解析完成后按顺序执行。适用于需要按特定顺序执行的脚本。

3. 优化渲染路径

浏览器在加载和渲染页面时会进行大量计算，减少这些计算可以提升页面性能。

• 减少重排和重绘： 尽量减少对 DOM 的操作，特别是那些会引起重排（reflow）和重绘（repaint）的操作。可以通过批量更新 DOM 来降低这些操作的频率。
• 使用现代布局方法： 使用 Flexbox 和 Grid 等现代布局方式，它们比传统的浮动布局（float）更高效，可以减少浏览器的计算开销。

4. 减少长任务（Long Tasks）

长任务是指执行时间超过 50 毫秒的任务，它们会阻塞主线程，导致用户输入得不到及时响应。

• 拆分长任务： 将长时间执行的任务分解为多个短任务，利用浏览器的空闲时间执行。这可以通过 requestIdleCallback 方法来实现。
• 使用 Web Workers： 将复杂的计算任务或非 UI 相关的任务移到 Web Worker 中执行，避免阻塞主线程。

(PS: 关于 拆分长任务： 的相关文章，请阅读《在 JavaScript 中应用 Time Slice 模式 分解长时任务 优化性能》)

如何测量 FID？

使用浏览器的开发者工具（如 Chrome DevTools）来分析页面的性能瓶颈，可以帮助识别和优化影响 FID 的因素。

• Performance 面板： 可以记录页面加载和交互时的性能数据，帮助识别长任务、主线程阻塞和其他性能问题。
• Lighthouse： 自动生成网站的性能报告，并提供具体的优化建议，帮助识别阻塞渲染的资源和其他影响 FID 的因素。

总结

优化 FID 是提升用户体验和页面性能的重要一环。通过减少主线程的阻塞时间、使用异步和延迟加载、优化渲染路径、减少长任务以及利用性能分析工具，开发者可以显著降低页面的输入延迟，提供更流畅的用户体验。有效的 FID 优化不仅能提升用户的满意度，还能提高网站的可用性和转化率。

原文链接：https://juejin.cn/post/7406161967616639013