Introduktion till HTTP-caching
Jag är säker på att du har lagt märke till att det tar lite tid att ladda när du öppnar en webbplats för första gången. Men när du öppnar den igen efter en viss tid, löser webbplatsen mycket snabbare. Föreställ dig om en webbplats tog samma tid att ladda varje gång, hur långsam surfning skulle känna. Det här är allt tack vare en fin idé som heter HTTP Caching. Låt oss ta en titt på vad det är, hur det fungerar och hur det används för att göra surfning till en snabbare upplevelse.
Vad är HTTP-caching?
HTTP Caching är idén att lagra vanliga eller ofta använda data på ett ställe som är snabb åtkomst till. Med detta finns det en mycket god chans att de mest nödvändiga data kan nås mycket snabbare eftersom datorn inte behöver nå för långt för att få den.
När det gäller webbläsning beaktas cachning när din webbläsare som Chrome lagrar en kopia av en webbplats eller webbapp på den lokala lagringsplatsen. När en webbplats har cachelagts behöver inte en webbläsare ladda ner all data från servern, vilket gör att surfningen blir mycket snabbare.
Till exempel, när en CSS-fil på en webbplats laddas ner behöver en webbläsare inte ladda ner den för varje sida i sessionen. Detsamma kan sägas för många JavaScript-filer, bilder (som webbplatsens logotyp och ikoner för sociala medier) och till och med en del dynamiskt innehåll. Cachning aktiveras med hjälp av Cache-rubriker.
Cache-rubriker i HTTP
HTTP Caching har två huvudcachehuvuden, den första kallas "Cache-Control" och den andra kallas "Expire". Låt oss ta en titt på båda:
Cache-Control
Du kan betrakta Cache-Control som en switch för att slå på cachen i användarbläddraren. När denna rubrik har lagts till möjliggör den cache för alla webbläsare som stöds. Om denna rubrik inte finns, kommer ingen webbläsare att behålla en cache för webbsidans innehåll även om den stöder cachning.
Cache-kontrollen har två typer av sekretessinställningar, den första är offentlig och den andra är privat.
För offentligt kan resurserna cachelagras av valfri mellanliggande proxy, till exempel Content Delivery Networks (CDN).
En Cache-Control-rubrik med privat svar kommer att berätta för webbläsaren att cachningen endast kommer att göras för en enda användare och inte för någon mellanliggande proxy.
Värdet "max-age" i Cache-Control-huvudet anger vilken tid innehållet ska vara cache på. Den här tiden är i sekunder.
Cache-Control:public, max-age=31536000
Utgår
Utgångens rubrik används när Cache-Control finns i koden. Detta är en enkel HTTP Cache-rubrik som ställer in ett datum från vilket valfri cache-resurs anses ogiltig. När cachen har löpt ut och användaren laddar webbplatsen kommer en webbläsare helt enkelt att begära allt innehåll på sidan igen.
Villkorliga förfrågningar
Ovan diskuterade rubriker helt enkelt berätta för webbläsaren när data ska hämtas från webbservern. Villkorliga begäranden å andra sidan berätta för webbläsaren hur man hämtar den. Villkorliga förfrågningar berättar för en webbläsare hur den kan fråga servern om kopian av data i cachen är föråldrad.
I den här processen skickar webbläsaren vissa data om resurser som den har cache-cache i sitt minne och efter att ha läst den här informationen avgör servern om data är föråldrade eller inte.
Tidsbaserad begäran
I tidsbaserade förfrågningar kontrolleras det om den begärda resursen har ändrats på servern eller inte. Om den cachade kopian i webbläsaren är den senaste kopian kommer servern att returnera kod 304.
För att ställa villkorlig begäran på tidsbasis kan du använda "Senast modifierad" i svarshuvudet.
Cache-Control:public, max-age=25998579
Last-Modified: Fri, 08 Jul 2018 15:25:00 GMT
Innehållsbaserade
I innehållsbaserade förfrågningar kontrolleras MD5 Hash (eller något annat genomförbart alternativ) för både serverkopiering och cachekopia. Detta berättar om uppgifterna är desamma eller inte, om uppgifterna är annorlunda kommer MD5-kontrollsumman inte att matcha och servern skickar en ny kopia av resurser.
Detta görs via "ETag" i rubriken. Värdet på det är att smälta resurserna.
Cache-Control:public, max-age=25998579
ETag: "496d7131f15f0fff99ed5aae”
Synlighet
Nästan alla moderna webbläsare har några utvecklingsrelaterade verktyg som låter dig kontrollera resurser, källkod och andra aspekter på en webbsida. Bland dem kan du hitta ett verktyg för att se rubriker som returneras av alla applikationer.
På Google Chrome, för att se dessa rubriker, kan du högerklicka på valfritt tomt område på en webbsida och klicka på "Inspektera" eller trycka på CTRL + SHIFT + I för att öppna DevTools. I det här verktyget klickar du på fliken Nätverk och trycker på CRTL + R för att ladda om för att se alla sidhuvuden.
Använd fall i HTTP-caching
Nedan följer några användningsfall av HTTP-cache som är följande:
För statiska tillgångar
För statiska tillgångar på en sida, t.ex. bilder, JS-filer och eventuella CSS-filer, kan du välja att cachera innehållet aggressivt. Att inte ladda dessa filer kommer att resultera i imponerande prestandaförbättringar. För detta användningsfall, gå till Cache-Control Header med max-åldervärdet mer än en månad eller till och med ett år.
Cache-Control:public; max-age=31536000
För dynamiska innehåll
Vid dynamiskt innehåll på en sida måste du tänka själv för vilka filer som webbläsaren ska cache och hur länge. Om innehållet ändras ofta måste du se till att den tidsperiod du väljer för cachning inte kommer att leda till några problem för användaren.
Cachning av privat innehåll
Som vi diskuterade i avsnittet Cache-Control, om innehållet på sidan är privat, kan du förhindra att det cachas av mellanliggande proxyer som CDN genom att lägga till “Cache-Control: private” i rubriken.
Ett annat säkrare tillvägagångssätt är att inte cachera något privat innehåll alls.
Implementera HTTP-cache
Nu när du vet vad HTTP Caching är och hur det fungerar, låt oss titta på hur du kan implementera det på din webbplats. Implementering av HTTP-cache är lite annorlunda för olika servertyper. Låt oss i vårt fall ta en titt på implementering av cache via .htaccess-filen.
För att aktivera cachning på plats kan du lägga till rubriker i .htaccess-filen på din server till exempel:
FilesMatch "\.(ico|pdf|flv|jpg.webp|jpeg.webp|png|gif|js|css|swf)$"
Header set Cache-Control "max-age=31536000, public"
/FilesMatch
Ovanstående cachar alla till, pdf, flv, jpg.webp och andra nämnda format som nämns i "File Match" under ett år.
Slutsats
HTTP-caching är ett av de viktigaste knepen som gör att du surfar på din webbplats till en snabbare upplevelse för dina besökare och nu när du kan se hur det fungerar kan du implementera det på dina webbplatser och webbappar för att göra dem snabbare för dina användare och för att spara serverns bandbredd.
Rekommenderade artiklar
Detta har varit en guide till HTTP-caching. Här diskuterade vi implementering, Villkorliga begäranden, cache-rubrik och Använd fall av HTTP. Du kan också gå igenom våra andra föreslagna artiklar för att lära dig mer -
- Lär dig vad som är HTML
- Hur installerar Github?
- Vad är MapReduce i Hadoop?
- Nybörjarguide för nodkommandon
- HTTP-kakor | säkerhet