Caching Dyn tlawd yn JavaScript

[TL;Fersiwn DR: defnyddio briwsion i storio canlyniadau'r async galwadau; rendr canlyniadau'r gorffennol async galwadau ar unwaith ac wedyn eu dilysu ar ôl llwytho tudalen.]

Dwi wedi bod yn gweithio ar safle mewnrwyd SharePoint i cleient y nodweddion, ymhlith pethau eraill, mordwyo uwchradd stylized eu dewisiadau dewislen yn cael eu rheoli drwy'r rhestr bersonol hen rheolaidd.  Y syniad yw bod y cleient yn cael i reoli ddewislen "eu" safle heb sy'n effeithio ar neu'n cael eu heffeithio gan y mordwyo byd-eang a roddir allan gan ei.

(Mae rhywbeth hynod o thwyllodrus am ychwanegu CEWP sy'n pwyntio at ffeil HTML yn y llwythi rhai CSS a JS i bron popeth am ymddygiad y safle … yn ei newid yn sylfaenol ond mae hynny ar gyfer swydd arall)

Y Cod ar gyfer hwn eithaf syml:

  • Aros am y dudalen gorffen llwytho a gwneud async alw lwytho'n eitemau ar y fwydlen o restr gan ddefnyddio gweddill neu lists.asmx neu beth bynnag
  • Gan ddefnyddio jQuery, ddeinamig boblogi criw os <li>y tu mewn yn rhiant <st> (Gweler erthygl Christian Pinder yma am esboniad syml o hwn tecnnique)
  • Ddefnyddio CSS i wneud yr holl fformatio
  • Elw!

Y fan a'r lle yma yn boenus yw, bob tro y mae unrhyw un yn taro un o dudalennau y safle, Mae porwr gwe bod defnyddiwr yn estyn allan i gael eitemau oddi ar y rhestr.  Unwaith y bydd datblygiad yn gyflawn ac yn profi wedi profi pethau i fod yn sefydlog ac yn gyflawn, alwad hon yn ddiangen mwy nag 99% yr amser ers y fwydlen yn anaml yn newid.  Mae hefyd yn effeithio ar UI rhyfedd sy'n gyffredin yn y byd newydd hwn dewr o wefannau hyper-ajaxy – Mae y dudalen yn ei gwneud, a dim ond wedyn yw y fwydlen rendr.  Mae'n ansicr ac yn tynnu sylw yn fy marn i.  Ac yn ansicr. Felly, storio. 

Addaswyd y rhesymeg yr thusly:

  • Edrych ar gyfer briwsionyn yn y porwr sy'n cynnwys y fwydlen fel y darllenais ddiwethaf mae'n
    • Os yw dod o hyd i, ei wneud ar unwaith.  Peidiwch ag aros am y dudalen i orffen llwytho.  (Mae angen i chi wneud siwr yn eich HTML strategol y sefyllfa yma, ond nid yw'n anodd i'w wneud).
  • Aros am y dudalen gorffen llwytho a gwneud async alw lwytho'n eitemau ar y fwydlen o restr gan ddefnyddio gweddill neu lists.asmx neu beth bynnag
  • Cymharu beth gen i erbyn briwsionyn
    • Os yn cyfateb, STOPIO
    • Fel arall,, gan ddefnyddio jQuery, ddeinamig boblogi criw os <li>y yn <st>
  • Ddefnyddio CSS i wneud yr holl fformatio
  • Elw!

Rhai ohonoch yn mynd i'w ddweud, "hei! Nid oes na gwirioneddol storio digwydd yma ers eich bod yn darllen y fwydlen beth bynnag bob tro."  A ydych chi'n iawn – nid wyf yn ildio unrhyw fath o seibiant y gweinydd.  Ond oherwydd y galw async ac sy'n digwydd ar ôl y dudalen cychwynnol y mae pwysau'r HTML llawn gwneud, "deimlad" fwy ymatebol i'r defnyddiwr.  Mae y fwydlen yn gwneud yn eithaf gymaint ag y mae y dudalen yn tynnu.  Os bydd y fwydlen yn digwydd i newid, Mae y defnyddiwr yn destun ansicr ail-lunio o'r fwydlen, ond dim ond y un pryd.

Ceir rhai ffyrdd o wneud storio hwn yn fwy effeithiol a helpu allan y gweinydd ar yr un pryd:

  • Yn rheol bod y "storfa briwsionyn" yn ddilys am o leiaf 24 oriau neu rhai amserlen eraill. Cyn belled â'u nid oes dim briwsion wedi dod i ben, defnyddio ciplun fwydlen y briwsion a erioed wedi cyrraedd y gweinydd.

Wel... Dyna'r cyfan sy'n dod i'r meddwl ar hyn o bryd :). 

Os oes gan unrhyw un unrhyw syniadau glyfar yma byddwn yn hoffi gwybod eu.

Ac yn olaf – y gellir defnyddio'r dechneg hon ar gyfer pethau eraill.  Tudalen y cleient hwn mae nifer o bethau data yrru ar dudalennau amrywiol, newid llawer ohonynt yn gymharol anaml (fel unwaith yr wythnos neu unwaith y mis).  Os ydych chi'n targedu ardaloedd penodol o ymarferoldeb, Gallwch roi UI fwy ymatebol drwy dynnu cynnwys o storfa briwsionyn lleol a rendro ar unwaith.  Mae'n teimlo gyflymach i'r defnyddiwr hyd yn oed os nid ydych chi'n arbed y gweinydd unrhyw feiciau.  Chi Gall arbed y cylchoedd gweinydd drwy benderfynu ar rai amodau a sbardunau i annilysu'r hwn cache briwsionyn lleol.  Mae hynny'n gwbl sefyllfaol a stwff artsy ac mewn gwirionedd mwyaf o hwyl :). 

</diwedd>

undefinedTanysgrifio i fy mlog.

Dilynwch fi ar Twitter yn http://www.twitter.com/pagalvin

Roedd un o'r farn ar "Caching Dyn tlawd yn JavaScript

  1. Jonathan Roussel

    Hi Paul,

    Gweithredu braf, Mae hynny'n rhywbeth rydym yn defnyddio ond rydym yn defnyddio storio lleol HTML5 API yn hytrach na briwsion. Yr ymdrech gyntaf oedd bod angen inni storio mwy nag y gall caniatáu briwsionyn. Ond mantais ychwanegol yw bod nid yw'n cynyddu payloads, tra anfonir briwsion yn ôl a blaen. O safbwynt datblygiad mae'n iawn hawdd i'w ddefnyddio.
    Nid yw cymorth porwr yn berffaith ond onest eithaf da, http://caniuse.com/namevalue-storage .

    Jonathan

    Ateb

Ad a Ateb

Ni fydd eich cyfeiriad e-bost yn cael ei gyhoeddi. Meysydd gofynnol yn cael eu marcio *