Cum funcționează memoria cache a browserului?

Cache-ul browserului este un mecanism folosit de browsere pentru a stoca local resursele paginii web. Acest lucru adaugă câștiguri de performanță, minimizează consumul de lățime de bandă și, în general, creează o experiență mai rapidă. În acest articol, explicăm cum funcționează memorarea în cache a browserului și cum să o implementăm pe site-ul dvs. web.

Ce este memoria cache a browserului?

Cache-ul este o componentă software sau hardware care este utilizată pentru a stoca temporar valori pentru un acces viitor mai rapid. Cache -ul browserului este o bază de date mică de fișiere care conține resurse descărcate ale paginii web, cum ar fi imagini, videoclipuri, CSS, Javascript și așa mai departe. Ideea de bază din spatele acesteia este următoarea:

Browserul solicită conținut de la serverul web. Dacă conținutul nu se află în memoria cache a browserului, atunci acesta este preluat direct de pe serverul web. Dacă conținutul a fost memorat anterior în cache, browserul ocolește serverul și încarcă conținutul direct din memoria cache a acestuia.

Conținutul este considerat a fi învechit în funcție de faptul dacă conținutul din cache a expirat sau nu. Fresh, pe de altă parte, înseamnă că conținutul nu a depășit data de expirare și poate fi servit direct din memoria cache a browserului fără a implica serverul.

Termenul de validare se referă la conținutul care trebuie verificat cu cea mai recentă versiune pe care o deține serverul. Pe scurt, pentru a determina dacă conținutul este învechit sau nu. Invalidarea are loc atunci când conținutul a fost eliminat din cache înainte de trecerea datei de expirare. Acest lucru poate fi forțat de server, în cazurile în care conținutul s-a modificat, iar browserul trebuie să aibă cea mai recentă versiune pentru a nu introduce probleme.

Memorarea în cache a browserului poate fi valorificată de dezvoltatorii web și administratorii prin utilizarea unor antete HTTP specifice. Aceste anteturi indică browserului web când să memoreze o resursă în cache, când nu și pentru cât timp. Utilizarea antetelor legate de cache-ul HTTP poate fi adesea frustrantă, deoarece există o suprapunere destul de mare cu anteturile în diferitele reîncarnări ale protocolului HTTP. Adăugați la amestec lucruri precum proxy web ciudat între ele, browsere vechi, politici și implementări conflictuale de stocare în cache (de exemplu, diferite pluginuri WordPress) și poate deveni rapid o durere de cap.

Antetele de stocare în cache a browserului

Setul de reguli care definesc ce poate fi stocat sau nu în cache și pentru cât timp se numește politica de cache. Acest lucru este implementat de proprietarul site-ului web prin utilizarea antetelor de răspuns în cache. Deși acest lucru poate fi realizat în multe moduri diferite, probabil că ar trebui să vă preocupați doar de Cache-control, la început.

Cache-control

Antetul Cache-control a fost introdus în HTTP/1.1 și este considerată cea mai modernă implementare care există. Există mai multe valori diferite pe care le puteți utiliza, în funcție de modul în care doriți să se comporte browserele. Făcându-l destul de versatil. Mai jos este o listă de directive Cache-Control:

• Fără cache
  Instruiește browserul dvs. web să nu se refere imediat la memoria cache, ci să valideze conținutul față de server. Dacă este proaspătă, atunci poate fi servită din cache.
• Fără magazin
  Spune browserului să nu memoreze în cache conținutul în niciun fel. Este folosit mai ales atunci când se ocupă cu date sensibile sau cu date care se modifică frecvent.
• Public
  Marchează conținutul ca public, ceea ce înseamnă că poate fi stocat în cache de browser și de orice părți intermediare (cum ar fi proxy-uri etc.).
• Privat
  Folosit pentru a marca conținutul ca privat, ceea ce înseamnă că poate fi stocat în cache numai de browser, și nu de proxy intermediari și altele. Aceasta se referă de obicei la date referitoare la utilizator.
• Vârsta maximă
  Vârsta maximă reprezintă timpul maxim în secunde în care un conținut poate rămâne în memoria cache a browserului înainte ca clientul să fie necesar să-l revalideze. Spre deosebire de antetul Expires pe care îl vom vizita în curând, max-age definește o valoare relativă în secunde de la momentul în care conținutul a fost stocat în cache, și nu o dată de expirare absolută.
• S-maxaj
  Acest lucru este similar cu vârsta maximă, dar este folosit doar pentru cache-urile intermediare.
• Trebuie revalidat
  Forțează browserul să revalideze conținutul de fiecare dată când are nevoie de el, în loc să îl servească doar direct din memoria cache a browserului.
  Acest lucru este util în cazul în care apare o întrerupere a rețelei.
• Revalidare proxy
  Similar cu revalidarea obligatorie, dar se aplică numai cache-urilor intermediare.
• fără transformare
  Instruiește browserului să nu transforme în niciun fel conținutul primit de la server (de obicei compresie etc.).

Etag

Antetul de răspuns Etag este utilizat pentru a identifica o anumită resursă. De fiecare dată când o anumită resursă se modifică, este generat un nou Etag. În acest fel, lățimea de bandă este salvată, deoarece serverul web nu trebuie să dea un răspuns complet dacă Etag-ul nu s-a schimbat. În consecință, antetul Etag este activat implicit pe Nginx și Apache, iar valorile Etag sunt generate automat, deci nu trebuie să specificați nimic.

Găzduiește-ți site-ul web cu Pressidium

GARANTIE 60 DE ZILE BANI RAPIS

VEZI PLANUL NOSTRU

Expiră

Acesta a fost introdus în HTTP/1.0 și definește o anumită dată în viitor în care conținutul va fi considerat învechit. Este efectiv o dată de „cel mai bine înainte” pentru conținut. De exemplu, Expiră: joi, 25 mai 2017 12:30:00 GMT

Pragma

Acesta este un antet HTTP/1.0 oarecum învechit, care este folosit în mare parte pentru compatibilitatea cu versiunea anterioară. Inserarea Pragma: no-cache va face browserul dvs. să se comporte similar cu Cache-Control: no-cache .

Cum să implementați o politică de stocare în cache pe site-ul dvs. web

Există două moduri de a implementa o politică de stocare în cache pe site-ul dvs. web. Primul este de a defini anteturile de răspuns de cache în configurația serverului web. Al doilea este să o faci direct în PHP. Mai jos sunt exemple ale celor mai populare două servere web, Apache2 și Nginx:

Apache2

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Nginx

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
add_header Cache-Control "public" ;
}

După cum puteți vedea, este destul de simplu. În primul exemplu, folosim directiva FileMatch a apache2 pentru a se potrivi cu un anumit set de tipuri de fișiere (.ico, .pdf, etc) și a le face publice, cu o vârstă maximă de 84600 de secunde. În al doilea, ne potrivim din nou cu anumite tipuri de fișiere folosind directiva de locație a lui nginx și includem o vârstă maximă de 365 de zile. De asemenea, le definim ca „publice” folosind clauza add header.

PHP

Dacă doriți să adăugați antete de răspuns direct la codul dvs., utilizați comanda antet a PHP.

<?php
header("Cache-Control: no-cache");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: max-age= 604800");
?>

Cum se testează pentru a vedea dacă funcționează

Puteți testa cu ușurință pentru a vedea regulile de stocare în cache a browserului, folosind, de exemplu, consola web Firefox sau Instrumentele pentru dezvoltatori Chrome:

1. Faceți clic pe pictograma hamburger din dreapta sus.
2. Selectați Mai multe instrumente > Instrumente pentru dezvoltatori
3. Introduceți adresa URL în bara de adrese și apăsați Enter.

Ar trebui să vedeți o listă de solicitări pe măsură ce se încarcă adresa URL. Selectați o resursă făcând clic pe ea. Inspectați anteturile de răspuns din dreapta și, în special, codul de stare. Tipărește codul HTTP 200, dar indică între paranteze că este din memoria cache.

Aceasta înseamnă că resursa a fost încărcată automat din memoria cache locală, în loc să o solicite de la server.

În cazurile în care aveți o clauză de „revalidare obligatorie” în antetul dvs. Cache-Control, codul de stare va fi 304 (Nemodificat). Aceasta înseamnă că browserul dvs. a revalidat resursa față de server, iar serverul a răspuns că conținutul nu s-a schimbat, astfel încât acesta poate fi servit din memoria cache a browserului.

Continuați să dezactivați memoria cache bifând caseta de selectare Dezactivare cache și apăsând Reîncărcare.

În acest caz, vedeți că codul de stare este 200 fără nicio indicație că a folosit memoria cache. Browserul a solicitat resursa de la serverul web, iar serverul web a răspuns oferind înapoi o copie nouă.

Concluzie

Memorarea în cache a browserului și politicile de stocare în cache pot deveni destul de complicate. Dar începerea experimentării cu Cache-Control, așa cum am demonstrat, este simplă. De cele mai multe ori, implementarea unei politici „generice” de stocare în cache pentru activele statice este suficientă pentru a face diferența în performanța site-ului dvs. Cu toate acestea, adaugă un strat suplimentar de „îngrijorare” peste atât de multe alte lucruri și credem că nu ar trebui să fie așa. Urmăriți-ne la următoarea noastră postare, unde vom prezenta modul în care implementăm memorarea în cache a browserului în Pressidium, care face ca toate aceste îngrijorări să dispară.