Chudák je ukládání do mezipaměti v JavaScriptu

[TL;Dr. verze: používají soubory cookie k ukládání výsledků asynchronní volání; okamžitě vykreslovat výsledky minulých asynchronní volání a poté je ověřit po načtení stránky.]

Pracoval jsem na intranetovém webu SharePoint pro klienta, že funkce, mimo jiné, stylizované sekundární navigace, jejichž možnosti nabídky jsou spravovány prostřednictvím pravidelné staré vlastní seznam.  Myšlenkou je, že klient dostane k ovládání menu "jejich" stránek bez ovlivnění nebo ovlivnění globální navigační uhasit jím.

(je něco neuvěřitelně podvratné o přidání CEWP, který odkazuje na soubor HTML, který načítá některé CSS a JS zásadně změnit téměř vše o webu chování..., ale to je na jiné místo)

Kód pro tento docela jednoduchá:

Bolavé místo tady je, že pokaždé, když někdo udeří jedním z stránek webu, jeho webový prohlížeč je oslovit získat položky ze seznamu.  Jakmile dev je kompletní a testování prokázal věci být stabilní a úplné, Toto volání je zbytečné více než 99% času od menu se mění jen zřídka.  Má také zvláštní vliv UI, které je běžné v tomto odvážném novém světě hyper ajaxy webových stránek – stránka vykreslí a teprve potom menu vykreslit.  Je nervózní a rozptylující podle mého názoru.  A nervozita. Tak, ukládání do mezipaměti. 

Upravil jsem logiku thusly:

  • Vyhledejte soubor cookie v prohlížeči, který obsahuje nabídku, když jsem naposledy četl
    • Pokud nalezen, vykreslení to okamžitě.  Nečekej na stránce na dokončení načítání.  (Musíte se ujistit, že HTML je strategicky umístěn zde, ale to není těžké udělat).
  • Čekat na stránce dokončení načítání a asynchronní volání načítání menu položky ze seznamu pomocí REST nebo lists.asmx nebo co
  • Porovnejte, co mám proti souboru cookie
    • Odpovídá-li, Stop
    • Jinak, pomocí jQuery, dynamicky naplníte parta, pokud <li>je v <ul>
  • Veškeré formátování pomocí CSS
  • Zisk!

Někteří z vás se bude říkat, "Hej! neexistuje žádný skutečný mezipaměti děje protože čtete menu stejně každý jednotlivý čas.”  A máš pravdu – nedám na serveru jakýkoliv druh přestávky.  Ale protože volání asynchronní a se stane po stránce je první plně vykreslí HTML datové, to "cítí" lépe reagovat na uživatele.  Menu vykreslí docela jako stránky kreslí.  Pokud se změna stane menu, uživatel je vystaven nervózní re-kreslit menu, ale jen jednou.

Existuje několik způsobů, jak provést tuto mezipaměť efektivnější a pomohli server ve stejné době:

  • Zavést pravidlo, že "cookie cache" je platná pro minimálně 24 hodin, nebo nějaké jiné časového rámce. Tak dlouho, dokud neexistuje žádný cookie vypršela, pomocí souboru cookie menu snímek a nikdy neuhodil server.

Dobře..., to je vše, které přicházejí na mysl hned teď :). 

Pokud má někdo nějaké chytré nápady zde rád bych znát.

A konečně – tento postup lze použít pro jiné věci.  Tohoto klienta stránka má několik věcí, řízené daty na různých stránkách, Mnozí z nich mění poměrně zřídka (jako jednou za týden nebo jednou za měsíc).  Pokud cílíte na konkrétní oblasti funkcí, vstřícnější UI můžete dát obsah z úložiště místní soubor cookie a vykreslování okamžitě.  Připadá mi to rychleji k uživateli i v případě, že se neukládají na serveru žádné cykly.  Jste může rozhodování o některých podmínkách a spouště rušit platnost mezipaměti místní soubor cookie uložte cykly na server.  To je vše situační a diletantský věci a opravdu nejzábavnější :). 

</Konec>

undefinedPřihlásit se na mém blogu.

Za mnou na Twitter na http://www.twitter.com/pagalvin

Jeden myslel na „Chudák je ukládání do mezipaměti v JavaScriptu

  1. Jonathan Roussel

    Ahoj Paul,

    Pěkné provedení, To je něco, co používáme, ale použili jsme místní úložiště HTML5 API namísto souborů cookie. První jednotka byla, že je třeba ukládat více než soubor cookie může povolit. Další výhodou je, že nezvyšuje náklad, vzhledem, že soubory cookie jsou odesílány a zpět. Z dev hlediska je velmi snadné použití.
    Podpora prohlížečů není dokonalý, ale upřímně řečeno docela dobré, http://caniuse.com/namevalue-storage .

    Jonathan

Zanech odpověď

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *