React页面外部链接点击致INP不佳：计算逻辑及原因问询

INP（Interaction to Next Paint）衡量的是用户交互触发时刻到浏览器完成下一次页面绘制的总耗时。对于target="_blank"的外部链接点击：

1. 交互起点是用户点击<a>标签的瞬间；
2. 浏览器会先处理当前页面内的点击事件逻辑（包括自定义事件监听、默认行为准备）；
3. INP的终点是当前页面完成最后一次绘制的时刻——新标签页的加载过程不会计入当前页面的INP统计。
   也就是说，外部链接点击的INP耗时，完全由当前页面在点击后到下一次paint之间的主线程任务耗时决定。

• 额外的同步点击事件逻辑：如果给转换后的<a>标签绑定了同步执行的onClick回调（比如同步上报日志、同步更新组件状态、复杂DOM操作），这些代码会阻塞主线程，延迟下一次paint的时机。
• React不必要的重渲染：点击事件触发组件状态更新时，若没有做好性能优化（比如未使用memo/useMemo/useCallback），会导致父组件或大范围组件树重渲染，重渲染的计算耗时会拉长INP。
• 自定义链接打开逻辑的阻塞：如果通过阻止默认事件、手动调用window.open()实现新标签打开，中间的同步逻辑（比如参数校验、数据处理）会额外占用主线程时间。
• 主线程预加载/队列任务积压：点击发生时，当前页面正处于主线程繁忙状态（比如正在执行其他脚本、渲染未完成），点击事件的处理会被排入任务队列等待，导致从交互到paint的时间被拉长。
• 第三方脚本拦截干扰：页面中的第三方分析、广告脚本可能会监听全局点击事件，执行同步的钩子逻辑，抢占主线程资源，延迟当前页面的paint时机。

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