INP 自动化归因与自愈：如何自动定位、修复并验证一次卡顿

传统排查 vs 自动化

使用者痛点： 面对INP超标。传统排查方式效率极低——需要手动打开DevTools，人工分析Event Timing，猜测可能的问题脚本，手动修复后刷新验证。这种方式慢、依赖经验、难以复现问题。

自动化归因与自愈则→防复发的全流程自动化，提供结构化结论。例如的观点是，使用者点击购买按钮时卡顿350ms。程序能自动诊断出是vendor.js中的布局抖动问题，自动应用修复方案并验证有效性。按理说，

自动归因这方面，自动拆解延迟、自动定位元凶

至于第一步先。自动判定卡在哪一段

使用者痛点： 面对Event Timing中的三个延迟阶段，传统方式需要人工比较各阶段耗时来判断瓶颈所在。

// 自动判定主导阶段function autoAttribute { const phases = { inputDelay: entry.inputDelay。// 150ms processingDuration: entry.processingDuration,// 120ms presentationDelay: entry.duration - entry.inputDelay - entry.processingDuration,// 80ms };const dominant = Object.entries.sort => b - a);return { dominant: dominant,phases }; } // 自动判定结果：inputDelay 主导

方法： 自动比较三个阶段的耗时不依赖人工翻看或AI猜测。此例中明确显示inputDelay占主导地位——说明主线程被其他代码占用，而非按钮本身代码问题。

说到接下来，自动定位占用主线程的脚本

使用者痛点： 一旦确认inputDelay为主要问题。接下来要找到具体占用主线程的脚本，传统方式需人工查看Long Animation Frames并匹配时间窗口。

// 自动匹配LoAF并排序function autoFindCulprit { return performance.getEntriesByType .filter <50) // 时间窗口匹配 .flatMap .sort => b.duration - a.duration);// 按耗时排序取最大 } // 自动定位结果：vendor.js耗时280ms

方法： 自動根據時間窗口匹配LoAF條目並按耗時排序，直接定位責任脚本（如vendor.js). 再通過sourcemap反解回源碼具体行数。整個流程完全規則驅動——無需人工檢查DevTools.

自動修復的观点是，自動選方案、自動注入

第一步先这方面，自動選擇修復方案

用戶痛點: 一旦確認根因為inputDelay + 布局抖動後,傳統方式需要人工思考可能的修復方案並手動實施.

解決方案 : 基於預先定義的規則表。系統會將結構化根因映射到對應的標準化修復方案. 本例中會選擇使用 scheduler. yield 讓步處理長任務.

接下来 : 自動注入修復代碼

用戶痛點 :

// Chrome擴展中運行時注入chrome. scripting. executeScript =>{ const origProcess = window . vendorProcess;window . vendorProcess = async function { for { origProcess . call;if ){ await scheduler . yield;} } } }，}});