场景

浏览器

如何统计页面的长任务（long task）

长任务：浏览器主线程超过50ms的任务。

可能会导致页面卡顿或性能问题

// 1. 检查浏览器是否支持 Long Tasks API
if ('PerformanceObserver' in window) {
  // 2. 创建 Performance Observer 实例
  const observer = new PerformanceObserver((list) => {
    const longTasks = list.getEntries();
    longTasks.forEach((entry) => {
      // 处理每个长任务
      console.log('长任务 detected:', {
        name: entry.name,
        duration: entry.duration, // 持续时间（毫秒）
        startTime: entry.startTime, // 相对于页面加载的时间
        attribution: entry.attribution // 来源信息（可能为空）
      });

      // 可选：发送数据到分析服务
      // sendToAnalytics(entry);
    });
  });

  // 3. 监听 "longtask" 类型的性能条目
  observer.observe({ entryTypes: ['longtask'] });
} else {
  console.warn('浏览器不支持 PerformanceObserver 或 Long Tasks API');
}

验证

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>长任务测试页面</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
      }
      button {
        margin: 10px;
        padding: 10px 20px;
        font-size: 16px;
      }
      #result {
        margin-top: 20px;
        font-size: 18px;
        color: #333;
      }
    </style>
  </head>
  <body>
    <h1>长任务测试页面</h1>
    <button id="runTasksBtn">运行所有任务</button>

    <div id="result">
      <h2>长任务统计结果：</h2>
      <ul id="longTaskList"></ul>
    </div>

    <script src="script.js"></script>
  </body>
</html>

// 长任务统计逻辑
if ("PerformanceObserver" in window) {
  const observer = new PerformanceObserver((list) => {
    const longTasks = list.getEntries();
    longTasks.forEach((entry) => {
      const taskInfo = `长任务：${
        entry.name
      }，持续时间：${entry.duration.toFixed(2)}ms`;
      console.log(taskInfo);
      displayLongTask(taskInfo);
    });
  });
  observer.observe({ entryTypes: ["longtask"] });
} else {
  console.warn("浏览器不支持 PerformanceObserver 或 Long Tasks API");
}

// 显示长任务信息
function displayLongTask(info) {
  const listItem = document.createElement("li");
  listItem.textContent = info;
  document.getElementById("longTaskList").appendChild(listItem);
}

// 模拟长任务（>50ms）
function simulateLongTask(taskName) {
  const start = performance.now();
  while (performance.now() - start < 100) {
    // 模拟 100ms 的长任务
    // 空循环，模拟阻塞
  }
  console.log(`${taskName} 完成`);
  performance.mark(`${taskName}-end`); // 为任务添加唯一标记
}

// 模拟短任务（<50ms）
function simulateShortTask(taskName) {
  const start = performance.now();
  while (performance.now() - start < 20) {
    // 模拟 20ms 的短任务
    // 空循环，模拟阻塞
  }
  console.log(`${taskName} 完成`);
}

// 延迟函数
function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

// 运行所有任务
async function runAllTasks() {
  // 3 个长任务，每个任务之间增加 10ms 的延迟
  simulateLongTask("长任务 1");
  await delay(10); // 增加 10ms 延迟
  simulateLongTask("长任务 2");
  await delay(10); // 增加 10ms 延迟
  simulateLongTask("长任务 3");

  // 2 个短任务
  simulateShortTask("短任务 1");
  simulateShortTask("短任务 2");
}

// 绑定按钮事件
document.getElementById("runTasksBtn").addEventListener("click", runAllTasks);

检查控制台，长任务打印三条，符合预期；

长任务之间增加延迟，是防止任务间间隔短而合并任务；

总结

1.检查是否支持

2.创建实例，监听longtask类型

3.回调中处理每个长任务，收集数据

并发请求

请求失败会弹出toast，如何保证批量请求失败会只弹出一个toast

思路：第一个请求失败时，记录错误，并设置定时器，指定时间内若有其他请求失败，不触发toast，直到指定时间内无请求失败，弹出请求失败toast

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>批量请求防抖提示验证</title>
        <style>
            body { font-family: Arial, sans-serif; padding: 20px; }
            button { margin: 10px; padding: 10px 20px; }
            .toast {
                position: fixed;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: #ff4444;
                color: white;
                padding: 10px 20px;
                border-radius: 5px;
                display: none;
            }
        </style>
    </head>
    <body>
        <h2>批量请求测试</h2>
        <button onclick="runTest('partial')">触发部分失败请求</button>
        <button onclick="runTest('all')">触发全部失败请求</button>
        <button onclick="runTest('none')">触发全部成功请求</button>
        <div class="toast" id="toast"></div>

    <script>
        // Toast 组件
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.style.display = 'block';
            setTimeout(() => toast.style.display = 'none', 2000);
        }

        // 批量请求函数（复用上述封装代码）
        async function batchRequestWithDebounceToast(requests, options) { 
            const { delay = 200, onToast } = options;
            let hasError = false;
            let timer = null;

            // 防抖核心逻辑
            const triggerToast = () => {
                if (!hasError) return;
                onToast?.('部分请求失败，请检查网络或数据');
                hasError = false; // 重置状态
            };

            // 执行请求并捕获错误
            const wrappedRequests = requests.map((req) => 
                                                 req.catch((error) => {
                if (!hasError) {
                    hasError = true;
                    timer = setTimeout(triggerToast, delay);
                }
                return Promise.reject(error);
            })
                                                );

            // 等待所有请求完成，并清除残留计时器
            try {
                const results = await Promise.allSettled(wrappedRequests);
                clearTimeout(timer);
                return results;
            } catch (error) {
                clearTimeout(timer);
                throw error;
            }
        }

        // 测试用例
        async function runTest(type) {
            const count = 5;
            const requests = Array(count).fill(0).map(() => mockRequest(type));
            console.log(`触发测试：${type}，共 ${count} 个请求`);

            await batchRequestWithDebounceToast(requests, {
                onToast: (msg) => showToast(msg),
            });
        }

        // 模拟请求（根据类型控制成功率）
        function mockRequest(type) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    let isSuccess;
                    if (type === 'none') isSuccess = true;
                    else if (type === 'all') isSuccess = false;
                    else isSuccess = Math.random() > 0.5; // 部分失败

                    isSuccess ? resolve('成功') : reject('失败');
                }, 500);
            });
        }
    </script>
</body>
</html>

验证

部分失败测试：
- 点击按钮触发 5 个请求（50% 概率失败）。
- 观察是否无论有多少失败，只弹出一次 Toast。
全部失败测试：
- 点击按钮触发 5 个必定失败的请求。
- 确保 仅弹出一次 Toast。
全部成功测试：
- 点击按钮触发 5 个必定成功的请求。
- 确保 不弹出 Toast。

浏览器​

并发请求​

浏览器

并发请求