Cache ind på BBC's Performance Booster

Sep 13, 2025

hvordan

A cached image of the BBC homepage featuring a selection of news headlines

Sidste år under en brugerprøvningssession for BBC News-appen, en af brugerne kom en kommentar, der virkelig har fastgjort med mig. De erklærede: "Jeg kan godt lide at flyde". Jeg tror ikke, at der er et bedre resumé af, hvilke præstationer der betyder for vores brugere. På en hurtig app eller hjemmeside kan brugeren strømme rundt, interagere og engagere sig med indholdet.

Flytende oplevelser er gode for webstedsejere også. En hurtigtflydende oplevelse hjælper brugerne med at nå deres mål, og vi opnår igen vores organisationers mål. Amazon og andre har demonstreret den stærke forbindelse mellem ydeevne og brugeraktivitet: Da ventetiden går ned, går mængden af tid og penge, som brugeren bruger, går op.

Læs mere: Nordvpn Review

Skær afstanden med en cache

Caches oprettes, når en lille mængde noget er gemt tættere på, hvor det er nødvendigt, normalt for at forhindre omarbejdning. For eksempel, hvis jeg spiser Skittles, har jeg tendens til at hælde et par i min hånd og derefter spise derfra. I virkeligheden skaber jeg en cache af Skittles i min hånd, da den er hurtigere at spise dem på den måde end at gå tilbage til pakken.

Dette samme mønster bruges i teknologi. Der er tre caches, vi skal overveje:

Server Caches: Cachelagrede data på serveren, som f.eks. Resultaterne af databaseforespørgsler
Netværk Caches: Caches indbygget i netværket, nogle gange af webstedet operatør (kendt som en omvendt proxy cache), men oftere af internetudbydere eller andre netværksleverandører
Browser Cache: Browseren gemmer filer på brugerens harddisk til genanvendelse af brugeren

Caching kan gøre en stor præstationsforbedring; På BBC har jeg set caching øget ydeevne mere end 20 gange i produktionskoden. Det er også gavnligt for webstedets operatører. Med caching kan flere brugere understøttes af samme hardware. Dette reducerer omkostningerne i hardware pr. Bruger og reducerer derfor webstedets driftsomkostninger.

Design med cachen i tankerne

For at det er effektivt, ønsker vi at bruge cachelagrede data så meget som muligt. For at udvide skittles analogi, hvis jeg vil have en blå kegler, men jeg ikke har nogen blå skittles i min hånd (aka min cache), bliver jeg nødt til at gå tilbage til pakken. Dette er kendt som 'hitrate'. Det er et 'hit', når varen er i cachen og en 'miss', når det ikke er det. Vi ønsker en høj hitrate, så cachen tager det meste af lasten.

En af de enkleste metoder til at øge hitrenten er at reducere variationen. Stretching min kegler analogi lidt, forestil dig, om alle skittler var røde. På den måde ville enhver kegle i min hånd være et cache hit; Jeg ville aldrig nødt til at gå tilbage til pakken. Anvend dette på internettet, hvis vi kan give den samme side til så mange brugere som muligt, bliver cachen mere effektiv, da flere anmodninger vil ramme cachen.

Cache html i kort tid

A 30-second cache of the BBC News homepage displaying regularly updated content — Nyheds hjemmeside bruger en 30-sekunders max-alder cache header for at få indhold foran brugere hurtigt uden for meget belastning

Så det er teorien. Lad os få praktiske. Lad os begynde med at kigge på at cachere anmodningen om HTML. Caching af alle filtyper styres ved hjælp af HTTP-overskrifter. Hovederne er meta data (data om data) sendt fra serveren til browseren og synlig for alle netværkshardware mellem mellem. For at fortælle verden har det tilladelse til at cache vores sider og dele denne cache mellem brugere, vi indstiller følgende overskrift:

Cache-Control: public, max-age=30

Her har vi også indstillet en tidsbegrænsning: Den maksimale mængde tid cachen skal genbruge denne side for i sekunder. For dette eksempel har jeg sat det til 30 sekunder.

Ved at indstille siden til 'Public', vil brugerens browser (og enhver hardware undervejs holde en kopi. Så den første sidebelastning vil fremsætte en anmodning, men alle sidelastninger efter det vil genbruge det oprindelige svar, indtil tidsgrænsen er nået.

Virkningen af netværkshardware undervejs kan være dybtgående. Mange store netværk (f.eks. ISP'er) vil have en cache, der deles mellem brugere. Mobiloperatører bruger også denne teknik tungt - for eksempel til cache og recompress-billeder serveret over 3g. Site-operatører kan også placere en HTTP-cache foran deres service. Dette er det, vi har gjort på BBC.

Cache statiske aktiver i årevis

A longer-term cache of BBC iPlayer displaying content that is updated only periodically — BBC IPlayer Stores statiske aktiver for et år - Ændringer i URL'en sikrer, at brugerne hurtigt ser nye versioner

En teknik, vi bruger meget på BBC, er at behandle statiske aktiver (som billeder, CSS og scripts) anderledes på, hvordan vi behandler sider. Caching HTML-sider for for længe kan resultere i, at brugerne mangler indholdsopdateringer, men vi kan udnytte denne adfærd, når det kommer til statiske aktiver.

På BBC sender vi alle statiske aktiver med en maksimal alder på 31.536.000 sekunder indstillet i cachehovedet. Dette sikrer, at aktiverne er cachelagret i 365 dage. I virkeligheden anmodes aktiver kun en gang. Dette er godt for præstationer, men dårligt for fleksibilitet, da ændringer til det pågældende aktiv vil tage lang tid at komme til brugeren.

For at kunne løse dette, hver gang vi frigiver en ny version af en side, ændrer vi webadressen, hvor aktiverne holdes. Dette trick betyder, at nye ændringer sættes foran brugerne straks, men vi får stadig de samme præstationsfordele.

Endelige ord

Caching For at forbedre webstedets ydeevne vil i øvrigt lavere driftsomkostninger for vores hjemmesider og bevare vores brugerstrøm, hvilket fører til en god brugeroplevelse.

Denne artikel blev oprindeligt offentliggjort i udstedelse 279 af Net, verdens bedst sælgende magasin for webdesignere og udviklere. Købe Udgave 279. eller Abonner på Net. .

Vil du lære andre måder at give dine websteder til en hastighedsforøgelse?

Jason Lengstorf is giving his workshop Modern Front-End Performance Strategies and Techniques at Generate New York from 25 27 April 2018 — Jason Lengstorf giver sine værksted moderne front-end performance strategier og teknikker til generering New York fra 25. 27. april 2018

Jason Lengstorf er en udvikler, designer, forfatter og venlig bjørn. Hans fokus er på effektivitet og ydeevne af mennesker, hold og software. På IBM skaber han processer og systemer til at gøre det rigtige, det nemme ting ™. På alle andre tidspunkter vandrer han jorden på jagt efter nye og bedre snacks.

I hans værksted moderne front-end præstationsstrategier og teknikker på Generer New York fra 25.-27 april 2018 , Jason vil vise deltagere, hvordan man forbedrer opfattede belastningstider - hvor længe det føles som om det tager at indlæse en side - såvel som faktiske belastningstider, der kun bruger front-end-teknikker, herunder:

Skeletet loading mønster
Bedre indlæsning til statiske aktiver
Doven loading.
Service Workers.
Bedre build processer og mere!

Generer New York finder sted fra 25.-27. April 2018. Få din billet nu .

Relaterede artikler:

4 tips til at forbedre din sides ydeevne
7 ekspert tips til negle web ydeevne
3 enkle måder at fremskynde dit websted på

Cache ind på BBC's Performance Booster

Skær afstanden med en cache

Design med cachen i tankerne

Cache html i kort tid

Cache statiske aktiver i årevis

Endelige ord

Vil du lære andre måder at give dine websteder til en hastighedsforøgelse?

hvordan - Mest populære artikler

Sådan forenkler du blend-form oprettelse i Maya

Sådan tilføjes energi til dine livstegninger

ANIMATE SVG med JavaScript

Opret GUD-stråler i V-ray

Kom i gang med Greensock Animation Platform

Opret dynamisk bevægelse i en sammensætning

Lav en komposit i Photoshop

Lav en plakat fra en skabelon i Photoshop

Kategorier