Desarrollo web: localStorage vs. cache HTTP

Question

Digamos que tengo un servidor web que responde a un GET con el archivo .json. La respuesta a ese GET especifica que el navegador almacena en caché la respuesta durante 5 años.

Digamos que tengo una página web que hace esa solicitud GET para los datos JSON cuando se carga la página. Cuando vuelve la respuesta, los datos JSON se ponen en localStorage.

En este punto, si quiero que desee recuperar datos JSON de nuevo, que será más rápido:

1. Obtención desde localStorage
2. Ejecución otra Ajax solicitud GET (donde el navegador no lo hará realmente hacer la solicitud - accederá a la caché del navegador en su lugar)

¿Se puede probar con una prueba automatizada o un ejemplo?

¿Por qué es correcta su respuesta?

Answer 1

Diferencias si alguno de estos dos enfoques debe ser despreciable en los UA modernos (navegadores).

¿Por qué mi respuesta es correcta? Porque implementé estos dos mecanismos.

Answer 2

Creo que está haciendo la pregunta incorrecta. Lo que es más rápido durante una sesión activa es básicamente irrelevante, porque ambos se almacenan localmente, y la búsqueda local es casi instantánea (frente a la búsqueda remota). (Una advertencia: no todos los navegadores confían en los encabezados de almacenamiento en caché, pero generalmente se inclina más hacia el almacenamiento en caché en exceso, en lugar del almacenamiento en caché.)

Sin embargo, su situación de ejemplo es suponer que nunca se borra el caché del navegador . En general, esto es incorrecto: el usuario no solo puede borrar la caché cada vez (o configurarla para que se borre automáticamente), sino que el navegador puede decidir eliminar los datos almacenados en caché de su sitio web (dependiendo del espacio, generalmente).

En su lugar, debe pensar en la longevidad de los datos y en la frecuencia con que el usuario los volverá a buscar.

Si esta información es algo a lo que solo pueden acceder ocasionalmente, entonces debe confiar en el mecanismo de caché incorporado del navegador. Esto permite que el navegador lo elimine cuando ya no sea necesario.

Sin embargo, si los datos son algo que se carga regularmente o necesita cada visita al sitio, entonces debe usar localStorage. El almacenamiento local es no se borra automáticamente con la memoria caché, y de hecho solo suele vaciarse si el usuario borra las cookies para ese sitio web. Esto permite que la información se conserve durante mucho más tiempo, incluso si el sitio web no se visita con la frecuencia suficiente para mantener el caché actualizado. Pero de repente ahora será responsable de mantener esa base de datos de información.

Finalmente, la pregunta más importante: como desarrollador, ¿vale la pena la relación costo-beneficio del desarrollo de una solución más compleja basada en localStorage? En otras palabras, ¿verá suficientes beneficios para el usuario final al cachear una búsqueda 1-2s, o está hablando de una cantidad significativa de información, donde el usuario verá una ganancia de más de 30 segundos?

A modo de ejemplo, para una aplicación Web grande, compleja he desarrollado un tiempo atrás, solía localStorage para almacenar la gran cantidad de bibliotecas JS. Al volver a visitar el sitio, simplemente se analizaron desde la copia local (después de verificar el hash). Esta solución permitió a una amplia gama de navegadores ver una reducción masiva en el tiempo de inicio, incluso si el caché se borró. (No estoy diciendo que este es un buen uso, pero funcionó en el momento.)

Answer 3

Ambas fuentes afirman que late localStorage caché del navegador en la velocidad.

• http://www.mobify.com/blog/smartphone-localstorage-outperforms-browser-cache/
• http://jsperf.com/localstorage-versus-browser-cache

Aquí es mi opinión sobre la carga de archivos JavaScript desde el almacenamiento local. El código es pequeño, puedes consultarlo en mi proyecto de Github https://github.com/webpgr/cached-webpgr.js o utilizar el código del ejemplo completo a continuación.

La biblioteca completa:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)}; 

Llamada la biblioteca

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){ 
    requireScript('examplejs', '0.0.3', 'example.js'); 
});