可以使用 PerformanceObserver 来监控页面卡顿。

<button class="btn">Click me</button>

const btn = document.querySelector(".btn");

/** 卡顿函数 */
function delay(duration = 1000) {
  const start = Date.now();
  while (Date.now() - start < duration) {
    // do nothing
  }
}

/** 点击事件 */
btn.addEventListener("click", () => {
  delay(1000); // 卡顿
  console.log("Button clicked");
});

/** 监控页面是否卡顿 */
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
    // 如果有卡顿，就会打印这个对象
    // {
    //   "name": "self",
    //   "entryType": "longtask",
    //   "startTime": 29025.80000001192,
    //   "duration": 1000,
    //   "attribution": [...]
    // }
  });
});
observer.observe({ entryTypes: ["longtask"] });