Como programador web, la caché web de los navegadores siempre es un suplicio en el proceso de desarrollo ya que al intentar ver un cambio es necesario algo más que pulsar F5, debemos eliminar la caché del navegador para cargar los nuevos cambios en nuestra web en el próximo acceso, proceso tedioso.

Sin embargo, cuando la web ya es un producto el empleo de esta caché web es eficiente y optimiza los tiempos de respuesta de los navegadores en nuestros clientes

css-refresh

Conozcamos exactamente que se almacena en una caché web.

Se conoce como caché web a la memoria caché de un browser (navegador) que almacena documentos web (es decir, html, css, imágenes, javascripts) para optimizar recursos. Entre sus ventajas se encuentran reducir el ancho de bando o minimizar la carga de los servidores y la principal ventaja es rapidez de carga de una web en visitas posteriores.

Una memoria caché web guarda copias de los documentos que son transmitidos desde los servidores web, de forma que las siguientes peticiones al mismo servidor puedan ser respondidas rápidamente trayendo recursos previamente solicitados y almacenados en ella.

¡No se ve el cambio! Prueba a borrar caché

Todo son ventajas pero en entorno de desarrollo al manipular ficheros CSS, es posible que no veamos inmediatamente un cambio hasta actualizar la caché. Este proceso es un proceso lento y que a ningún desarrollador web agrada. Sin embargo he encontrado recientemente una herramienta que nos mejorará nuestro día a día, ya que nos optimiza este lento proceso. Esta herramienta se trata de CSS Refresh.

La solución está en JavaScript

CSS Refresh no es nada más que una pequeña librería JavaScript que monitoriza las CSS, mostrando los cambios que se han realizado en las hojas de estilo sin necesidad de actualizar la página. Esta herramienta nos aporta una gran ayuda mientras desarrollamos frontends, ya que los cambios directamente implementados se podrán visualizar sin refrescar el navegador. No hay nada mas frustante que estar intercambiando el editor de texto con el navegador y actualizando o borrando la caché constantemente.

La magia de esta librería está en llamadas AJAX. Esta librería emplea XMLHttpRequest para obtener los ficheros CSS en tiempo de modificación, por lo que solo funcionará si estás trabajando en un entorno de servidor. Ahora veremos como se incluye en nuestro proyecto, aunque es idéntico a incorporar cualquier librería javascript a nuestro proyecto.

1. Lo primero que debemos hacer es descargar el script de la página oficial

2. Incluir el siguiente código entre nuestras etiquetas <head>

<head>
    <link rel="stylesheet" type="text/css" href="css/site.css" />
    <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>

Artículos relacionados...

Sobre El Autor

Coordinador en AnalyticaWeb.com Me encanta el SEO y la Analítica Web. Emprendedor y autodidacta que con pasión intenta alcanzar los máximos de su proyección. Disfruto convirtiendo datos en negocio.

Artículos Relacionados

2 Respuestas

  1. gblumen

    hola, disculpen, yo hago pruebas con internet explorer 10, y no veo que se cachee imagenes ni nada, en que versiones de navegadores se cachean las paginas? o bajo que circunstancias, gracias y saludos

    Responder
  2. Liliana

    Gran articulo. Buscaba la solucione desde mucho tiempo, y ahora la tengo. Fácil, simple y efectiva!. Bravo!

    Responder

Hacer Comentario

Su dirección de correo electrónico no será publicada.