Page Visibility API: svetainės našumo ir naudotojo patirties optimizavimas visame pasaulyje

Šiuolaikinėje dinamiškoje interneto aplinkoje naudotojai dažnai vienu metu naudoja kelias naršyklės korteles. Tai kūrėjams kelia unikalų iššūkį: kaip užtikrinti optimalų svetainės našumą ir sklandžią naudotojo patirtį, net kai kortelė nėra aktyviai matoma. Page Visibility API suteikia galingą šio iššūkio sprendimą, leidžiantį kūrėjams protingai valdyti išteklių naudojimą ir pritaikyti svetainės elgseną pagal tinklalapio matomumo būseną.

Kas yra Page Visibility API?

Page Visibility API yra naršyklės API, leidžianti interneto kūrėjams nustatyti, ar tinklalapis šiuo metu matomas naudotojui. Puslapis laikomas matomu, kai jis yra pirmo plano kortelėje arba lange. Priešingai, puslapis laikomas paslėptu, kai jis yra fono kortelėje, sumažintame lange arba užrakintame ekrane.

API suteikia dvi pagrindines funkcijas:

• `document.visibilityState` savybė: Grąžina dabartinę dokumento matomumo būseną. Galimos reikšmės:
• `visible`: Puslapis yra pirmo plano kortelėje arba lange.
• `hidden`: Puslapis yra fono kortelėje, sumažintame lange arba užrakintame ekrane.
• `prerender`: Puslapis yra iš anksto atvaizduojamas, bet dar nematomas.
• `unloaded`: Puslapis yra iškeliamas iš atminties.
• `visibilitychange` įvykis: Įvykis, kuris suaktyvinamas, kai pasikeičia dokumento matomumo būsena.

Kodėl Page Visibility API yra svarbi?

Page Visibility API siūlo didelę naudą tiek naudotojams, tiek kūrėjams:

Geresnis svetainės našumas

Suprasdami, kada puslapis yra matomas, kūrėjai gali optimizuoti išteklių naudojimą. Kai puslapis yra paslėptas, dažnai nereikia toliau vykdyti daug išteklių reikalaujančių užduočių, tokių kaip:

• Dažnas duomenų apklausimas: Sustabdykite arba sumažinkite AJAX užklausų į serverį dažnumą.
• Animacijų atvaizdavimas: Sustabdykite animacijas arba sumažinkite jų kadrų dažnį.
• Vaizdo įrašų atkūrimas: Sustabdykite vaizdo įrašo atkūrimą arba sumažinkite jo kokybę.
• Sudėtingi skaičiavimai: Sustabdykite sudėtingus skaičiavimus ar duomenų apdorojimą.

Tai sumažina procesoriaus naudojimą, atminties sąnaudas ir tinklo pralaidumą, todėl puslapiai greičiau įkeliami, veikia sklandžiau ir pagerėja baterijos veikimo laikas, ypač mobiliuosiuose įrenginiuose.

Geresnė naudotojo patirtis

API leidžia kūrėjams pritaikyti naudotojo patirtį pagal matomumą. Pavyzdžiui:

• Pranešimai: Rodyti pranešimus, kai paslėpta kortelė vėl tampa matoma.
• Eigos indikatoriai: Sustabdyti arba atnaujinti eigos indikatorius priklausomai nuo matomumo.
• Naudotojo eigos išsaugojimas: Automatiškai išsaugoti naudotojo eigą, kai puslapis tampa paslėptas, kad būtų išvengta duomenų praradimo.

Šie patobulinimai prisideda prie jautresnės ir patogesnės naudotojui svetainės, nepriklausomai nuo naudotojo įrenginio ar tinklo sąlygų.

Išteklių optimizavimas

Page Visibility API yra labai svarbi efektyviam išteklių valdymui, ypač vieno puslapio programose (SPA) ir interneto programose, kurios atlieka fono užduotis. Sustabdžius nereikalingas operacijas, kai kortelė yra paslėpta, API atlaisvina sistemos išteklius kitoms programoms ir užduotims, gerindama bendrą sistemos našumą.

Kaip naudoti Page Visibility API

Naudoti Page Visibility API yra paprasta. Štai pagrindinis pavyzdys:

// Check initial visibility state
if (document.visibilityState === "visible") {
  // Page is visible, start or resume tasks
  startTasks();
} else {
  // Page is hidden, pause tasks
  pauseTasks();
}

// Listen for visibility change events
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // Page is visible, start or resume tasks
    startTasks();
  } else {
    // Page is hidden, pause tasks
    pauseTasks();
  }
});

function startTasks() {
  console.log("Užduotys pradedamos...");
  // Your code to start resource-intensive tasks here
}

function pauseTasks() {
  console.log("Užduotys stabdomos...");
  // Your code to pause resource-intensive tasks here
}

Šis kodo fragmentas parodo, kaip patikrinti pradinę matomumo būseną ir klausytis `visibilitychange` įvykių, kad atitinkamai paleistumėte ar sustabdytumėte užduotis.

Praktiniai pavyzdžiai ir naudojimo atvejai

Panagrinėkime keletą praktinių pavyzdžių, kaip Page Visibility API galima naudoti skirtingose situacijose:

1 pavyzdys: vaizdo įrašų atkūrimo optimizavimas

Įsivaizduokite vaizdo įrašų transliacijos svetainę. Kai naudotojas pereina į kitą kortelę, nereikia toliau buferizuoti ar leisti vaizdo įrašo fone.

const videoElement = document.getElementById("myVideo");

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // Page is visible, resume video playback
    videoElement.play();
  } else {
    // Page is hidden, pause video playback
    videoElement.pause();
  }
});

Šis kodas sustabdo vaizdo įrašą, kai kortelė yra paslėpta, taip taupant pralaidumą ir procesoriaus išteklius.

2 pavyzdys: duomenų apklausos dažnumo mažinimas

Daugelis interneto programų remiasi dažnu duomenų apklausimu, kad gautų naujausią informaciją. Tačiau tai gali būti neefektyvu, kai naudotojas aktyviai nežiūri į puslapį.

let pollingInterval;

function startPolling() {
  pollingInterval = setInterval(function() {
    // Your code to fetch data from the server
    fetchData();
  }, 5000); // Poll every 5 seconds
}

function stopPolling() {
  clearInterval(pollingInterval);
}


document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // Page is visible, start polling
    startPolling();
  } else {
    // Page is hidden, stop polling
    stopPolling();
  }
});

// Start polling initially if the page is visible
if (document.visibilityState === "visible") {
    startPolling();
}

function fetchData() {
  // Replace with your actual data fetching logic
  console.log("Gaunami duomenys...");
}

Šis kodas sustabdo duomenų apklausą, kai kortelė yra paslėpta, ir atnaujina ją, kai kortelė vėl tampa matoma.

3 pavyzdys: žaidimo ciklų sustabdymas

Interneto žaidimuose būtina sustabdyti žaidimo ciklą, kai naudotojas pereina į kitą kortelę, kad būtų išvengta nereikalingo procesoriaus naudojimo ir baterijos eikvojimo.

let gameLoopInterval;

function startGameLoop() {
  gameLoopInterval = setInterval(gameLoop, 16); // 60 FPS
}

function stopGameLoop() {
  clearInterval(gameLoopInterval);
}

function gameLoop() {
  // Your game logic here
  console.log("Žaidimo ciklas veikia...");
}


document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // Page is visible, start game loop
    startGameLoop();
  } else {
    // Page is hidden, stop game loop
    stopGameLoop();
  }
});

// Start game loop initially if the page is visible
if (document.visibilityState === "visible") {
    startGameLoop();
}

Šis kodas sustabdo žaidimo ciklą, kai kortelė yra paslėpta, neleidžiant žaidimui naudoti išteklių fone.

4 pavyzdys: automatinis naudotojo duomenų išsaugojimas

Siekiant išvengti duomenų praradimo, programos gali automatiškai išsaugoti naudotojo duomenis, kai puslapis tampa paslėptas.

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "hidden") {
    // Page is hidden, save user data
    saveUserData();
  }
});

function saveUserData() {
  // Your code to save user data to local storage or server
  console.log("Išsaugomi naudotojo duomenys...");
}

Tai užtikrina, kad naudotojo pažanga bus išsaugota, net jei naudotojas netyčia uždarys kortelę arba išeis iš puslapio.

Suderinamumas su naršyklėmis

Page Visibility API plačiai palaiko šiuolaikinės naršyklės, įskaitant Chrome, Firefox, Safari, Edge ir Opera. Naujausią informaciją galite rasti suderinamumo lentelėje MDN Web Docs svetainėje.

Senesnėms naršyklėms, kurios nepalaiko API, galite naudoti „polyfill“ kaip alternatyvų sprendimą. Tačiau „polyfills“ gali būti ne tokie tikslūs ar efektyvūs kaip vietinė API.

Geriausios praktikos naudojant Page Visibility API

Štai keletas geriausių praktikų, kurių reikėtų nepamiršti naudojant Page Visibility API:

• Venkite per didelio optimizavimo: Neoptimizuokite kodo per anksti, remdamiesi matomumo būsena. Profiluokite savo programą, kad nustatytumėte daugiausiai išteklių reikalaujančias užduotis, ir pirmiausia sutelkite dėmesį į jų optimizavimą.
• Atidėkite arba apribokite matomumo pakeitimus: Norėdami išvengti per didelio įvykių apdorojimo, apsvarstykite galimybę atidėti (`debounce`) arba apriboti (`throttle`) `visibilitychange` įvykį.
• Kruopščiai testuokite: Testuokite savo programą skirtingose naršyklėse ir įvairiuose įrenginiuose, kad įsitikintumėte, jog Page Visibility API veikia teisingai.
• Atsižvelkite į prieinamumą: Užtikrinkite, kad jūsų Page Visibility API naudojimas neturėtų neigiamo poveikio prieinamumui. Pavyzdžiui, suteikite naudotojams alternatyvių būdų pasiekti informaciją ar funkcijas, kurios yra sustabdytos arba išjungtos, kai puslapis yra paslėptas.
• Suteikite aiškų grįžtamąjį ryšį: Informuokite naudotojus, kada užduotys yra sustabdomos ar atnaujinamos priklausomai nuo matomumo būsenos. Tai gali padėti išvengti painiavos ir pagerinti naudotojo patirtį. Pavyzdžiui, eigos juosta galėtų sustoti, kai kortelė yra paslėpta, ir tęsti, kai ji vėl matoma.

Svetainių našumo ir Page Visibility API ateitis

Interneto programoms tampant vis sudėtingesnėms ir reikalaujančioms daugiau išteklių, Page Visibility API ir toliau vaidins gyvybiškai svarbų vaidmenį optimizuojant svetainių našumą ir gerinant naudotojų patirtį. Būsimi pokyčiai gali apimti:

• Detalesnės matomumo būsenos: API galėtų būti išplėsta, kad suteiktų detalesnę informaciją apie puslapio matomumo būseną, pavyzdžiui, ar jis yra iš dalies uždengtas kitais elementais.
• Integracija su kitomis API: API galėtų būti integruota su kitomis naršyklės API, pvz., Neveiklumo nustatymo API (Idle Detection API), kad būtų galima dar sudėtingiau valdyti išteklius.
• Patobulinti „polyfills“: Galėtų būti sukurti tikslesni ir efektyvesni „polyfills“, kad būtų užtikrintas palaikymas senesnėms naršyklėms.

Išvada

Page Visibility API yra vertingas įrankis interneto kūrėjams, siekiantiems optimizuoti svetainės našumą, sumažinti išteklių naudojimą ir pagerinti naudotojo patirtį. Suprasdami, kada puslapis yra matomas ar paslėptas, kūrėjai gali protingai valdyti daug išteklių reikalaujančias užduotis, pritaikyti naudotojo patirtį ir užtikrinti, kad jų svetainės būtų jautrios ir efektyvios, nepriklausomai nuo naudotojo įrenginio ar tinklo sąlygų. Pasinaudodami Page Visibility API, galite kurti tvaresnį ir patogesnį internetą visiems.

Nepamirškite išbandyti savo įdiegimo įvairiose naršyklėse ir įrenginiuose, kad užtikrintumėte nuoseklų elgesį ir optimalų našumą. Laikydamiesi geriausių praktikų ir būdami informuoti apie naujausius svetainių našumo optimizavimo pokyčius, galite išnaudoti Page Visibility API galią, kad savo naudotojams visame pasaulyje suteiktumėte išskirtinę interneto patirtį.