用 PerformanceObserver 抓取长任务:定位页面卡顿的另一种思路
页面滚动时偶尔出现掉帧,点击按钮后 UI 要愣一下才响应,这类现象多半和主线程被长时间占用有关。浏览器提供了 Long Tasks API,可以监测执行时间超过 50ms 的任务,而 PerformanceObserver 是消费这些数据的标准入口。相比在代码里到处埋 performance.now() 手动打点,PerformanceObserver 能持续监听 longtask 类型的性能条目,拿到任务开始时间、持续时长和归属的容器。它的使用场景很明确:线上环境采集卡顿样本、本地开发时验证某个交互是否阻塞渲染、或者在做性能优化前后对比改动效果。但实际接入时会遇到不少细节问题,比如 Safa...