Archivo de la etiqueta: Caché

Pobre del almacenamiento en caché en JavaScript

1 Respuesta

[TL;Versión DR: utiliza cookies para almacenar los resultados de las llamadas asincrónicas; prestar inmediatamente los resultados de las últimas llamadas asincrónicas y validarlos luego después de carga de la página.]

He estado trabajando en sitio de intranet de SharePoint para un cliente que ofrece, entre otras cosas, una estilizada navegación secundaria cuyas opciones del menú se administran mediante una lista personalizada vieja regular.  La idea es que el cliente obtiene al menú de "su" sitio de control sin afectar o ser afectados por la navegación global por lo.

(Hay algo increíblemente subversiva con la adición de un CEWP que apunta a un archivo HTML que carga un CSS y JS fundamentalmente modificar casi todo sobre el comportamiento de un sitio... pero eso es para otro post)

El código para esta bastante simple:

El dolor punto aquí es cada vez que alguien golpea una de las páginas del sitio, navegador del usuario es llegar a obtener elementos de la lista.  Una vez termine la dev y pruebas han demostrado que todo sea estable y completa, esta llamada no es necesaria más de 99% el tiempo desde el menú rara vez cambia.  También tiene un raro efecto UI que es común en este nuevo mundo de sitios web de hiper-ajaxy – hace que la página y sólo entonces hace el menú render.  Es nervioso y distracción en mi punto de vista.  Y nervioso. Por lo tanto, almacenamiento en caché. 

Modifiqué la lógica de esta manera:

  • Busque una cookie en el navegador que contiene el menú como último lo leí
    • Si encuentran, hacerla inmediatamente.  No esperes a terminar de cargar la página.  (Usted necesita para asegurarse de que el código HTML está ubicado estratégicamente aquí, Pero no es difícil de hacer).
  • Esperar a que la página termine de cargar y hacer un async llamar a cargar los elementos de menú de una lista utilizando el resto lists.asmx o lo que sea
  • Comparar lo que tengo contra la cookie
    • Si coincide con, PARADA
    • De lo contrario, utilizando jQuery, rellenar dinámicamente un montón si <Li>está en un <UL>
  • Usar CSS para hacer todo el formato
  • Beneficio!

Algunos de ustedes van a decir, "Hola! no habrá verdadera caché aquí puesto que estás leyendo el menú de todos modos cada vez.”  Y tienes razón, no voy a dar al servidor cualquier tipo de rotura.  Pero porque la llamada asincrónica y ocurre después de la Página inicial carga HTML representa plenamente, "parece" más sensible al usuario.  El menú bastante rinde tanto como la página dibuja.  Si el menú pasa al cambio, el usuario se somete a un nervioso volver a dibujar del menú, Pero sólo una vez.

Hay algunas maneras de hacer más eficaz esta caché y ayudar al servidor al mismo tiempo:

  • Poner en una regla que la caché"cookie" es válida para un mínimo de 24 horas o algunos otros plazos. Mientras no hay ninguna cookie caducada, usar copias instantáneas de menú de la cookie y nunca golpeó el servidor.

Bueno... eso es lo que vienen a la mente ahora :). 

Si alguien tiene alguna idea inteligente aquí me encantaría conocerlos.

Y por último – esta técnica puede utilizarse para otras cosas.  Página de mi cliente tiene un número de cosas basadas en datos de varias páginas, muchos de ellos cambiando relativamente raramente (como una vez por semana o una vez al mes).  Si destino áreas específicas de la funcionalidad, Puedes darle una interfaz de usuario más sensible tirando de contenido de la tienda local de galleta y procesamiento inmediato.  Se siente más rápido para el usuario incluso si no estás salvando el servidor cualquier ciclos.  Te puede Guarde los ciclos del servidor por decidir sobre algunas condiciones y disparadores para invalidar esta caché local cookie.  Eso es todo situacional artístico y verdad lo más divertido :). 

</final>

undefinedSuscribirse a mi blog.

Sígueme en Twitter en http://www.twitter.com/pagalvin