Tag Archives: Cache

Pauvre homme de mise en cache en JavaScript

[TL;DR version: utiliser des cookies pour stocker les résultats des appels asynchrones; restituer les résultats des dernières async appels immédiatement et puis validez-les après chargement de la page.]

J'ai travaillé sur le site intranet SharePoint pour un client qui dispose, entre autres choses, une navigation secondaire stylisée dont les options du menu sont gérées via une liste personnalisée vieux ordinaire.  L'idée est que le client obtient contrôler le menu de « leur » site sans affecter ou être affecté par le système mondial de navigation par elle.

(Il y a quelque chose d'incroyablement subversif sur l'ajout d'un CEWP qui pointe vers un fichier HTML qui charge des CSS et JS fondamentalement modifier presque tout sur le comportement d'un site... mais c'est pour un autre poste)

Le code pour cet jolie simple:

Le mal ici spot, c'est que chaque fois que quelqu'un frappe une des pages du site, navigateur web de l'utilisateur tend la main pour obtenir des éléments de la liste.  Lorsque dev est terminée et l'essai a prouvé des choses à être stable et complet, Cet appel n'est pas nécessaire plus de 99% du temps étant donné que le menu change rarement.  Il a aussi un effet bizarre de UI qui est commun dans ce nouveau monde de sites web hyper-ajaxy – rend la page et ensuite seulement le menu rend.  Il est nerveux et distrayant à mon avis.  Et de nervosité. Si, la mise en cache. 

J'ai modifié la logique thusly:

  • Recherchez un cookie dans le navigateur qui contient le menu, comme je l'ai lu dernière
    • Si trouvé, rendent immédiatement.  N'attendez pas la page pour terminer le chargement.  (Vous devez vous assurer que votre code HTML est stratégiquement placé ici, mais ce n'est pas difficile à faire).
  • Attendez que la page pour terminer le chargement et appeler un async pour charger les éléments de menu dans une liste à l'aide de repos ou lists.asmx ou autre
  • Comparer ce que j'ai contre le cookie
    • Si elle correspond, ARRÊT
    • Dans le cas contraire, à l'aide de jQuery, remplir dynamiquement un tas si <Li>les de dans un <UL>
  • Utiliser les CSS pour faire tout le formatage
  • Profit!

Certains d'entre vous vont dire, "Hé! Il n'y a aucune véritable cache passe ici puisque vous lisez le menu quand même à chaque fois.”  Et vous avez raison-je ne remets pas le serveur tout type de rupture.  Mais parce que l'appel est asynchrone et arrive après que la page initiale de la charge utile HTML rend pleinement, il « sent » plus réactif à l'utilisateur.  Le menu rend assez autant que dessine la page.  Si le menu arrive au changement, l'utilisateur est soumis à une re-dessiner de nervosité du menu, mais seulement qu'une fois.

Il existe des moyens pour accroître l'efficacité de cette mise en cache et dépanner le serveur en même temps:

  • Mettre dans une règle que le cache de « cookie » est valable pour un minimum de 24 heures ou quelques autres délais. Tant qu'il n'y a aucun cookie a expiré, Utilisez instantané menu du cookie et ne jamais frapper le serveur.

Eh bien... c'est tout ce qui viennent à l'esprit dès maintenant :). 

Si quelqu'un a des idées intelligentes ici je serais ravi de les connaître.

Et enfin, cette technique peut être utilisée pour d'autres trucs.  Page de ce client a un certain nombre de choses pilotés par les données sur les différentes pages, beaucoup d'entre eux changer relativement rarement (comme une fois par semaine ou une fois par mois).  Si vous ciblez des zones spécifiques de la fonctionnalité, vous pouvez donner une interface utilisateur plus réactive en extraient le contenu du magasin local de cookie et de rendre immédiatement.  Il se sent plus rapidement à l'utilisateur, même si vous n'enregistrez pas le serveur des cycles.  Vous peut sauver les cycles serveur en décidant sur certaines conditions et déclencheurs d'invalider ce cache de cookie local.  C'est tout situationnelle et artsy trucs et vraiment le plus amusant :). 

</fin>

undefinedS'abonner à mon blog.

Me suivre sur Twitter à http://www.twitter.com/pagalvin