Välimuisti BBC: n suorituskyvyn tehostimessa

Feb 4, 2026
Miten tehdään
A cached image of the BBC homepage featuring a selection of news headlines

Viime vuonna BBC News -sovelluksen käyttäjän testauksen aikana yksi käyttäjistä kommentti, joka on todella jumissa kanssani. He julistivat: "Haluan virrata". En usko, että on parempi yhteenveto siitä, mitä suorituskyky tarkoittaa käyttäjillemme. Nopeassa sovelluksessa tai verkkosivuilla käyttäjä voi virrata, vuorovaikutuksen ja sitoutua sisällön kanssa.

Virtaiset kokemukset ovat myös hyviä sivustojen omistajille. Nopea virtaava kokemus auttaa käyttäjiä saavuttamaan tavoitteensa ja puolestaan ​​saavutamme organisaatiomme tavoitteet. Amazon ja muut ovat osoittaneet vahvan yhteyden suorituskyvyn ja käyttäjän toiminnan välillä: Koska sivut menevät alas, ajan ja rahan määrä, jonka käyttäjä viettää.

Lue lisää: NORDVPN Review

Leikkaa etäisyys välimuistiin

Vieraa luodaan, kun pieni määrä jotain on varastoitu lähempänä, missä se tarvitaan, normaalisti estämään uudelleenkäsittely. Esimerkiksi, jos syödä silmukkaa, olen taivuttaa muutama käsi ja sitten syödä sieltä. Itse asiassa luodaan käärmeta kädessäni, koska se on nopeampi syödä niitä niin kuin palata pakettiin.

Tätä samaa kuviota käytetään teknologiassa. Meidän on tarkasteltava kolmea kättä:

  • Palvelimen välimuistit: palvelimen välimuistissa olevat tiedot, kuten tietokannan kyselyjen tulokset
  • Verkkoyhteydet: verkkoon rakennetut välimuistit, joskus sivuston operaattori (tunnetaan käänteisen välityspalvelimen välimuistina), mutta useimmiten Internet-palveluntarjoajat tai muut verkostoitumisen tarjoajat
  • Selaimen välimuisti: Selain tallentaa tiedostoja käyttäjän kiintolevylle käyttäjän uudelleenkäyttöön

Välimuisti voi tehdä valtavan suorituskyvyn parantamisen; BBC: ssä olen nähnyt välimuistin lisäämiskykyä yli 20 kertaa tuotantokoodissa. Se hyödyttää myös sivuston toimijoita. Cachingilla voidaan tukea useampia käyttäjiä samoilla laitteilla. Tämä vähentää laitteiden kustannuksia käyttäjältä ja vähentää näin ollen verkkosivujen käyttökustannuksia.

Suunnittele välimuistin mielessä

Jotta se olisi tehokas, haluamme käyttää välimuistissa olevia tietoja mahdollisimman paljon. Laajentaa skiittles analogia, jos haluan sinisen skittle, mutta minulla ei ole mitään sinistä skytä kädessäni (aka minun välimuisti), minun täytyy mennä takaisin pakettiin. Tämä tunnetaan nimellä "osuma. Se on "osuma", kun kohde on välimuistissa ja 'miss', kun se ei ole. Haluamme korkean osuman, joten välimuisti ottaa suurimman osan kuormituksesta.

Yksi yksinkertaisimmista menetelmistä osuman nopeuden lisäämiseksi on vähentää vaihtelua. Venyttely minun skylt analogia hieman, kuvitella, jos kaikki skyt olivat punaisia. Näin, kaikki kädessäni skittle olisi välimuisti osuma; En koskaan tarvitse palata pakettiin. Tämän hakeminen verkkoon, jos voimme antaa saman sivun mahdollisimman monelle käyttäjille, välimuisti tulee tehokkaammaksi, koska enemmän pyyntöjä osuu välimuistiin.

Välimuisti HTML lyhyessä ajassa

A 30-second cache of the BBC News homepage displaying regularly updated content

Uutiset kotisivut käyttävät 30 sekunnin max-Age-välimuistin otsikon, jotta saat sisällön käyttäjien edessä nopeasti ilman liikaa kuormaa

Joten se on teoria. Hanki käytännöllinen. Aloitamme tarkastelemalla HTML: n pyyntöä. Kaikkien tiedostotyyppien välimuistia ohjataan HTTP-otsikoilla. Otsikot ovat metatietoja (tietoja tietoja) lähetetään palvelimelta selaimeen ja näkyvät kaikkiin verkkolaitteisiin. Kerro maailmalle luvan välimuistiin sivuillamme ja jakaa välimuistin käyttäjien välillä, asetamme seuraavan otsikon: 

Cache-Control: public, max-age=30

Täällä olemme myös asettaneet aikarajan: Välimuistin enimmäismäärä on käytettävä tätä sivua sekunneissa. Tässä esimerkissä olen asettanut sen 30 sekunniksi.

Asettamalla sivun "yleisölle", käyttäjän selain (ja minkä tahansa laitteen varrella) pitää kopion. Joten ensimmäinen sivukuormitus tekee pyynnön, mutta kaikki sivun kuormat sen jälkeen, kun se uudelleen käyttää alkuperäisen vastauksen, kunnes määräaika on saavutettu.

Verkkolaitteiston vaikutus matkan varrella voi olla syvällinen. Monilla suurilla verkoilla (kuten ISPS: llä) on välimuisti jaettu käyttäjien välillä. Matkapuhelinoperaattorit käyttävät myös tätä tekniikkaa voimakkaasti - esimerkiksi välimuistiin ja rekompress-kuviin, jotka tarjoillaan yli 3G. Sivuston toimijat voivat myös asettaa HTTP-välimuistin palvelunsa edessä. Tätä olemme tehneet BBC: ssä.

Välimuistin staattiset varat

A longer-term cache of BBC iPlayer displaying content that is updated only periodically

BBC IPlayer tallentaa staattiset varat vuodeksi - muutokset URL-osoitteeseen varmistaa, että käyttäjät näkevät nopeasti uusia versioita

Tekniikka, jota käytämme paljon BBC: ssä, on kohdella staattisia varoja (kuten kuvia, CSS ja skriptejä) eri tavalla, miten käsittelemme sivuja. Caching HTML-sivut liian kauan voivat johtaa käyttäjille puuttuvat sisältöpäivitykset, mutta voimme hyödyntää tätä käyttäytymistä staattisten varojen osalta.

BBC: ssä lähetämme kaikki staattiset varat, joiden välimuistin otsikko on asetettu enintään 31 536 000 sekuntia. Tämä varmistaa, että varat on välimuistiin 365 päivää. Vastaavasti varauksia pyydetään vain kerran. Tämä on hyvä suorituskyvyn, mutta huono joustavuuteen muutoksina, kun omaisuuserä kestää kauan päästäksesi käyttäjälle.

Jotta voit työskennellä tämän, aina kun vapautamme uuden sivun version, muutamme URL-osoitteen, jossa varat säilytetään. Tämä temppu tarkoittaa, että käyttäjien edessä on uusia muutoksia, mutta meillä on vielä samat suorituskykyetuudet.

Lopulliset sanat

Varaus verkkosivujen suorituskyvyn parantamiseksi vuorotellen verkkosivustoillemme alhaisemmat käyttökustannukset ja säilyttävät käyttäjien virtauksen, mikä johtaa suurelle käyttökokemukselle.

Tämä artikkeli julkaistiin alun perin julkaisussa 279 Net, maailman parhaiten myytävänä lehden web-suunnittelijoiden ja kehittäjien osalta. Ostaa Julkaisu 279 tai Tilaa Net .

Haluatko oppia muita tapoja antaa sivustosi nopeutta?

Jason Lengstorf is giving his workshop Modern Front-End Performance Strategies and Techniques at Generate New York from 25 27 April 2018

Jason Lengstorf antaa työpajan nykyaikaiset etupään suorituskyvyn strategioita ja tekniikoita New Yorkissa 25 27. huhtikuuta 2018

Jason Lengstorf on kehittäjä, suunnittelija, kirjailija ja ystävällinen karhu. Hänen painopiste on ihmisten, tiimien ja ohjelmistojen tehokkuutta ja suorituskykyä. IBM: ssä hän luo prosesseja ja järjestelmiä, jotta oikea asia on helppo asia ™. Kaikissa muina aikoina hän vaeltaa maan etsimään uusia ja parempia välipaloja.

Hänen työpajansa modernissa etupään suorituskyvyn strategiat ja tekniikat Luo New York 25.-27.4.2018 , Jason näyttää osallistujat, kuinka parantaa koettuja kuorma-aikoja - kuinka kauan se tuntuu lataamaan sivun lataamiseen - sekä todelliset kuormitusajat käyttämällä vain etupääntekniikoita

  • Luuranko kuormituskuvio
  • Parempi kuormitus staattisista varoista
  • Laiska kuormaus
  • Palvelualan työntekijät
  • Parempi rakentaa prosessit ja paljon muuta!

Luo New York järjestetään 25.-27. Huhtikuuta 2018. Hanki lippu nyt .

Aiheeseen liittyvät artikkelit:

  • 4 vinkkejä sivun suorituskyvyn parantamiseen
  • 7 Asiantuntijavihjeet Web-suorituskyvyn naulata
  • 3 Yksinkertainen tapa nopeuttaa sivustosi

Miten tehdään - Suosituimmat artikkelit

Pysäytä robotit Google ReCAPTCHA: lla

Miten tehdään Feb 4, 2026

(Kuva luotto: tulevaisuus) Pidä robotteja aina on numero peli - valitettavasti helppokäyttöisten koneiden oppimisk..

Lisää monikielinen tuki kulmiksi

Miten tehdään Feb 4, 2026

Tässä opetusohjelmassa aiomme viedä sinut prosessin tekemiseen, jotta sovelluksesi on saatavilla ja käyttäjäystävällinen ..

Lisää digitaaliset värit lyijykynälle

Miten tehdään Feb 4, 2026

Napsauta kuvaa nähdäksesi sen täysikokoiseksi Olen suuri perinteisen median fani, mut..

Luo elävän digitaalisen ihmisen

Miten tehdään Feb 4, 2026

Saatat tietää Kuinka vetää ihmisiä , mutta luodaan digitaalinen muotokuva, joka on erottamaton valokuvasta - ..

Digitaalisten varojen luominen

Miten tehdään Feb 4, 2026

Digitaalisen käytön varojen valmistelu on keskeinen tehtävä Juniorsuunnittelijat Tänään - ja erillinen ..

Luo digitaalinen etch a sketch

Miten tehdään Feb 4, 2026

Tässä opetusohjelmassa otetaan mekaaninen piirustus lelu etsimään luonnoksen inspiraationa ja pyrkimys toteuttaa nämä omina..

Kuinka luoda kaunis vesiväri maisema maalaus

Miten tehdään Feb 4, 2026

Kaivos on melko impressionistinen tyyli akvarelli maalaustekniikka , jossa yksityiskohdat ovat vähemmän tärkeit..

Luo vuorovaikutteisia kaavioita Ionic 2

Miten tehdään Feb 4, 2026

Kun työskentelet pienessä tiimissä, se on vaikea kirjoittaa ja ylläpitää erillistä koodia Android, iOS ja Windows. Siellä..

Luokat