Jak działa pamięć podręczna przeglądarki?

Pamięć podręczna przeglądarki to mechanizm używany przez przeglądarki do przechowywania lokalnych zasobów stron internetowych. Zapewnia to wzrost wydajności, minimalizuje zużycie przepustowości i ogólnie zapewnia lepsze wrażenia. W tym artykule wyjaśniamy, jak działa buforowanie przeglądarki i jak wdrożyć je na swojej stronie.

Co to jest pamięć podręczna przeglądarki?

Pamięć podręczna to składnik programowy lub sprzętowy, który służy do tymczasowego przechowywania wartości w celu szybszego dostępu w przyszłości. Pamięć podręczna przeglądarki to niewielka baza danych plików zawierająca pobrane zasoby strony internetowej, takie jak obrazy, filmy, CSS, Javascript i tak dalej. Podstawowa idea, która się za tym kryje, jest następująca:

Przeglądarka żąda niektórych treści z serwera WWW. Jeśli zawartość nie znajduje się w pamięci podręcznej przeglądarki, jest pobierana bezpośrednio z serwera WWW. Jeśli zawartość była wcześniej buforowana, przeglądarka omija serwer i ładuje zawartość bezpośrednio ze swojej pamięci podręcznej.

Treść jest uważana za nieaktualną w zależności od tego, czy zawartość pamięci podręcznej wygasła, czy nie. Z drugiej strony świeży oznacza, że ​​treść nie przekroczyła daty wygaśnięcia i może być udostępniana bezpośrednio z pamięci podręcznej przeglądarki bez angażowania serwera.

Termin walidacja odnosi się do zawartości, którą należy sprawdzić z najnowszą wersją posiadaną przez serwer. Krótko mówiąc, aby ustalić, czy treść jest nieaktualna, czy nie. Unieważnienie występuje, gdy zawartość została usunięta z pamięci podręcznej przed upływem daty wygaśnięcia. Może to być wymuszone przez serwer w przypadku zmiany treści, a przeglądarka musi mieć najnowszą wersję, aby nie stwarzać problemów.

Buforowanie przeglądarki może być wykorzystywane przez twórców stron internetowych i administratorów za pomocą określonych nagłówków HTTP. Te nagłówki informują przeglądarkę internetową, kiedy buforować zasób, a kiedy nie i jak długo. Używanie nagłówków związanych z pamięcią podręczną HTTP może być często frustrujące, ponieważ nagłówki nakładają się na siebie w różnych reinkarnacjach protokołu HTTP. Dodaj do tego różne rzeczy, takie jak dziwny serwer proxy, stare przeglądarki, sprzeczne zasady i implementacje buforowania (na przykład różne wtyczki WordPress), a może to szybko stać się bólem głowy.

Nagłówki pamięci podręcznej przeglądarki

Zbiór reguł definiujących, co może być buforowane, a co nie i jak długo, nazywany jest polityką buforowania. Realizowane jest to przez właściciela strony internetowej za pomocą buforowania nagłówków odpowiedzi. Chociaż można to osiągnąć na wiele różnych sposobów, prawdopodobnie na początku powinieneś zajmować się tylko kontrolą pamięci podręcznej.

Kontrola pamięci podręcznej

Nagłówek Cache-control został wprowadzony w HTTP/1.1 i jest uważany za najnowocześniejszą istniejącą implementację. Istnieje kilka różnych wartości, których możesz użyć, w zależności od tego, jak mają się zachowywać przeglądarki. Dzięki czemu jest dość wszechstronny. Poniżej znajduje się lista dyrektyw Cache-Control:

• Bez pamięci podręcznej
  Instruuje przeglądarkę internetową, aby nie odwoływała się natychmiast do pamięci podręcznej, ale aby zweryfikowała zawartość na serwerze. Jeśli jest świeży, można go podać z pamięci podręcznej.
• Bez sklepu
  Informuje przeglądarkę, aby w żaden sposób nie buforowała zawartości. Jest używany głównie w przypadku danych wrażliwych lub danych, które często się zmieniają.
• Publiczny
  Oznacza treść jako publiczną, co oznacza, że ​​może być buforowana przez przeglądarkę i wszelkie podmioty pośredniczące (takie jak serwery proxy itp.).
• Prywatny
  Służy do oznaczania treści jako prywatnej, co oznacza, że ​​może być buforowana tylko przez przeglądarkę, a nie przez pośredniczące serwery proxy i tym podobne. Zwykle odnosi się to do danych związanych z użytkownikiem.
• Maksymalny wiek
  Max-age reprezentuje maksymalny czas w sekundach, przez jaki zawartość może pozostać w pamięci podręcznej przeglądarki, zanim klient będzie musiał ją ponownie zweryfikować. W przeciwieństwie do nagłówka Expires, który niedługo odwiedzimy, max-age określa względną wartość w sekundach od momentu zbuforowania treści, a nie bezwzględną datę wygaśnięcia.
• S-maxage
  Jest to podobne do max-age, ale jest używane tylko w przypadku pośrednich pamięci podręcznych.
• Konieczna rewalidacja
  Zmusza przeglądarkę do ponownego sprawdzania zawartości za każdym razem, gdy jest potrzebna, zamiast wyświetlać ją bezpośrednio z pamięci podręcznej przeglądarki.
  Jest to przydatne w przypadku przerwy w działaniu sieci.
• Ponowna walidacja proxy
  Podobny do „must-revalidate”, ale dotyczy tylko pośrednich skrytek.
• bez transformacji
  Instruuje przeglądarkę, aby w żaden sposób nie przekształcała treści otrzymanych z serwera (zwykle kompresja itp.).

Etag

Nagłówek odpowiedzi Etag służy do identyfikacji konkretnego zasobu. Za każdym razem, gdy zmienia się określony zasób, generowany jest nowy Etag. W ten sposób oszczędza się przepustowość, ponieważ serwer WWW nie musi dawać pełnej odpowiedzi, jeśli Etag nie uległ zmianie. W związku z tym nagłówek Etag jest domyślnie włączony w Nginx i Apache, a wartości Etag są generowane automatycznie, więc nie musisz niczego określać.

Hostuj swoją stronę internetową z Pressidium

60- DNIOWA GWARANCJA ZWROTU PIENIĘDZY

ZOBACZ NASZE PLANY

Wygasa

Zostało to wprowadzone w HTTP/1.0 i definiuje konkretną datę w przyszłości, w której zawartość zostanie uznana za przestarzałą. W rzeczywistości jest to data „najlepiej spożyć przed” dla treści. Na przykład, wygasa: czw, 25 maja 2017 12:30:00 GMT

Pragma

Jest to nieco przestarzały nagłówek HTTP/1.0, który jest używany głównie w celu zapewnienia kompatybilności wstecznej. Wstawienie Pragma: no-cache sprawi, że Twoja przeglądarka będzie zachowywać się podobnie do Cache-Control: no-cache .

Jak wdrożyć politykę buforowania na swojej stronie?

Istnieją dwa sposoby na zaimplementowanie zasad buforowania w witrynie. Pierwszym z nich jest zdefiniowanie nagłówków odpowiedzi w pamięci podręcznej w konfiguracji serwera WWW. Drugim jest zrobienie tego bezpośrednio w PHP. Poniżej znajdują się przykłady dwóch najpopularniejszych serwerów WWW, 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" ;
}

Jak widać, jest to całkiem proste. W pierwszym przykładzie używamy dyrektywy FileMatch Apache2, aby dopasować określony zestaw typów plików (.ico, .pdf, itp.) i upublicznić je z maksymalnym wiekiem 84600 sekund. W drugim ponownie dopasowujemy określone typy plików za pomocą dyrektywy lokalizacji nginx i uwzględniamy maksymalny wiek 365 dni. Definiujemy je również jako „publiczne” za pomocą klauzuli add header.

PHP

Jeśli chcesz dodać nagłówki odpowiedzi bezpośrednio do kodu, użyj polecenia nagłówka PHP.

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

Jak przetestować, aby sprawdzić, czy działa?

Możesz łatwo przetestować, aby zobaczyć reguły buforowania przeglądarki, korzystając na przykład z konsoli internetowej Firefox lub Narzędzi programistycznych Chrome:

1. Kliknij ikonę hamburgera w prawym górnym rogu.
2. Wybierz Więcej narzędzi > Narzędzia programistyczne
3. Wprowadź swój adres URL w pasku adresu i naciśnij Enter.

Powinieneś zobaczyć listę żądań podczas ładowania adresu URL. Wybierz zasób, klikając go. Sprawdź nagłówki odpowiedzi po prawej stronie, aw szczególności kod stanu. Drukuje kod HTTP 200, ale wskazuje w nawiasach, że pochodzi z pamięci podręcznej.

Oznacza to, że zasób został automatycznie załadowany z lokalnego magazynu pamięci podręcznej, zamiast żądania go z serwera.

W przypadkach, w których masz klauzulę „must-revalidate” w nagłówku Cache-Control, kod stanu będzie miał postać 304 (niezmodyfikowany). Oznacza to, że Twoja przeglądarka ponownie zweryfikowała zasób względem serwera, a serwer odpowiedział, że zawartość nie uległa zmianie, dlatego może być udostępniana z pamięci podręcznej przeglądarki.

Kontynuuj wyłączanie pamięci podręcznej, zaznaczając pole wyboru Wyłącz pamięć podręczną i naciskając Odśwież.

W tym przypadku zobaczysz, że kod stanu to 200 bez żadnej wskazówki, że użył pamięci podręcznej. Przeglądarka zażądała zasobu z serwera WWW, a serwer odpowiedział, udostępniając z powrotem nową kopię.

Wniosek

Buforowanie przeglądarki i zasady buforowania mogą stać się dość skomplikowane. Ale rozpoczęcie eksperymentowania z kontrolą pamięci podręcznej, jak wykazaliśmy, jest proste. W większości przypadków wdrożenie „ogólnej” polityki buforowania dla zasobów statycznych wystarczy, aby wpłynąć na wydajność Twojej witryny. Dodaje jednak dodatkową warstwę „zmartwień” do wielu innych rzeczy i uważamy, że tak nie powinno być. Śledź nas w następnym poście, w którym pokażemy, jak wdrażamy buforowanie przeglądarki w Pressidium, dzięki czemu wszystkie zmartwienia znikną.