JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Nueva y útil funcionalidad en Chrome 60: identificadores de terceras empresas

En la actualidad es extremadamente raro encontrarse una página cuyo contenido esté albergado en su totalidad en el dominio original. Basta con que se use Google Analytics, un vídeo embebido de YouTube o cualquier otra utilidad de terceros (sin mencionar a las redes de anuncios), para que tengamos código HTML, CSS y JavaScript que puede salir de varios sitios de terceras empresas. Hasta ahora las herramientas del desarrollador de Chrome permitían ordenar y filtrar por dominio, pero en Chrome 60 han incorporado una funcionalidad más interesante que consiste en mostrar de manera visual, con unos identificadores (badges en inglés) de dónde vienen ciertas peticiones y códigos, cuando provienen de servicios reconocidos por el navegador. Esto nos ayuda a identificar de manera más sencilla y visual el impacto real que puede tener incluir un servicio externo en la página, tanto en tiempos y "peso" de las descargas, como en rendimiento a la hora de renderizar la página y procesar JavaScript. [Más]

Midiendo el rendimiento de nuestro código JavaScript de manera sencilla desde la consola

Hace unas semanas os contaba un truco poco conocido pero muy útil para mostrar datos de modo tabular por la consola durante una sesión de depuración con JavaScript. Hoy traigo un par de trucos más del mismo estilo que estoy seguro de que no son demasiado conocidos tampoco.Cronometrar códigoUna necesidad habitual es medir el tiempo transcurrido al ejecutar determinado código, por ejemplo para tratar de ver cuál de dos estrategias diferentes de código es la más rápida con un número grande de datos o cosas por el estilo.Una forma habitual de hacerlo es guardar la fecha y hora actuales en una variable antes y después de la ejecución, y luego mostrar por consola la diferencia en milisegundos entre ambas. Sin embargo existe una forma mucho mejor que es utilizar los métodos console.time() y console.timeEnd().Estos métodos de la consola toman como parámetro el nombre de un contador, de modo que además podemos utilizar más de uno al mismo tiempo, midiendo incluso tiempos en paralelo si fuera ne... [Más]

Precarga y renderizado de páginas y recursos para mejorar el rendimiento de navegación

Existen multitud de técnicas para mejorar el rendimiento de las páginas web y conseguir mejores tiempos de respuesta, aunque la mayor parte de estas mejoras se deben realizar en el servidor. Sin embargo existen algunas cosas que podemos hacer desde el propio código HTML, en el Front-End y sin la intervención del servidor, para mejorar la velocidad de carga de las páginas siguientes a la actual y que creo que no son muy conocidas por la comunidad de desarrolladores. Imagina la siguiente situación: tienes una presentación basada en HTML en la que el usuario se va moviendo hacia adelante para ir visualizando una serie de recursos. Cada pulsación del botón "adelante" hace que se cargue un nuevo recurso. El caso típico es un carrusel de imágenes en el que, cada vez que pulsas en el botón de "adelante" se carga la siguiente imagen que haya en la lista. Si las imágenes son grandes, con mucha resolución, no están muy optimizadas o simplemente la conexión es lenta, es posible que tarden en c... [Más]

TRUCO: Hacer "bundling" de archivos JavaScript o CSS sin necesidad de herramientas externas

Este es un truco rápido pero muy útil para programadores Front-End que trabajan con HTML, CSS y JavaScript.Como todo el mundo sabe (o debería saber), con HTTP 1.1 cada petición que se envía al servidor añade "peso" a la carga total de la página porque se debe abrir una nueva conexión, se deben enviar las cabeceras y recibirlas, hay un máximo de conexiones abiertas a la vez, etc... Por ello, si la página incluye por ejemplo 10 archivos .css que en conjunto pesan 250KB, su descarga va a tardar más que si descargásemos ese mismo contenido exactamente, con el mismo peso, pero en un solo archivo .css.Esto no ocurre con la nueva versión HTTP 2, pero no siempre está disponible todavía.Como en una aplicación o en una página web cada milisegundo cuenta, se suelen utilizar dos técnicas habitualmente para disminuir el efecto de tener varios archivos y disminuir su peso:"Bundling" o empaquetamiento: consiste en combinar varios archivos dentro de uno solo para que, aunque ocupen lo mismo, puedan de... [Más]

Cómo determinar qué servicio está ocupando toda la CPU en mi servidor

Los caminos de Windows, a veces, son inescrutables. En ocasiones, sin saber por qué, en un servidor en producción un proceso empieza a "comerse" todos los recursos del procesador y no tenemos idea de a qué se puede deber (una actualización, un driver, un programa nuestro que se ha desbocado...). Y lo que es peor: si se trata de algún servicio del sistema lo tenemos más difícil pues todos los procesos de ese estilo se llaman igual: svchost.exe.svchost.exe es un proceso genérico del sistema que sirve para ejecutar DLLs de Windows. Generalmente contienen servicios. Además para evitar que la caída de un servicio afecte a todo el sistema se lanza un svchost.exe por cada grupo de servicios relacionados. Así, por ejemplo, todos los que tienen que ver con servicios de red van en uno, con seguridad en otro, con IIS en otro, etc...¿Cómo podemos averiguar cuál es el verdadero servicio que nos está causando el problema?Existen varias maneras.1.- La fácil: verlos directamente en el administrador de... [Más]

Cómo funcionan las cookies y por qué es importante saberlo

De todos los personajes de Barrio Sésamo, cuando era pequeño los que más me gustaban eran el Conde Draco (que contaba todo lo que se le ponía por delante) y sin duda Triki, el monstruo de las galletas. Triki se pasaba el día comiendo galletas de forma desmesurada, rompiéndolas en mil pedazos mientras lo hacía. Creo que se le salían de la boca más que las que era capaz de procesar. Era un personaje muy divertido. Me he acordado de él hoy al pensar en escribir este post, ya que a algunos programadores web les pasa lo mismo que a Triki: procesan las cookies pero le sirven de bien poco o le hacen un flaco favor. Más o menos todos los programadores web tienen una idea aproximada de qué son las cookies en un navegador web y para qué se utilizan. Pero hay algún concepto básico que todavía no es bien conocido y que me parece interesante aclarar, así que me he decidido a escr... [Más]

Rendimientos de carga de páginas: los conceptos “Wall Time” y “CPU Time”

Esta época, entre otras muchas otras cosas, estoy trabajando en un nuevo libro de JavaScript que verá la luz en los próximos meses. Uno de los capítulos se centra en la depuración de código JavaScript usando las herramientas que ofrecen de serie los navegadores. Entre éstas, una muy interesante es el “Profiler”, disponible tanto en Chrome como en Internet Explorer, y en Firefox a través de Firebug. El profiler tiene varias sub-herramientas, como el analizador de tiempos de ejecución que nos permite obtener información detallada y estadísticas sobre los tiempos de ejecución de nuestra página, y sobre sus consumos de memoria, identificando así posibles cuellos de botella, funciones poco optimizadas, etc... E incluso bugs en el motor de renderizado de las páginas (Se han dado casos). En el libro me estoy centrando en las herramientas de desarrollo de Google Chrome, y... [Más]