【JS】监控页面卡顿_js监控前端页面卡顿-CSDN博客

使用性能观察器 PerformanceObserver 观察页面性能。当观察到 “longtask” 类型的性能条目时，执行后续的逻辑。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">开启耗时任务</button>
  </body>
  <script>
    const btn = document.querySelector('.btn')
    function delay(duration = 1000) {
      const start = Date.now()
      while (Date.now() - start < duration) {}
    }
    btn.addEventListener('click', function () {
      delay(500)
    })
    const observer = new PerformanceObserver(list => {
      for (const entry of list.getEntries()) {
        if (entry.duration > 100) {
          console.log('页面卡顿时间超过100ms')
        }
      }
    })

    observer.observe({
      entryTypes: ['longtask'],
    })
  </script>
</html>

observer.observe({ entryTypes: ['longtask'] }): 这行代码启动了观察器，指定了要观察的性能条目类型为 “longtask”。通常指在 JavaScript 主线程上执行时间较长的任务，可能会导致页面卡顿。通过监听长任务的发生，可以及时发现页面性能问题，并进行相应的优化。

for (const entry of list.getEntries()) { ... }: 这是一个循环，用于迭代性能观察器收集到的性能条目列表。在每次迭代中，检查条目的持续时间是否超过100毫秒。