Front-end įrenginio atminties API: atmintį įvertinančių žiniatinklio patirčių kūrimas

Žiniatinklio programavimo pasaulyje mes dažnai kuriame ir testuojame naudodami didelio našumo kompiuterius, prijungtus prie greitų ir stabilių tinklų. Tačiau mūsų naudotojai prieina prie mūsų kūrinių naudodami stulbinančią įrenginių ir sąlygų įvairovę. Aptaki, funkcijų gausa pasižyminti aplikacija, kuri nepriekaištingai veikia programuotojo nešiojamajame kompiuteryje, gali tapti varginančia ir lėta patirtimi biudžetiniame išmaniajame telefone regione su ribotu ryšiu. Šis atotrūkis tarp kūrimo aplinkos ir realaus pasaulio naudojimo yra vienas didžiausių iššūkių kuriant išties globalias ir įtraukias žiniatinklio patirtis.

Kaip mums sumažinti šį atotrūkį? Kaip galime suteikti turtingą patirtį tiems, kurie gali ją palaikyti, kartu užtikrindami greitą, funkcionalią ir patikimą patirtį tiems, kurie turi mažiau galingą techninę įrangą? Atsakymas slypi kuriant prisitaikančias (adaptyvias) aplikacijas. Užuot taikę „vienas dydis tinka visiems“ principą, turime pritaikyti naudotojo patirtį prie naudotojo įrenginio galimybių. Vienas iš svarbiausių, tačiau dažnai nepastebimų įrenginio apribojimų yra atmintis (RAM). Būtent čia į pagalbą ateina Įrenginio atminties API (Device Memory API), suteikianti front-end programuotojams paprastą, bet galingą mechanizmą, leidžiantį jų aplikacijoms atsižvelgti į atminties resursus.

Kas tiksliai yra Įrenginio atminties API?

Įrenginio atminties API yra žiniatinklio standartas, suteikiantis užuominą apie naudotojo įrenginyje esančios operatyviosios atminties (RAM) kiekį. Tai nepaprastai paprastas API, pasiekiamas per vieną, tik skaitymui skirtą savybę `navigator` objekte:

`navigator.deviceMemory`

Kai pasiekiate šią savybę, ji grąžina apytikslę įrenginio RAM vertę gigabaitais. Pavyzdžiui, paprastas patikrinimas jūsų naršyklės konsolėje galėtų atrodyti taip:

`console.log(navigator.deviceMemory);` // Galima išvestis: 8

Grąžinamų verčių ir privatumo supratimas

Galite pastebėti, kad API negrąžina tikslaus skaičiaus, pavyzdžiui, 7,89 GB. Vietoj to, ji grąžina suapvalintą vertę, konkrečiai – dvejeto laipsnį. Specifikacija siūlo tokias vertes kaip: 0.25, 0.5, 1, 2, 4, 8 ir t. t. Tai yra sąmoningas dizaino sprendimas dėl privatumo.

Jei API pateiktų tikslų RAM kiekį, tai galėtų tapti dar vienu duomenų tašku naršyklės „pirštų atspaudų“ rinkimui (angl. „fingerprinting“) – praktikai, kai sujungiant daug smulkių informacijos dalių sukuriamas unikalus naudotojo identifikatorius, kuris gali būti naudojamas sekimui. Sugrupuodamas vertes, API suteikia pakankamai informacijos našumo optimizavimui, ženkliai nedidindamas rizikos naudotojo privatumui. Tai klasikinis kompromisas: suteikti naudingą užuominą, neatskleidžiant per daug specifinių techninės įrangos detalių.

Naršyklių palaikymas

Šio rašymo metu, Įrenginio atminties API palaiko Chromium pagrindu veikiančios naršyklės, įskaitant Google Chrome, Microsoft Edge ir Opera. Tai vertingas įrankis, leidžiantis pasiekti didelę dalį pasaulinės žiniatinklio auditorijos. Visada geriausia patikrinti išteklius, tokius kaip „Can I Use“, norint gauti naujausią informaciją apie palaikymą ir traktuoti API buvimą kaip laipsnišką pagerinimą. Jei `navigator.deviceMemory` yra neapibrėžtas (undefined), turėtumėte sklandžiai grįžti prie numatytosios patirties.

Kodėl įrenginio atmintis keičia žaidimo taisykles front-end našumui

Dešimtmečius front-end našumo diskusijos sukosi aplink tinklo greitį ir procesoriaus (CPU) apdorojimo galią. Mes glaudiname resursus, minimizuojame kodą ir optimizuojame atvaizdavimo kelius. Nors visa tai yra nepaprastai svarbu, atmintis tapo tyliąja kliūtimi, ypač mobiliuosiuose įrenginiuose, kurie dabar dominuoja pasauliniame žiniatinklio sraute.

Atminties kliūtis šiuolaikinėse svetainėse

Šiuolaikinės žiniatinklio aplikacijos yra reikalaujančios daug atminties. Joms reikia:

• Dideli JavaScript paketai: Karkasai, bibliotekos ir aplikacijos kodas turi būti išanalizuoti, sukompiliuoti ir laikomi atmintyje.
• Aukštos raiškos paveikslėliai ir vaizdo įrašai: Šie resursai sunaudoja daug atminties, ypač kai yra dekoduojami ir atvaizduojami.
• Sudėtingos DOM struktūros: Tūkstančiai DOM mazgų vieno puslapio aplikacijoje (SPA) sukuria didelį atminties pėdsaką.
• CSS animacijos ir WebGL: Turtingi vaizdiniai efektai gali būti labai reiklūs tiek vaizdo plokštei (GPU), tiek sistemos RAM.

Įrenginyje su 8 GB ar 16 GB RAM tai retai tampa problema. Tačiau mažo galingumo išmaniajame telefone su vos 1 GB ar 2 GB RAM – kas yra įprasta daugelyje pasaulio šalių – tai gali sukelti rimtą našumo pablogėjimą. Naršyklė gali sunkiai išlaikyti viską atmintyje, o tai lemia trūkinėjančias animacijas, lėtą atsako laiką ir net kortelių (tab) užstrigimus. Tai tiesiogiai veikia pagrindinius našumo rodiklius, tokius kaip Pagrindiniai žiniatinklio rodikliai (Core Web Vitals), ypač Interaction to Next Paint (INP), nes pagrindinė gija yra per daug užimta, kad atsakytų į naudotojo įvestį.

Pasaulinės skaitmeninės atskirties mažinimas

Atsižvelgimas į įrenginio atmintį yra empatijos aktas jūsų pasaulinei naudotojų bazei. Milijonams naudotojų pigus Android įrenginys yra pagrindinis, o galbūt ir vienintelis, kelias į internetą. Jei jūsų svetainė užstringa jų naršyklėje, jūs ne tik praradote sesiją; galbūt praradote naudotoją visam laikui. Kurdami atmintį įvertinančias aplikacijas, užtikrinate, kad jūsų paslauga būtų prieinama ir naudojama visiems, ne tik tiems, kurie turi aukščiausios klasės techninę įrangą. Tai ne tik gera etika; tai geras verslas, atveriantis jūsų aplikaciją platesnei potencialiai rinkai.

Praktiniai naudojimo atvejai ir įgyvendinimo strategijos

Žinoti įrenginio atminties kiekį yra viena; veikti pagal tai – kita. Štai keletas praktinių strategijų, kaip padaryti jūsų aplikacijas atsižvelgiančias į atmintį. Kiekvienam pavyzdžiui naudosime paprastą klasifikaciją:

`const memory = navigator.deviceMemory;`
`const isLowMemory = memory && memory < 2;` // Šiuose pavyzdžiuose apibrėžkime „mažai atminties“ kaip mažiau nei 2 GB.

1. Adaptyvusis paveikslėlių įkėlimas

Problema: Didžiulių, aukštos raiškos pagrindinių paveikslėlių teikimas visiems naudotojams eikvoja srautą ir sunaudoja didžiulius atminties kiekius įrenginiuose, kurie net negali jų atvaizduoti visa kokybe.

Sprendimas: Naudokite Įrenginio atminties API, kad pateiktumėte tinkamo dydžio paveikslėlius. Nors `` elementas puikiai tinka meno krypčiai (art direction) ir raiškos keitimui pagal peržiūros sritį (viewport), atmintis suteikia mums dar vieną aspektą, į kurį reikia atsižvelgti.

Įgyvendinimas:

Galite naudoti JavaScript, kad dinamiškai nustatytumėte paveikslėlio šaltinį. Tarkime, turite pagrindinio paveikslėlio komponentą.

function getHeroImageUrl() {
  const base_path = '/images/hero';
  const isLowMemory = navigator.deviceMemory && navigator.deviceMemory < 2;

  if (isLowMemory) {
    return `${base_path}-low-res.jpg`; // Mažesnis, labiau suspaustas JPEG
  } else {
    return `${base_path}-high-res.webp`; // Didesnis, aukštos kokybės WebP
  }
}

document.getElementById('hero-image').src = getHeroImageUrl();

Šis paprastas patikrinimas užtikrina, kad naudotojai su mažai atminties turinčiais įrenginiais gautų vizualiai priimtiną paveikslėlį, kuris greitai įsikelia ir neužstrigdina jų naršyklės, o naudotojai galinguose įrenginiuose gauna visos kokybės patirtį.

2. Sąlyginis didelių JavaScript bibliotekų įkėlimas

Problema: Jūsų aplikacijoje yra įmantrus, interaktyvus 3D produkto peržiūros įrankis arba sudėtinga duomenų vizualizacijos biblioteka. Tai puikios funkcijos, tačiau jos nėra būtinos ir sunaudoja šimtus kilobaitų (ar megabaitų) atminties.

Sprendimas: Įkelkite šiuos sunkius, nekritinius modulius tik tada, kai įrenginys turi pakankamai atminties, kad galėtų juos patogiai apdoroti.

Įgyvendinimas su dinaminiu `import()`:

async function initializeProductViewer() {
  const viewerElement = document.getElementById('product-viewer');
  if (!viewerElement) return;

  const hasEnoughMemory = navigator.deviceMemory && navigator.deviceMemory >= 4;

  if (hasEnoughMemory) {
    try {
      const { ProductViewer } = await import('./libs/heavy-3d-viewer.js');
      const viewer = new ProductViewer(viewerElement);
      viewer.render();
    } catch (error) {
      console.error('Failed to load 3D viewer:', error);
      // Rodyti atsarginį statinį paveikslėlį
      viewerElement.innerHTML = '<img src="/images/product-fallback.jpg" alt="Product image">';
    }
  } else {
    // Mažai atminties turinčiuose įrenginiuose tiesiog rodyti statinį paveikslėlį nuo pat pradžių.
    console.log('Low memory detected. Skipping 3D viewer.');
    viewerElement.innerHTML = '<img src="/images/product-fallback.jpg" alt="Product image">';
  }
}

initializeProductViewer();

Šis laipsniško gerinimo modelis yra naudingas visiems. Aukščiausios klasės įrenginių naudotojai gauna turtingą funkciją, o žemesnės klasės įrenginių naudotojai – greitą, funkcionalų puslapį be didelio atsisiuntimo ir atminties apkrovos.

3. Animacijų ir efektų sudėtingumo reguliavimas

Problema: Sudėtingos CSS animacijos, dalelių efektai ir permatomi sluoksniai gali atrodyti nuostabiai, tačiau jie reikalauja, kad naršyklė sukurtų daugybę kompozitoriaus sluoksnių, kurie sunaudoja daug atminties. Mažos galios įrenginiuose tai sukelia trūkčiojimą ir strigimą.

Sprendimas: Naudokite Įrenginio atminties API, kad sumažintumėte arba išjungtumėte neesmines animacijas.

Įgyvendinimas naudojant CSS klasę:

Pirmiausia, pridėkite klasę prie `` arba `` elemento, atsižvelgiant į atminties patikrinimą.

// Paleiskite šį scenarijų anksti įkeliant puslapį
if (navigator.deviceMemory && navigator.deviceMemory < 1) {
  document.documentElement.classList.add('low-memory');
}

Dabar, galite naudoti šią klasę savo CSS, kad selektyviai išjungtumėte arba supaprastintumėte animacijas:

/* Numatytasis, graži animacija */
.animated-card {
  transition: transform 0.5s ease-in-out, box-shadow 0.5s ease;
}

.animated-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Paprastesnė versija mažai atminties turintiems įrenginiams */
.low-memory .animated-card:hover {
  transform: translateY(-2px); /* Daug paprastesnė transformacija */
  box-shadow: none; /* Išjungti brangų box-shadow */
}

/* Arba visiškai išjungti kitus sunkius efektus */
.low-memory .particle-background {
  display: none;
}

4. „Lite“ aplikacijos versijos teikimas

Problema: Kai kurioms sudėtingoms vieno puslapio aplikacijoms nedidelių pakeitimų nepakanka. Pati pagrindinė architektūra – su jos atmintyje laikomomis duomenų saugyklomis, virtualiu DOM ir plačiu komponentų medžiu – yra per sunki mažos galios įrenginiams.

Sprendimas: Pasisemkite įkvėpimo iš tokių kompanijų kaip Facebook ir Google, kurios siūlo „Lite“ savo programėlių versijas. Galite naudoti Įrenginio atminties API kaip signalą pateikti iš esmės paprastesnę savo aplikacijos versiją.

Įgyvendinimas:

Tai galėtų būti patikrinimas pačioje jūsų aplikacijos paleidimo proceso pradžioje. Tai pažangi technika, reikalaujanti turėti dvi atskiras jūsų programos versijas (builds).

const MEMORY_THRESHOLD_FOR_LITE_APP = 1; // 1 GB

function bootstrapApp() {
  const isLowMemory = navigator.deviceMemory && navigator.deviceMemory < MEMORY_THRESHOLD_FOR_LITE_APP;
  
  if (isLowMemory && window.location.pathname !== '/lite/') {
    // Nukreipti į „lite“ versiją
    window.location.href = '/lite/';
  } else {
    // Įkelti pilną aplikaciją
    import('./main-app.js');
  }
}

bootstrapApp();

„Lite“ versija galėtų būti serveryje atvaizduojama aplikacija su minimaliu kliento pusės JavaScript, sutelkiant dėmesį tik į pagrindines funkcijas.

Ne tik `if` sąlygos: vieningo našumo profilio kūrimas

Pasikliauti vienu signalu yra rizikinga. Įrenginys gali turėti daug RAM, bet būti prijungtas prie labai lėto tinklo. Patikimesnis požiūris yra derinti Įrenginio atminties API su kitais adaptyviais signalais, tokiais kaip Tinklo informacijos API (`navigator.connection`) ir procesoriaus branduolių skaičiumi (`navigator.hardwareConcurrency`).

Galite sukurti vieningą konfigūracijos objektą, kuris padės priimti sprendimus visoje jūsų aplikacijoje.

function getPerformanceProfile() {
  const profile = {
    memory: 'high',
    network: 'fast',
    cpu: 'multi-core',
    saveData: false,
  };

  // Tikrinti atmintį
  if (navigator.deviceMemory) {
    if (navigator.deviceMemory < 2) profile.memory = 'low';
    else if (navigator.deviceMemory < 4) profile.memory = 'medium';
  }

  // Tikrinti tinklą
  if (navigator.connection) {
    profile.saveData = navigator.connection.saveData;
    switch (navigator.connection.effectiveType) {
      case 'slow-2g':
      case '2g':
        profile.network = 'slow';
        break;
      case '3g':
        profile.network = 'medium';
        break;
    }
  }

  // Tikrinti procesorių
  if (navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4) {
    profile.cpu = 'single-core';
  }
  
  return profile;
}

const performanceProfile = getPerformanceProfile();

// Dabar galite priimti labiau niuansuotus sprendimus
if (performanceProfile.memory === 'low' || performanceProfile.network === 'slow') {
  // Įkelti žemos kokybės paveikslėlius
}

if (performanceProfile.cpu === 'single-core' && performanceProfile.memory === 'low') {
  // Išjungti visas neesmines animacijas ir JS
}

Apribojimai, gerosios praktikos ir integracija serveryje

Nors Įrenginio atminties API yra galingas įrankis, jį reikia naudoti apgalvotai.

1. Tai užuomina, o ne garantija

Vertė yra apytikslis bendros sistemos RAM kiekis, o ne šiuo metu laisvos RAM kiekis. Daug atminties turintis įrenginys gali vykdyti daug kitų programų, palikdamas mažai atminties jūsų tinklalapiui. Visada naudokite API laipsniškam gerinimui arba sklandžiam funkcionalumo prastinimui, o ne kritinei logikai, kuri daro prielaidą, kad tam tikras atminties kiekis yra laisvas.

2. Serverio pusės Kliento užuominų (Client Hints) galia

Priimti šiuos sprendimus kliento pusėje yra gerai, bet tai reiškia, kad naudotojas jau atsisiuntė pradinį HTML, CSS ir JS, prieš jums pritaikant turinį. Norint pasiekti išties optimizuotą pirmąjį įkėlimą, galite naudoti Kliento užuominas (Client Hints). Tai leidžia naršyklei siųsti informaciją apie įrenginio galimybes jūsų serveriui su pačia pirmąja HTTP užklausa.

Štai kaip tai veikia:

1. Jūsų serveris siunčia `Accept-CH` antraštę savo atsakyme, pranešdamas naršyklei, kad jį domina `Device-Memory` užuomina.
2. Antraštės pavyzdys: `Accept-CH: Device-Memory, Viewport-Width, DPR`
3. Vėlesnėse užklausose iš tos naršyklės į jūsų serverį, ji įtrauks `Device-Memory` antraštę su atminties verte.
4. Užklausos antraštės pavyzdys: `Device-Memory: 8`

Turėdami šią informaciją serveryje, galite priimti sprendimus dar prieš išsiunčiant pirmąjį atsakymo baitą. Galėtumėte atvaizduoti paprastesnį HTML dokumentą, pridėti nuorodas į mažesnius CSS/JS paketus arba įterpti žemesnės raiškos paveikslėlių URL tiesiai į HTML. Tai yra efektyviausias būdas optimizuoti pradinį puslapio įkėlimą mažos galios įrenginiams.

3. Kaip testuoti savo įgyvendinimą

Jums nereikia turėti skirtingų fizinių įrenginių kolekcijos, kad galėtumėte išbandyti savo atmintį įvertinančias funkcijas. Chrome DevTools leidžia perrašyti šias vertes.

• Atidarykite DevTools (F12 arba Ctrl+Shift+I).
• Atidarykite komandų meniu (Ctrl+Shift+P).
• Įveskite „Show Sensors“ ir paspauskite Enter.
• Kortelėje „Sensors“ galite rasti skyrių, skirtą emuliuoti įvairias Kliento užuominas, nors patį Įrenginio atminties API geriausia testuoti tiesiogiai arba per serverį, kuris registruoja Kliento užuominos antraštę. Tiesioginiam kliento pusės testavimui gali prireikti naudoti naršyklės paleidimo vėliavėles pilnai kontrolei arba pasikliauti įrenginio emuliacija holistiniam testui. Daugeliui paprastesnis būdas yra patikrinti `Device-Memory` antraštės vertę, gautą jūsų serveryje, kai programuojate lokaliai.

Išvada: kurkite su empatija

Front-end įrenginio atminties API yra daugiau nei tik techninis įrankis; tai priemonė kurti empatiškesnes, įtraukesnes ir našesnes žiniatinklio aplikacijas. Pripažindami ir gerbdami mūsų pasaulinės auditorijos techninės įrangos apribojimus, mes peržengiame „vienas dydis tinka visiems“ mentalitetą. Galime suteikti patirtis, kurios yra ne tik funkcionalios, bet ir malonios, nepriklausomai nuo to, ar jos pasiekiamos per aukščiausios klasės kompiuterį, ar per pradinio lygio išmanųjį telefoną.

Pradėkite nuo mažų dalykų. Nustatykite daugiausiai atminties reikalaujančią jūsų aplikacijos dalį – ar tai būtų didelis paveikslėlis, sunki biblioteka, ar sudėtinga animacija. Įgyvendinkite paprastą patikrinimą naudojant `navigator.deviceMemory`. Išmatuokite poveikį. Žengdami šiuos laipsniškus žingsnius, galite sukurti greitesnį, atsparesnį ir svetingesnį žiniatinklį visiems.