Szegény ember meg gyorsítótár-JavaScript

[TL;DR változat: aszinkron hívások eredményének tárolására cookie-k segítségével; Render korábbi aszinkron hívás eredményét azonnal, és akkor ellenőrzi őket után az oldal teher.]

Már dolgozik a SharePoint intranetes hely egy ügyfél amit jellegét meghatározza, egyebek, stilizált másodlagos navigációs, amelynek menüpontok kezelt keresztül rendszeres régi egyéni listát.  Az ötlet az, hogy az ügyfél kap, hogy "saját" webhely menü nem érintő, vagy befolyásolják a globális navigációs tesz ki.

(van valami hihetetlenül felforgató, egy CEWP, amit váltó-hoz egy HTML-fájlt, amely betölti néhány CSS és JS, hogy alapjaiban változtatja meg egy webhely viselkedése... szinte mindent, de ez egy másik post hozzáadásával kapcsolatban)

A kód részére ez szép egyszerű:

  • Várni a lap betöltése befejezni, és csinál egy hív-hoz teher megjelöl menüpontok segítségével a többi vagy lists.asmx, vagy bármi listájából aszinkron
  • Segítségével jQuery, dinamikusan feltöltése egy csomó, ha <Li>belül a szülő meg <UL> (Lásd Christian Pinder itt ez tecnnique egyszerű magyarázata)
  • Tenni, a formázás CSS segítségével
  • Profit!

A herpesz spot itt az, hogy minden alkalommal, amikor valaki eléri az egyik a telek oldalak, hogy a felhasználó webböngésző elérése, kap elemek a listában.  Egyszer befejeződött a dev és vizsgálat bizonyította a dolgokat, hogy stabil, és teljes, ezt a felhívást a felesleges több mint 99% az idő, mivel az étlap csak ritkán változik.  Ez is birtokol egy furcsa UI hatással, ami gyakran a szép új világban hyper ajaxy webhelyek – az oldal, és csak akkor nem jeleníti meg a menüben.  Az ideges és zavaró az én véleményem.  És ideges. Így, cache-t. 

Módosítottam a logika imigyen:

  • Keres egy süti a böngésző, hogy utoljára olvasni, ez a menü tartalmazza
    • Ha talált, hogy azonnal tegyék.  Ne várjon az oldal betöltésekor.  (Sírnod kell győződj meg a HTML stratégiailag elhelyezett itt, de ez nem nehéz megtenni).
  • Várni a lap betöltése befejezni, és csinál egy hív-hoz teher megjelöl menüpontok segítségével a többi vagy lists.asmx, vagy bármi listájából aszinkron
  • Hasonlítsa össze, mit kapott, szemben a cookie-k
    • Ha ez megegyezik, állj
    • Egyébként, segítségével jQuery, dinamikusan feltöltése egy csomó, ha <Li>meg az a <UL>
  • Tenni, a formázás CSS segítségével
  • Profit!

Néhányan azt fogják mondani, "Hé! van nem igazi cache folyik itt óta olvasod a menü egyébként minden egyes alkalommal.”  És igazad van,-nem adom, a szerver bármilyen típusú szünet.  De azért, mert a hívás aszinkron és történik után az oldal kezdeti HTML tartalom teljesen viszonoz, "érzés" jobban reagál, hogy a felhasználó.  A menü szép teszi, mint az oldal felhívja.  Ha a menüben az történik, hogy a változás, a felhasználó van kitéve egy ideges újra felhívni a menü, de csak ekkor, egy alkalommal.

Vannak néhány ways-hoz ez gyorsítótárazás hatékonyabbá tenni és segíteni a kiszolgáló egy időben:

  • Betesz egy szabály, hogy a "cookie-cache" érvényes minimum 24 órán vagy néhány más időkeret. Mindaddig, amíg van nem lejárt süti, használja a cookie-k menü pillanatképet, és soha nem hit a szerver.

Hát... ennyi jutott eszembe most :). 

Ha akárki birtokol akármi okos ötleteket itt szeretném tudni, hogy őket.

És végül – ezt a technikát lehet használni más dolgok.  Ez az ügyfél oldal számos adat-vezérelt dolog a különböző oldalak, Sokan közülük viszonylag ritkán változó (mint hetente vagy havonta egyszer).  Ha adott területen a funkcionalitás cél, egy rugalmasabb felhasználói Felületet ad húzza a tartalmat a helyi cookie boltból, visszaadás azonnal.  Érzés gyorsabb, hogy a felhasználó még akkor is, ha nem menti a kiszolgálón bármely ciklusok.  Ön lehet mentse a server ciklusok azzal a bizonyos feltételek és kiváltó, hogy érvényteleníti a helyi cookie-cache.  Ez minden szituációs és artsy cucc, és tényleg a legnagyobb élmény :). 

</vége>

undefinedSubscribe to my blog.

Kövesse nekem Twitter http://www.twitter.com/pagalvin

One thought on „Szegény ember meg gyorsítótár-JavaScript

  1. Jonathan Roussel

    Szia Paul,

    Szép végrehajtása, Ez valami használjuk, de a HTML5 helyi tároló API helyett a cookie-k. Az első meghajtó volt, hogy mi szükség van több, mint a cookie-k lehetővé teszik. De előnye az, hogy ez nem növeli a hasznos teher, mivel a cookie-kat küldenek oda-vissza. A dev-a ' igazi könnyű-hoz használ.
    Böngésző támogat nem tökéletes, de tényleg nagyon jó, http://caniuse.com/namevalue-storage .

    Jonathan

    Válasz

hagyj válaszüzenetet

Az e-mail címed nem kerül nyilvánosságra. Kötelező kitölteni *