Tính tổng thời gian chạy trên nền trước

Hướng dẫn này trình bày chi tiết cách tính chính xác tổng thời gian mà người dùng dành để xem một trang. Các chỉ số truyền thống như thời gian trên trang thường tính cả thời gian người dùng mở trang ở chế độ nền, điều này là không chính xác. Bằng cách sử dụng API VisibilityStateEntry, bạn chỉ có thể đo lường "thời gian chạy trên nền trước", từ đó có được chỉ số chính xác hơn về mức độ tương tác của người dùng.

Triển khai tính toán thời gian chạy trên nền trước

API PerformanceTimeline hiển thị các thay đổi về trạng thái hiển thị dưới dạng mục hiệu suất. Thay vì phản ứng với các sự kiện visibilitychange và tích luỹ thời gian theo cách thủ công trong suốt một phiên, bạn có thể truy vấn toàn bộ nhật ký hiển thị bất cứ lúc nào.

BẮT BUỘC: Bạn phải truy vấn các mục hiệu suất visibility-state để tính toán thời gian thực tế ở nền trước.

/**
 * Calculates total time the page was in the visible state.
 *
 * @returns {number} Total foreground time in milliseconds.
 */
function getTotalForegroundTime() {
  // MANDATORY: Query the visibility-state entries from the performance timeline.
  const entries = performance.getEntriesByType('visibility-state');

  // Fallback: If the browser does not support VisibilityStateEntry,
  // the API will gracefully return an empty array.
  if (entries.length === 0) {
    // Return total time since navigation start as a fallback.
    return performance.now();
  }

  let totalForegroundTime = 0;

  for (let i = 0; i < entries.length; i++) {
    // Only calculate duration for periods where the state was 'visible'
    if (entries[i].name === 'visible') {
      const start = entries[i].startTime;

      // The end time is the start time of the next state change,
      // or the current time if this is the final entry.
      const end = i + 1 < entries.length
          ? entries[i + 1].startTime
          : performance.now();

      totalForegroundTime += (end - start);
    }
  }

  return totalForegroundTime;
}

Dự phòng và hỗ trợ trình duyệt

VisibilityStateEntry API là một tính năng bổ sung hiện đại cho Dòng thời gian hiệu suất và có thể không được hỗ trợ trên một số trình duyệt.

Vì performance.getEntriesByType('visibility-state') trả về một mảng trống trong các trình duyệt không được hỗ trợ, nên tính năng phát hiện tính năng được tích hợp vào quy trình tính toán. Bạn phải luôn kiểm tra xem các mục có được trả về hay không trước khi tiếp tục.

Nếu API không được hỗ trợ, phương án dự phòng được đề xuất là trả về performance.now(). Chỉ số này thể hiện tổng thời gian kể từ khi điều hướng, đóng vai trò là giới hạn trên hợp lý cho thời gian tương tác khi không có nhật ký trạng thái hiển thị.

const entries = performance.getEntriesByType('visibility-state');

// If the array is empty, the API is likely unsupported.
if (entries.length === 0) {
  // Fallback: Return total time since page load.
  return performance.now();
}