CPU Performance API: Xaiv web interface sib rau tshuab qeeb

Txoj kev daws luv luv: siv navigator.cpuPerformance los xaiv profile pib, ces siv PressureObserver los saib xyuas qhov chaw cpu. Thaum lub xeev yog serious lossis critical, tua cov nyhuv thiab cov haujlwm uas tsis tseem ceeb; yog API tsis muaj lossis tsis ua haujlwm, siv ib qho profile sib lossis nruab nrab uas twb tau teev cia lawm.

Txoj kev no haum rau ib qho adaptive web experience: cov tshuab muaj zog yuav khaws tau tag nrho cov nyhuv, hos cov cuab yeej tsis muaj zog yuav txo qhov txav, video tom qab, qhov nquag hloov tshiab lossis cov txheej txheem ntxiv. Qhov no tsis yog qhov ntsuas benchmark uas raug kawg thiab tsis lav tias txhua lub vev xaib yuav khiav ceev dua. Koj tseem yuav tsum optimize JavaScript, duab thiab network ib yam li ib txwm.

Faib kom paub qhov peev xwm CPU thiab CPU qhov kev nyuaj siab

Lub cim qhia	Nws teb lo lus nug twg?	Yuav siv rau dab tsi?
`navigator.cpuPerformance`	Lub cuab yeej nyob hauv pab pawg peev xwm CPU twg?	Xaiv profile pib thaum nplooj ntawv pib.
`PressureObserver`	Tam sim no CPU tab tom raug nyuaj siab txog qib twg?	Txo lossis rov qhib cov ntu uas tsis tseem ceeb thaum nplooj ntawv tseem khiav.

CPU Performance API muab ib lub cim qhia uas hloov tsis ntau txog pab pawg peev xwm, hos Compute Pressure API qhia txog lub xeev uas hloov tau thiab yuav raug cuam tshuam los ntawm lwm cov tab lossis lwm daim ntawv thov. Cov xeev xws li nominal, fair, serious thiab critical tsis yog feem pua CPU uas qhia meej (raws li developer.mozilla.org).

Yog li, tsis txhob sau ib qho xwm txheej zoo li “thaum CPU qis dua 40% ces qhib cov nyhuv”. Siv tier los xaiv qhov teeb tsa pib, ces siv lub xeev kev nyuaj siab los ncua cov ntu ntxiv ib ntus. Chrome 152 qhia CPU Performance API los ntawm navigator.cpuPerformance; tus tier uas qhia tawm yuav raug tus neeg siv lossis tus thawj tswj system hloov hauv qee qhov chaw, yog li daim ntawv thov tsis txhob suav tus nqi no tias yog pov thawj tiag tiag txog hardware (raws li developer.chrome.com).

Npaj cov profile ua ntej nyeem API

API tsuas muaj txiaj ntsig thaum lub vev xaib twb muaj cov ntu uas txo tau lub nra. Pib nrog peb lub profile uas qhia meej:

Profile	Tus cwj pwm	Thaum twg siv
`light`	Tua cov animation kho kom zoo nkauj thiab video tom qab, nres cov haujlwm khiav tom qab uas tsis tsim nyog, thiab ncua qhov hloov tshiab kom ntev dua.	Tier qis, tier tsis paub, lossis CPU nyob hauv lub xeev hnyav.
`balanced`	Khaws cov nyhuv luv luv, thauj cov ntaub ntawv tsuas yog thaum xav tau, thiab txwv cov kev hloov tshiab ntxiv.	Fallback nyab xeeb rau feem ntau ntawm cov xwm txheej uas tseem tsis tau muaj lub cim qhia txaus.
`full`	Khaws cov nyhuv thiab cov haujlwm ntxiv thaum lawv tsis ua rau kev teb thaum sib cuam tshuam qeeb.	Tier siab thiab CPU qhov kev nyuaj siab nyob rau qib txais tau.

Khaws kev nyeem cov ntsiab lus, kev ntaus ntaub ntawv, kev taw qhia, kev xa form thiab cov lus teb tom qab ua haujlwm. Rau dashboard, koj yuav tua tau chart animation thiab txo qhov nquag hloov tshiab, tiam sis tsis txhob zais cov lim lossis ncua lub pob cov lus teb.

Yog nplooj ntawv tab tom thauj ntau daim duab txav, kev hloov GIF ua video kom txo qhov loj ntawm ntaub ntawv yog ib txoj kev optimize uas cais tawm. CPU Performance API tsis hloov chaw rau kev txo resource qhov loj lossis kho JavaScript code uas twb hnyav dhau lawm.

Tsim profile pib thiab fallback

Khiav JavaScript nram qab no hauv nplooj ntawv lub browser-side code, tom qab DOM npaj txhij lossis rau tom kawg ntawm HTML document. Hloov ib feem hauv updateNonCriticalData() nrog koj daim ntawv thov cov haujlwm tiag tiag. Cov tier threshold hauv qhov piv txwv tsuas yog qhov chaw pib; yuav tsum kho raws li txhua feature qhov nqi siv peev txheej tiag tiag.

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 yog txoj kev fallback uas nyab xeeb hauv qhov piv txwv no, hos profile light yog siv thaum txheeb tau tias tier qis. Yog koj cov khoom xav txo kev thauj ntau dua li khaws cov duab zoo li qub, koj kuj hloov tau fallback ua light; nco ntsoov rov kuaj qhov kev siv tau ua ntej tso rau kev siv tiag.

Saib xyuas CPU pressure yam tsis ua rau interface ci ntsais tas li

Muab cov code no tso tam sim tom qab cov code profile. Tus qauv no yuav tsum kom muaj qhov xwm txheej siab tshwm sim sib law liag ua ntej hloov mus rau light, thiab yuav tsum tau nyeem tau li ob peb zaug ib txwm ua ntej rov qab mus rau profile thaum pib. Lub tswv yim no hu ua delay lossis hysteresis; nws pab tsis pub ib qho teeb liab luv hloov lub xeev.

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 tsuas yog tus nqi siv ua piv txwv xwb. Yog browser tsis lees txais qhov source cpu lossis qhov kev xaiv saib xyuas, qhov hu observe() yuav raug tsis lees txais; thaum ntawd, profile uas twb siv los ntawm kauj ruam dhau los tseem yuav txuas ntxiv siv. Tsis tas yuav suav qhov yuam kev no ua qhov yuam kev uas thaiv tag nrho nplooj ntawv.

Tua cov ntu pabcuam kom raug siv CSS thiab JavaScript

CSS haum rau cov ntu kho kom zoo nkauj, tab sis kev zais ib lub element tsis txhais tias JavaScript twb tso tseg kev xam lawm. Muab cov cai no tso rau hauv koj nplooj ntawv CSS:

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

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

Rau cov haujlwm khiav tom qab, koj yuav tsum nres timer lossis hla cov kev xam uas tsis tsim nyog. Txoj haujlwm setBackgroundWorkEnabled() saum toj no yuav tshem timer tawm ua ntej tsim dua tshiab. Yog txoj haujlwm tiag siv requestAnimationFrame, Web Worker lossis lub tsev qiv ntawv chart, ntxiv qhov kev nres uas phim nws; tsis txhob tsuas ntxiv CSS class xwb.

Yog tus neeg siv twb qhib qhov kev xaiv txo motion lossis xaiv hom txuag hluav taws xob lawm, yuav tsum muab qhov kev xaiv ntawd tso ua ntej. Tsis txhob cia lub tshuab rov qab qhib profile puv sau thawm dhau qhov kev xaiv accessibility lossis qhov chaw teeb tsa uas tus neeg siv xaiv meej lawm.

Kuaj HTTPS, kev txhawb nqa thiab iframe

Khiav hauv secure context: lub website siv tiag yuav tsum siv HTTPS nrog daim ntawv pov thawj siv tau. Thaum tsim kho hauv zos, localhost feem ntau haum dua li qhib HTML file ncaj qha.
Kuaj feature: siv 'cpuPerformance' in navigator thiab 'PressureObserver' in window, tsis txhob kwv yees raws li lub npe lossis browser version xwb.
Khaws fallback: txawm browser tsis txhawb los, tus neeg siv yuav tsum nyeem tau cov ntsiab lus, mus rau lwm nplooj tau thiab ua tiav txoj haujlwm tseem ceeb.
Kuaj iframe: yog code khiav hauv iframe, kuaj source origin thiab Permissions Policy ua ntej txiav txim tias API muaj teeb meem.
Txo cov ntaub ntawv sau: siv tier tsuas yog kho qhov kev paub siv ntawm qhov chaw ntawd; tsis txhob hloov lub teeb liab no ua device identification profile.

Compute Pressure API tam sim no muaj kev txhawb nqa tsis sib xws hauv cov browser nrov, thiab MDN sau tseg tias nws tseem muaj kev txhawb nqa tsawg. Yog li, yuav tsum siv nws ua progressive enhancement, tsis yog qhov yuav tsum muaj thiaj li load tau nplooj ntawv (raws li developer.mozilla.org).

Xyuas qhov txiaj ntsig ua ntej tso tawm

Kuaj lub xeev thaum pib: qhib nplooj ntawv hauv ib puag ncig uas muaj API thiab ib puag ncig uas tsis muaj API; xyuas kom meej tias profile uas xaiv, class low-power-mode thiab cov timer uas phim tau raug teeb tsa.
Kuaj profile qis: siv CPU tier override hauv Chrome 152 yog tias koj qhov chaw sim muab qhov kev xaiv no. Tsis txhob siv qhov kev xaiv ntawd ua pov thawj sawv cev rau txhua lub device tiag.
Kuaj dynamic pressure: hauv ib puag ncig sim uas nyab xeeb, xyuas tias thaum lub xeev siab txaus, cov effect raug tua thiab cov haujlwm khiav tom qab raug nres tiag.
Ntsuas cov haujlwm: siv Chrome DevTools Performance los saib long task, JavaScript activity, tus naj npawb ntawm kev redraw thiab qhov nquag hloov tshiab ua ntej thiab tom qab siv profile.
Kuaj kev rov qab: xyuas kom profile rov qab tsis ua rau form state ploj, tsis tsim network request rov ua dua, thiab tsis ua rau interface ci ntsais.
Kuaj txoj haujlwm tseem ceeb: kev nyeem, sau ntaub ntawv, hloov nplooj ntawv thiab xa form yuav tsum ua haujlwm hauv profile qis.

Qhov ntsuas tias ua tiav tsis yog “nyeem tau tier lawm,” tiam sis yog profile qis yuav tsum tshem tau ib feem ntawm cov haujlwm tsis tseem ceeb tiag, thaum tus neeg siv tseem ua tiav tau nws txoj haujlwm. Yog tsuas zais icon nrog CSS tab sis code tseem xam ntawm tib zaus qub, qhov kev siv ntawd tseem tsis tau txog lub hom phiaj.

Teeb meem uas nquag ntsib thiab txoj kev rov qab

Xam tier ua benchmark: tier tsuas yog ib pawg kev faib qeb; tsis txhob siv nws cog lus txog lub sijhawm khiav tshwj xeeb.
Nyeem ib zaug xwb: lub peev xwm thaum pib tsis qhia txog pressure uas lwm daim ntawv thov, lwm tab lossis kev tswj kub ua rau tshwm sim.
Tua txoj haujlwm tseem ceeb: ua ntej txo cov ntu kho kom zoo nkauj thiab cov haujlwm pabcuam; profile qis yuav tsum tseem siv tau.
Hloov profile ceev dhau: siv tus naj npawb ntawm kev nyeem sib law liag lossis lub sijhawm tsawg kawg nkaus zoo li hauv tus qauv, kom tsis txhob muaj kev ci ntsais ntawm lub xeev.
Tsis lis qhov yuam kev observe(): khaws qhov profile fallback thaum lub source cpu tsis txhawb.
Hla dhau qhov kev xaiv ntawm tus neeg siv: cov chaw pab cuam tau yooj yim thiab qhov kev xaiv teeb tsa manually yuav tsum muaj qhov muaj feem tseem ceeb dua qhov kev txiav txim siab tsis siv neeg.

Yog tias qhov logic tsis siv neeg ua rau muaj teeb meem, txoj kev rov qab nyab xeeb yog tsum tsis hu watchCpuPressure() nws ntxiv, tiam sis khaws qhov profile pib thiab cov kev kuaj feature. Yog tias qhov profile ntawd tseem ua teeb meem, teeb activeProfileName rov qab rau balanced, tua cais cov haujlwm tom qab uas tsis tseem ceeb thiab rov kuaj qhov kev khiav haujlwm tseem ceeb. Tsuas rov qhib qhov profile full thaum tau lees paub tias cov effect tsis txo qhov kev teb sai.

Lub tswv yim siv tiag tiag

Pib nrog ib qho feature uas pom tau yooj yim, xws li video tom qab, animation ntawm daim chart lossis lub timer hloov tshiab. Sau tseg lub xeev ua ntej kev sib txuas, siv qhov profile sib, rov ntsuas lub luag haujlwm thiab kuaj lub luag haujlwm tseem ceeb. Thaum txoj kev rov qab ua haujlwm ruaj khov lawm, mam li nthuav mus rau kev ua duab, preload cov ntaub ntawv lossis lwm cov haujlwm JavaScript uas siv CPU ntau dua.

Tsis txhob tsim ntau theem zoo dhau los ntawm qhov pib. Peb profile light, balanced thiab full feem ntau kuaj tau yooj yim dua, tiam sis cov threshold thiab cov ntsiab lus hauv txhua profile yuav tsum yog raws li tus nqi siv tiag tiag ntawm daim ntawv thov. API tsuas muab lub teeb liab xwb; kev txiav txim siab tias yuav tua feature twg tseem yog lub luag haujlwm ntawm pab pawg tsim kho.

Xaus lus

CPU Performance API tsim nyog siv los xaiv theem kev paub siv thaum pib, hos Compute Pressure API tsim nyog siv los teb rau cov kev hloov pauv thaum nplooj ntawv tab tom khiav. Kev siv kom nyab xeeb yuav tsum kuaj qhov muaj feature, siv HTTPS, muaj profile fallback, tiv thaiv kom tsis txhob hloov xeev ntau dhau, hwm tus neeg siv txoj kev xaiv thiab txheeb xyuas tias cov haujlwm tsis tseem ceeb tau txo qis tiag tiag.

Xam qhov no ua ib txheej kev txhim kho maj mam, tsis yog ib txoj kev ntsuas qhov ceev ntawm lub tshuab kom raug. Yog tias browser tsis muab lub teeb liab, website tseem yuav tsum ua haujlwm li qub nrog profile sib npaug lossis profile sib.

Cov ntaub ntawv siv

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: Xaiv qhov web interface sib rau tshuab qeeb