Caché de gran volumen de resultado json en el lado del cliente

Question

Tengo una aplicación asp.net mvc que devuelve el resultado JSON que contiene hasta varios años de datos que luego se representan en el gráfico Javascript.

Para tener una buena experiencia de usuario (en términos de rendimiento) Estoy buscando la mejor solución si es posible almacenar en caché los datos JSON en el lado del cliente para que el usuario haga clic en el gráfico con diferentes parámetros como día, vista semanal, etc., se consultan los mismos datos JSON sin tocar un servidor.

¿Podría alguien ayudarnos a tomar una mejor decisión sobre las mejores prácticas de almacenamiento en caché sobre si los datos deben almacenarse en el lado del cliente o del servidor o directamente sobre la base de datos para cada cambio de gráfico?

Gracias de antemano.

Answer 1

En primer lugar, ¿dónde está la base de datos? Si se encuentra en una red local con LAN gigabit, no será un problema golpearlo. Sin embargo, eso no es cierto en internet. Las personas tienen ancho de banda limitado, especialmente en dispositivos móviles, por lo que debe limitar sus llamadas HTTP. Además, menos llamadas HTTP significan menos tensión en el servidor.

Éstos son algunos consejos:

• Considere la paginación

  Al cargar "2 años de valor", imagino mucho, como una tesis de 100 páginas. Considere paginar datos en lugar de cargarlos todos a la vez. Esto le ahorra ancho de banda y espacio de caché (si alguna vez es limitado).

  Cómo: Hacer que la secuencia de comandos del servidor segmente los datos de acuerdo con lo que quiere el cliente. Es bastante fácil crear paginación en SQL usando LIMIT en la consulta. La lógica es como

• datos JSONify

  Uso JSON para el transporte de datos hacia y desde la red. Además de ser liviano, también está estructurado. Será más fácil de analizar y almacenar más adelante.

  Cómo: PHP tiene una función json_encode para convertir matrices en cadenas JSON. Supongo que su marco tiene una característica similar. Haga que la secuencia se repita en una página y luego use JSON.parse para convertir de cadena JSON a un objeto JS. JSON methods vienen nativo en modern browsers pero si usted necesita para atender los navegadores antiguos, Crockford has a library analizarlo

• Utilice un medio bien conocido marco de almacenamiento

  Si se necesita un almacenamiento persistente para la caché a través de la página, hace poco encontré PersistJS cuales abstrae localStorage a los disponibles en el navegador. Además, aquí hay un JS implementation of LZW. Manténgalo a mano, ya que los locales usan cadenas para almacenar datos y tiene un límite de 5-10MB.

  Cómo convertir los datos en una cadena usando JSON.stringify y almacenarlos con PersistJS. A continuación, para su recuperación, obtener la secuencia y analizar de nuevo usando JSON.parse()

• de llamadas sólo cuando sea necesario

  tiene el sistema de caché solamente llamar al servidor si algo se ha modificado, añadido o si hay algo que no está allí. Si la información está allí, ¿por qué debería llamar al servidor para ello?

• sincronización del caché

  Si tiene miedo de datos obsoletos, y luego tener algo de AJAX sincronizar el sistema de caché mediante el uso de algún método de ir a buscar datos en tiempo real como se describe en este wiki sobre Comet.

Los dos últimos puntos dependen de su marco de caché. Pero BackboneJS permite que sus modelos y colecciones se sincronicen con el servidor, que tienen la misma funcionalidad que mencioné.

Answer 2

He hecho lo que intentas hacer y esta es mi experiencia. Uso el middleware Site Studio de Oracle en el trabajo. Busqué un marco que funcionara con él pero no pude encontrar uno. Así que he probado ambas opciones a continuación.

1) La consulta de la base de datos devuelve una cierta cantidad de filas. Probé 2.000 como prueba. Un bucle foreach simple convierte los datos devueltos en datos JSON. Por lo tanto, literalmente construye una gran variedad de variables JSON a medida que recorre las filas. De esta manera, estás imitando una instantánea de una base de datos local. JS puede acceder a los elementos de la matriz muy rápidamente y puede sorprenderle la rapidez con la que puede ordenar, modificar y eliminar la información.

<script> 
var appData = [{'id':'0','first':'Sam','last':'Smith'},{'id':'1','first':'Dan','last':'Smith'}]; 
</script> 

Estos datos JSON se encuentran dentro de una etiqueta de secuencia de comandos. JQuery en doc.ready luego lee los datos y los agrega al texto html según sea necesario. Cuando un usuario cambia el valor de los datos JSON, ajax se dispara y guarda los cambios en la base de datos. No es demasiado difícil agregar un sistema como este a su aplicación. Usé Angular.js de Google más tarde para vincular los datos a la interfaz de usuario para tener un patrón limpio de MV y también es fácil de hacer rápidos géneros y filtrado del lado del cliente. Como ya se mencionó, Backbone.js y otros frameworks JS pueden sincronizar los datos del cliente al servidor.

2) La segunda forma en que guardé los datos en una página html es volver a recorrer las filas devueltas con un foreach. Entonces me guardan los datos en el HTML usando anticuado

<input type="hidden" name="someName" value="someValue" /> 

Luego utiliza jQuery para procesar los datos y añadirlo a la interfaz de usuario. Si usted realmente desea conseguir salvaje con JSON en realidad se puede incrustar en variables HTML al igual que

<input type="hidden name="row1" value="{'color':'red','style':'fancy','age':'44'}" /> 

A continuación, puede utilizar jQuery o angularjs para procesar los datos y enlazarlo a la interfaz de usuario.

Es interesante que muchos frameworks de aplicaciones no tienen un sistema incorporado de caché del lado del cliente. Realmente es ineficaz ordenar un menú de selección en el lado del servidor y luego reconstruir el html. Es mejor ordenarlo en JS y reconstruir dinámicamente el menú de selección. Existe una preocupación con respecto a la seguridad y no desea imprimir información privada en las variables JSON o HTML, ya que está visible en el origen de la vista. También puede incrustar datos en páginas utilizando más técnicas deshonestas. Tenga en cuenta a continuación:

<span class="data" value="1234"></span> 
$(function() { 
    $('.data').each(function() { 
     var val = $(this).attr('value'); 
     console.log(val); //process data 
    }); 
}); 

Puede utilizar JQuery en doc.ready para procesar clases llamadas datos. También puede almacenar datos JSON en el valor y analizarlo más tarde. Tenga en cuenta que las personas de JQuery están en contra de los desarrolladores que usan clases de esta manera. En mi experiencia, si no te excedes con esto, funciona muy bien.

Answer 3

1. Recupere los datos de la base de datos y guárdelos como archivos estáticos en el servidor. Dale una extensión .css o .png. (El navegador guardará automáticamente en caché la hoja de estilo y los archivos de imagen).
2. Guarde el nombre de archivo de datos con la marca de tiempo en un campo oculto. (Para asegurarse de cargar el archivo más reciente del servidor si hay un cambio en el archivo)
3. Cargue el archivo del servidor con AJAX, la primera vez que se carga desde servidor, pero la próxima vez se cargará desde el caché del navegador.
4. Puede usar JSON.Parse() para analizar el resultado de la solicitud AJAX.