免费在 GitHub 公开中文介绍

interaction-to-next-paint

通过INP衡量点击等操作到页面更新之间的延迟，查找响应缓慢的原因，并依据测量结果协助优化事件处理、拆分长任务或将繁重计算移至web workers。

原文查看原文说明

Use when auditing slow page loads, heavy assets, or rendering delays related to Optimize interaction to next paint. Verify the actual bottleneck in DevTools, Lighthouse, or field data before recommending changes.

thedaviddias/Front-End-Checklist

实测评分未实测

查看安装方法

适用场景

排查点击等操作后的响应延迟
依据测量结果优化事件处理与长任务
评估将繁重计算移至web workers

中文介绍

功能

使用响应性指标INP，测量点击等操作发生后到页面更新所需的时间。通过Chrome DevTools或PageSpeed Insights进行测量，以200ms以内为参考目标。找出拖慢响应的事件处理和长任务，协助拆分任务，或使用web workers将繁重计算移到独立的执行环境。

适用场景

适合页面已经显示、操作后却迟迟没有响应的情况。可用于检查负责页面主要显示处理的主线程是否被长时间占用，也可将测量结果与需要修改的文件、网络请求及渲染步骤对应起来，整理需要处理的问题。

使用示例

“测量这个页面的INP，找出操作响应缓慢的原因，并说明测量方法。”
“检查事件处理，指出哪些长任务需要拆分，哪些计算适合移至web workers。”

注意事项

提出改进建议前，先通过DevTools、Lighthouse或实际使用数据确认原因。不仅凭主观感受判断，还需记录用哪种测量方法确认了问题。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

文档检查

AI 根据 SKILL.md 的内容检查了需要注意的操作和使用前提。评分只依据实际运行的结果（实测对比）。

安全性发送数据、删除文件、执行命令等是否有说明: A良好要求改进前通过测量确认原因，没有删除文件或读取凭据的指令。
安装难易度所需工具和 API 密钥是否少且有说明: A良好测量工具指定为Chrome DevTools或PageSpeed Insights，无API密钥等额外前提。

不计入评分。由 AI（OpenAI Codex）于 2026年10月23日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

包含的文件（2）

SKILL.md1.7 KB
references/rule.md5.7 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Optimize interaction to next paint

INP replaced FID as a Core Web Vital in 2024—it measures how quickly your page responds to user interactions throughout the session, not just the first interaction.

Quick Reference

INP measures responsiveness to ALL interactions—target under 200ms
Break up long tasks into smaller chunks
Use web workers for heavy computation
Optimize event handlers and avoid blocking the main thread

Check

Measure INP using Chrome DevTools or PageSpeed Insights. Verify interaction responses occur within 200ms.

Fix

Optimize event handlers, break up long tasks, use web workers for heavy computation, and reduce main thread blocking.

Explain

Explain how INP measures overall page responsiveness by tracking the latency of all user interactions during a page visit.

Code Review

Review the routes, assets, and loading behavior that affect Optimize interaction to next paint. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/performance/interaction-to-next-paint

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能