Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Disminuir el tiempo de carga de tus sitios

Disminuir el tiempo de carga de tus sitios 13.AUG.15

Alvaro José Rios Ch
Fundador WebBizarro

Hoy es muy importante el tiempo de carga de los sitios web y cuando nuestros sitios manejan cargas de grandes cantidades de datos es importante ahorrar el tiempo que podamos en operaciones que se repiten y pueden ser almacenadas en Cache.

Hay muchas técnicas para ayudar a los sitios a acelerar los tiempos de descarga, como la compresión gzip, la compresión de los archivos estáticos, la optimización de imágenes y el aprovechamiento del cache del navegador. Sin embargo la cache del navegador es muy lenta, en términos de computación por lo que si podemos aprovechar otros medios siempre serán bienvenidos.

BasketJs es una librería muy simple de usar que nos permite aprovechar el localStorage para almacenar archivos JavaScript y así ganar un poco de velocidad en la carga de los archivos, además de ahorrar ancho de banda.

BasketJs tiene cuatro (4) métodos básicos que nos permiten usarla el primero es require, el cual nos permite cargar uno o más archivos JavaScript para nuestra página.

basket.require({ url: 'jquery.js' });
basket.require(
    { url: 'jquery.js' },
    { url: 'underscore.js' },
    { url: 'backbone.js' }
);

Una vez que los archivos son cargados se inyectan en el código de la página para poderlos usar, en este punto es importante saber que si los archivos no están disponibles en el almacenamiento local se buscan en la red por lo que la primera vez se cargaran todos y luego solo los que no estén en el almacenamiento local.

Si tienen archivos que tengan dependencias entonces tienen que asegurarse que la dependencia cargue primero pero no hay ningún problema, lo pueden hacer con un par de líneas más.

basket
    .require({ url: 'jquery.js' })
    .then(function () {
        basket.require({ url: 'jquery-ui.js' });
    });

En este caso se cargará primero Jquery y al terminar se cargará JqueryUI.

Los otros métodos se usan principalmente para manejar el almacenamiento, get te permite obtener el estado del recurso, el método remove te permite sacar un recurso del almacenamiento local, finalmente clear que elimina los elementos que han expirado.

Una librería como pueden ver muy simple de usar y muy útil para los desarrolladores web que quieren aprovechar todos los recursos para brindar una mejor experiencia.