Vaene mees on Caching JavaScript

[TL;DR versioon: kasutame küpsiseid, et salvestada tulemused async kõned; muuta tulemused viimase async kõned kohe ja seejärel Kinnita neid pärast lehe laadimist.]

Olen töötanud SharePointi intranet saidil kliendile, et funktsioonid, muu hulgas, stiliseeritud teisese navigation kelle menüüsuvandite hallatakse kaudu regulaarselt vana kohandatud loendi.  Mõte on selles, et klient saab kontrollida "oma" saidi menüü mõjutamata või mõjutavad globaalset navigatsioonisatelliitide poolt välja pandud.

(seal on midagi uskumatult õõnestava lisamine CEWP, mis viitab HTML-fail, mis laadib mõned CSS ja JS oluliselt muuta peaaegu kõike saidi käitumine... kuid see on teisele ametikohale)

See päris lihtne kood:

Valus kohapeal siin on see, et iga kord, kui keegi lööb selle saidi leheküljed, See kasutaja veebilehitseja on jõudmas saada üksuste loendist.  Kui dev on lõpetatud ja testimine on osutunud asjad olema stabiilne ja täielik, selle kutse ei ole vajalik enam kui 99% ajast alates menüü harva muutub.  On ka imelik UI mõjutada, mis on levinud see vapper uus maailm hüper-ajaxy veebisaitide-lehe renderdamist ja alles seejärel menüü Muuda.  On närviline ja häiriv, minu arvates.  Ja närviline. Nii, vahemällu. 

Ma muutmine loogika thusly:

  • Otsige küpsise brauseri, mis sisaldab menüüd kui viimati lugesin
    • Kui leiti, Muuda kohe.  Ärge oodake lõpuni laadimise lehele.  (Sa pead veenduge, et teie HTML strateegiliselt paigutatud siin, kuid see ei ole raske teha).
  • Oodake, kuni lehe lõpuni peale ja tee async helistada korralikuks menüü üksuste loendi, kasutades ülejäänud või lists.asmx või mis iganes
  • Võrdle, mida sain vastu küpsis
    • Kui see sobib, Stopp
    • Muidu, kasutades jQuery, dünaamiliselt asustada hunnik kui <Li>'s in a <UL>
  • Kasutage kogu vormingu CSS
  • Kasum!

Mõned teist lähevad öelda, "kuule! ei mingit tõelist vahemällu siin toimub kuna sa loed menüü niikuinii iga kord.”  Ja sul on õigus-ma olen andes server murda tahes.  Kuid kuna kõne on asünkroonne ja juhtub pärast esialgse ettepaneku lehe HTML lasti täielikult muudab, "tundub" kiiremini reageerima kasutaja.  Menüü muudab päris palju kui lehe viiki.  Kui menüü muutus, Kasutaja läbib närviline uuesti teha menüü, kuid ainult üks kord.

Seal on mõned viisid, et muuta see vahemälu tõhusamaks ning aidata server samal ajal:

  • Pane vähemalt kehtiva "küpsiste vahemälu" reeglit 24 tunni või mõni muu ajakava. Kui ei ole aegunud küpsis, Kasutage seda küpsist menüüd pildistamise ja kunagi tabanud server.

Noh... see on kõik, mis kohe pähe tulevad :). 

Kui kellelgi on kõik targad ideed siin oleks tore teada nende.

Ja lõpuks – seda tehnikat kasutada muid asju.  Selle kliendi leheküljel on mitmeid asju andmepõhiseid erinevatel lehekülgedel, Paljud neist muutuvad suhteliselt harva (näiteks kord nädalas või kord kuus).  Kui sihite teatud valdkondades funktsioone, annad paindlikumaks UI tõmmates sisu kohalikku küpsis salvestada ja muuta kohe.  Ta tunneb kiiremini kasutajale, isegi kui sa oled kokkuhoid, server kõik tsüklit.  Te Saate salvestada serveri tsüklit otsustades mõned tingimused ja vallandab tunnistab kehtetuks kohalik küpsiste vahemälu.  Ongi kõik olukorrast ja esteetilist asjad ja tõesti kõige toredam :). 

</lõpp>

undefinedTelli minu blogi.

Järgi mind vidistama kell http://www.twitter.com/pagalvin

One thought on "Vaene mees on Caching JavaScript

  1. Jonathan Roussel

    Tere Paul,

    Kena rakendamine, See on midagi, mida me kasutame, kuid kasutasime HTML5 kohaliku ladustamine API küpsiste asemel. Esimese sõidu oli meil vaja salvestada rohkem kui küpsis võimaldab. Kuid lisakasu on, et see ei suurenda lõhkelaengu, küpsised on saatnud tagasi. Dev seisukohast on väga lihtne kasutada.
    Brauserite ei ole täiuslik, kuid ausalt öeldes üsna hea, http://caniuse.com/namevalue-storage .

    Jonathan

    Vastus

Jäta vastus

Teie e-posti aadressi ei avaldata. Kohustuslikud väljad on tähistatud *