CPU Performance API: Chọn giao diện nhẹ cho máy yếu

Giải pháp ngắn gọn: dùng navigator.cpuPerformance để chọn profile ban đầu, sau đó dùng PressureObserver theo dõi nguồn cpu. Khi trạng thái là serious hoặc critical, hãy tắt hiệu ứng và tác vụ không thiết yếu; nếu API không có hoặc không hoạt động, dùng profile nhẹ hoặc cân bằng đã định nghĩa sẵn.

Cách này phù hợp với một adaptive web experience: máy mạnh có thể giữ hiệu ứng đầy đủ, còn thiết bị yếu giảm hoạt ảnh, video nền, tần suất cập nhật hoặc xử lý phụ. Đây không phải phép đo benchmark chính xác và không bảo đảm mọi trang sẽ nhanh hơn. Bạn vẫn phải tối ưu JavaScript, hình ảnh và mạng như bình thường.

Phân biệt năng lực CPU với áp lực CPU

Tín hiệu	Nó trả lời câu hỏi nào?	Nên dùng vào việc gì?
`navigator.cpuPerformance`	Thiết bị thuộc nhóm năng lực CPU nào?	Chọn profile ban đầu khi trang khởi tạo.
`PressureObserver`	CPU hiện đang chịu áp lực đến mức nào?	Giảm hoặc khôi phục phần không thiết yếu trong lúc trang chạy.

CPU Performance API cung cấp một tín hiệu tương đối ổn định về nhóm hiệu năng, còn Compute Pressure API phản ánh trạng thái động và có thể chịu ảnh hưởng bởi các tab hoặc ứng dụng khác. Các trạng thái như nominal, fair, serious và critical không phải phần trăm CPU cụ thể (theo developer.mozilla.org).

Vì vậy, không nên viết điều kiện kiểu “CPU dưới 40% thì bật hiệu ứng”. Hãy dùng tier để chọn cấu hình ban đầu, rồi dùng trạng thái áp lực để tạm dừng phần phụ. Chrome 152 giới thiệu CPU Performance API qua navigator.cpuPerformance; tier được báo cáo có thể bị người dùng hoặc quản trị viên ghi đè trong một số môi trường, nên ứng dụng không được coi giá trị này là bằng chứng tuyệt đối về phần cứng (theo developer.chrome.com).

Chuẩn bị các profile trước khi đọc API

API chỉ hữu ích khi website đã có những phần có thể giảm tải. Hãy bắt đầu với ba profile rõ ràng:

Profile	Hành vi	Khi nào dùng
`light`	Tắt hoạt ảnh trang trí và video nền, dừng tác vụ nền không cần thiết, làm mới thưa hơn.	Tier thấp, tier chưa biết hoặc CPU ở trạng thái nghiêm trọng.
`balanced`	Giữ các hiệu ứng ngắn, chỉ tải dữ liệu khi cần và hạn chế cập nhật phụ.	Fallback an toàn cho phần lớn trường hợp chưa đủ tín hiệu.
`full`	Giữ hiệu ứng và tác vụ phụ khi chúng không làm giảm phản hồi tương tác.	Tier cao và áp lực CPU ở mức chấp nhận được.

Giữ nguyên đọc nội dung, nhập liệu, điều hướng, gửi biểu mẫu và phản hồi sau thao tác. Với dashboard, có thể tắt hoạt ảnh biểu đồ và giảm tần suất làm mới, nhưng không nên ẩn bộ lọc hoặc trì hoãn phản hồi của nút bấm.

Nếu trang đang tải nhiều ảnh động, việc chuyển GIF sang video để giảm dung lượng là một hướng tối ưu độc lập. CPU Performance API không thay thế việc giảm kích thước tài nguyên hoặc sửa mã JavaScript vốn đã quá nặng.

Triển khai profile ban đầu và fallback

Chạy đoạn JavaScript dưới đây trong mã phía trình duyệt của trang, sau khi DOM đã sẵn sàng hoặc ở cuối tài liệu HTML. Thay phần thân của updateNonCriticalData() bằng tác vụ thật của ứng dụng. Các ngưỡng tier trong ví dụ chỉ là điểm bắt đầu; cần điều chỉnh theo chi phí thực tế của từng tính năng.

const profiles = {
  light: {
    effects: false,
    backgroundWork: false,
    refreshInterval: 15000,
  },
  balanced: {
    effects: true,
    backgroundWork: false,
    refreshInterval: 10000,
  },
  full: {
    effects: true,
    backgroundWork: true,
    refreshInterval: 5000,
  },
};

let activeProfileName = 'balanced';
let backgroundTimer = null;

async function updateNonCriticalData() {
  // Thay bằng việc tải hoặc tính toán không thiết yếu của ứng dụng.
}

function setBackgroundWorkEnabled(enabled, interval) {
  if (backgroundTimer !== null) {
    clearInterval(backgroundTimer);
    backgroundTimer = null;
  }

  if (enabled) {
    backgroundTimer = window.setInterval(
      updateNonCriticalData,
      interval
    );
  }
}

function applyProfile(profileName) {
  const profile = profiles[profileName];
  if (!profile) return;

  activeProfileName = profileName;
  document.documentElement.classList.toggle(
    'low-power-mode',
    !profile.effects
  );
  setBackgroundWorkEnabled(
    profile.backgroundWork,
    profile.refreshInterval
  );
}

function getInitialProfile() {
  if (!('cpuPerformance' in navigator)) {
    return 'balanced';
  }

  const tier = navigator.cpuPerformance;
  if (!Number.isInteger(tier) || tier === 0) {
    return 'balanced';
  }

  // Đây là ngưỡng minh họa; kiểm tra lại bằng chi phí thật của ứng dụng.
  return tier <= 2 ? 'light' : 'full';
}

applyProfile(getInitialProfile());

Profile balanced là đường lui an toàn trong ví dụ này, còn profile light được dùng khi tier xác định là thấp. Nếu sản phẩm của bạn ưu tiên giảm tải hơn hình ảnh mặc định, có thể đổi fallback thành light; hãy kiểm tra lại khả năng sử dụng trước khi triển khai.

Theo dõi áp lực CPU mà không làm giao diện chớp liên tục

Đặt đoạn mã sau ngay sau đoạn mã profile. Mẫu này yêu cầu trạng thái cao xuất hiện liên tiếp trước khi chuyển sang light, và yêu cầu vài lần đọc bình thường trước khi khôi phục profile ban đầu. Cơ chế này được gọi là độ trễ hoặc hysteresis; nó tránh chuyển trạng thái theo một tín hiệu ngắn.

function watchCpuPressure() {
  if (!('PressureObserver' in window)) {
    return;
  }

  const initialProfile = getInitialProfile();
  let seriousSamples = 0;
  let normalSamples = 0;

  const observer = new PressureObserver((records) => {
    const latest = records[records.length - 1];
    if (!latest) return;

    const pressureIsHigh =
      latest.state === 'serious' || latest.state === 'critical';

    if (pressureIsHigh) {
      seriousSamples += 1;
      normalSamples = 0;

      if (seriousSamples >= 3) {
        applyProfile('light');
      }
      return;
    }

    seriousSamples = 0;
    normalSamples += 1;

    if (normalSamples >= 5) {
      applyProfile(initialProfile);
    }
  });

  observer.observe('cpu', { sampleInterval: 1000 }).catch((error) => {
    console.warn('Không thể theo dõi áp lực CPU:', error);
  });
}

watchCpuPressure();

sampleInterval: 1000 chỉ là giá trị minh họa. Nếu trình duyệt không chấp nhận nguồn cpu hoặc tùy chọn quan sát, lời gọi observe() có thể bị từ chối; khi đó profile đã áp dụng từ bước trước vẫn tiếp tục được dùng. Không cần coi lỗi này là lỗi chặn toàn bộ trang.

Tắt đúng phần phụ bằng CSS và JavaScript

CSS phù hợp với phần trang trí, nhưng ẩn một phần tử không đồng nghĩa với việc JavaScript đã ngừng tính toán. Đặt các quy tắc sau trong tệp CSS của trang:

.low-power-mode .decorative-animation,
.low-power-mode .background-video {
  display: none;
}

.low-power-mode .chart {
  transition: none;
}

Với tác vụ nền, phải dừng bộ hẹn giờ hoặc bỏ qua lượt tính toán không cần thiết. Hàm setBackgroundWorkEnabled() ở trên thực hiện việc xóa bộ hẹn giờ trước khi tạo lại. Nếu tác vụ thật sử dụng requestAnimationFrame, Web Worker hoặc thư viện biểu đồ, hãy bổ sung thao tác dừng tương ứng thay vì chỉ thêm lớp CSS.

Nếu người dùng đã bật tùy chọn giảm chuyển động hoặc tự chọn chế độ tiết kiệm, lựa chọn đó nên được ưu tiên. Không để cơ chế tự động khôi phục profile đầy đủ ghi đè một lựa chọn trợ năng hoặc cài đặt rõ ràng của người dùng.

Kiểm tra HTTPS, khả năng hỗ trợ và iframe

Chạy trong secure context: website thật nên dùng HTTPS với chứng chỉ hợp lệ. Khi phát triển cục bộ, localhost thường phù hợp hơn việc mở tệp HTML trực tiếp.
Kiểm tra tính năng: dùng 'cpuPerformance' in navigator và 'PressureObserver' in window, không suy đoán chỉ từ tên hoặc phiên bản trình duyệt.
Giữ fallback: trình duyệt không hỗ trợ vẫn phải đọc được nội dung, điều hướng được và hoàn tất nhiệm vụ chính.
Kiểm tra iframe: nếu mã chạy trong iframe, hãy kiểm tra nguồn gốc và Permissions Policy trước khi kết luận API bị lỗi.
Giảm dữ liệu thu thập: dùng tier chỉ để điều chỉnh trải nghiệm tại chỗ; không biến tín hiệu này thành hồ sơ nhận dạng thiết bị.

Compute Pressure API hiện có độ phủ không đồng đều giữa các trình duyệt phổ biến và được MDN ghi nhận là có hỗ trợ hạn chế. Vì vậy, đây nên là progressive enhancement chứ không phải điều kiện bắt buộc để tải trang (theo developer.mozilla.org).

Xác minh kết quả trước khi phát hành

Kiểm tra trạng thái ban đầu: mở trang trên môi trường có API và không có API; xác nhận profile được chọn, lớp low-power-mode và bộ hẹn giờ tương ứng.
Kiểm tra profile thấp: dùng cơ chế ghi đè tier CPU trong Chrome 152 nếu môi trường thử nghiệm của bạn cung cấp tùy chọn này. Không dùng tùy chọn đó như bằng chứng về mọi thiết bị thật.
Kiểm tra áp lực động: trong môi trường kiểm thử an toàn, xác nhận khi trạng thái đủ cao thì hiệu ứng bị tắt và tác vụ nền thực sự dừng.
Đo công việc: dùng Chrome DevTools Performance để xem tác vụ dài, hoạt động JavaScript, số lần vẽ lại và tần suất cập nhật trước và sau khi áp dụng profile.
Kiểm tra khôi phục: xác nhận profile trở lại không làm mất trạng thái biểu mẫu, tạo yêu cầu mạng trùng lặp hoặc khiến giao diện nhấp nháy.
Kiểm tra nhiệm vụ chính: đọc, nhập liệu, điều hướng và gửi biểu mẫu phải hoạt động ở profile nhẹ.

Tiêu chí thành công không phải là “đã đọc được tier”, mà là profile nhẹ thực sự loại bỏ một phần công việc không thiết yếu trong khi người dùng vẫn hoàn thành được nhiệm vụ. Nếu chỉ ẩn biểu tượng bằng CSS nhưng mã vẫn tính toán với cùng tần suất, triển khai chưa đạt mục tiêu.

Các lỗi thường gặp và cách quay lui

Coi tier là benchmark: tier chỉ là nhóm phân loại; không dùng nó để hứa hẹn thời gian chạy cụ thể.
Chỉ đọc một lần: năng lực ban đầu không phản ánh áp lực do ứng dụng khác, tab khác hoặc tình trạng điều tiết nhiệt.
Tắt chức năng chính: giảm phần trang trí và tác vụ phụ trước; profile nhẹ phải vẫn dùng được.
Chuyển profile quá nhanh: dùng số lần đọc liên tiếp hoặc thời gian tối thiểu như trong mẫu để tránh chớp trạng thái.
Không xử lý lỗi observe(): giữ profile fallback khi nguồn cpu không được hỗ trợ.
Ghi đè lựa chọn người dùng: cài đặt trợ năng và lựa chọn thủ công phải có ưu tiên cao hơn quyết định tự động.

Nếu logic tự động gây lỗi, cách quay lui an toàn là ngừng gọi watchCpuPressure() nhưng giữ profile ban đầu và các kiểm tra tính năng. Nếu profile đó vẫn gây vấn đề, đặt activeProfileName về balanced, tắt riêng tác vụ nền không thiết yếu và kiểm tra lại luồng chính. Chỉ khôi phục profile full sau khi đã xác nhận hiệu ứng không làm giảm phản hồi.

Chiến lược triển khai thực tế

Hãy bắt đầu với một tính năng dễ quan sát như video nền, hoạt ảnh biểu đồ hoặc bộ hẹn giờ cập nhật. Ghi nhận trạng thái trước khi tích hợp, triển khai profile nhẹ, đo lại tác vụ và kiểm tra nhiệm vụ chính. Sau khi đường lui ổn định, mới mở rộng sang xử lý ảnh, tiền tải dữ liệu hoặc tác vụ JavaScript tốn CPU hơn.

Đừng tạo quá nhiều mức chất lượng ngay từ đầu. Ba profile light, balanced và full thường dễ kiểm thử hơn, nhưng ngưỡng và nội dung từng profile phải dựa trên chi phí thật của ứng dụng. API chỉ cung cấp tín hiệu; quyết định tính năng nào được tắt vẫn thuộc về đội phát triển.

Kết luận

CPU Performance API phù hợp để chọn mức trải nghiệm ban đầu, còn Compute Pressure API phù hợp để phản ứng với thay đổi trong lúc trang chạy. Một triển khai an toàn cần kiểm tra tính năng, dùng HTTPS, có profile fallback, chống chuyển trạng thái liên tục, tôn trọng lựa chọn người dùng và xác minh rằng tác vụ không thiết yếu thực sự giảm.

Hãy xem đây là lớp cải thiện tăng dần, không phải phương pháp đo chính xác tốc độ máy. Nếu trình duyệt không cung cấp tín hiệu, website vẫn phải hoạt động bình thường với profile cân bằng hoặc nhẹ.

Nguồn tham khảo

New in Chrome 152 — Chrome for Developers.
Chrome 152 | Release notes — Chrome for Developers.
Compute Pressure API – Web APIs — MDN Web Docs.
Compute Pressure API: Browser compatibility — MDN Web Docs.
WICG/cpu-performance — Web Incubator Community Group.
Compute Pressure API — Chrome for Developers.

CPU Performance API: Chọn giao diện nhẹ hơn cho máy yếu