为什么Chrome扩展程序在Performance性能分析时运行速度更快？

核心原因 #

你遇到的「开启性能录制就不卡顿」的现象，本质是Chrome为了保证性能数据准确性，临时禁用了针对目标页面的资源调度降频策略：

• 默认状态下，Chrome会对非活跃状态的页面（包括扩展弹出页这类生命周期短、非聚焦的页面）启用CPU调度节流，降低页面定时器、渲染队列、异步任务的执行优先级，用来节省系统资源。
• 当你开启DevTools的性能录制功能时，Chrome会强制目标页面保持最高调度优先级，所有任务不会被降频延迟，因此原本被阻塞的输入渲染流程可以正常执行，卡顿就消失了。

为什么只有第三个输入框卡顿 #

从你给出的代码看，页面本身没有绑定业务逻辑，问题大概率出在你提到的webpack开发环境配置上：

• webpack-dev-server的热更新（HMR）功能会向所有加载的页面自动注入客户端轮询/WS监听代码，用来检测代码变更。这类高频运行的异步任务在页面被降频时会堆积大量待执行的微任务，阻塞输入事件的渲染回调，就会出现输入后延迟显示的问题。
• 第三个输入框刚好是页面焦点顺序的最后一个，触发的浏览器自带拼写检查、自动填充校验逻辑的优先级最低，会优先被异步任务阻塞，所以只有它出现卡顿。

排查步骤 #

1. 先将扩展打包为正式产物，关闭webpack开发服务后安装正式版扩展测试，如果卡顿消失就可以确定是开发环境注入代码导致的，不需要修改业务逻辑。
2. 如果正式版依然卡顿，可以给输入框添加属性关闭浏览器自带的校验逻辑测试：<input autocomplete="off" spellcheck="false">
3. 打开popup的DevTools的「Sources」面板，确认所有被加载的脚本，排除隐性注入的第三方逻辑。

内容的提问来源于stack exchange，提问作者yoni