Optimización del rendimiento de aplicaciones JavaScript: guía práctica

Optimización del rendimiento de aplicaciones JavaScript: en la práctica

El rendimiento de las aplicaciones JavaScript no es solo un beneficio agradable, sino un factor crítico que afecta la experiencia del usuario (UX), la conversión y los costos de infraestructura. Una carga lenta de página o una demora en la respuesta de una API pueden costarle hasta el 40% del tráfico. En este artículo, veremos métodos prácticos para optimizar el código JavaScript (en el entorno Node.js) que le ayudarán a hacer su aplicación más rápida y eficiente. No profundizaremos en los fundamentos teóricos del Event Loop, sino que pasaremos directamente a técnicas específicas con ejemplos.

1. Almacenamiento en caché: reduciendo la carga del servidor

Una de las formas más efectivas de acelerar una aplicación es evitar la repetición de operaciones costosas. El almacenamiento en caché permite guardar el resultado de un cálculo o consulta a la base de datos y devolverlo en una solicitud posterior.

Almacenamiento en caché en memoria usando Map

Para escenarios simples, donde los datos no requieren lógica de invalidación compleja, el objeto incorporado Map es ideal. Es más rápido que Object y más adecuado para agregar y eliminar claves con frecuencia.

const cache = new Map();

async function fetchUserData(userId) {  if (cache.has(userId)) {    console.log('Devolviendo desde caché');    return cache.get(userId);  }

  // Simulación de una consulta costosa a la BD  const data = await new Promise((resolve) => {    setTimeout(() => resolve({ id: userId, name: `User_${userId}` }), 1000);  });

  cache.set(userId, data);  return data;}

// Primera llamada (esperamos 1 seg)console.time('first');await fetchUserData(1);console.timeEnd('first');

// Segunda llamada (instantánea)console.time('second');await fetchUserData(1);console.timeEnd('second');

Caché TTL (Time-To-Live)

Para que la caché no quede obsoleta, es necesario agregar un tiempo de vida a la entrada. Implementamos una caché TTL simple.

class TTLMap {  constructor(ttlMs = 60000) {    this.ttl = ttlMs;    this.store = new Map();  }

  set(key, value) {    const record = { value, expiry: Date.now() + this.ttl };    this.store.set(key, record);  }

  get(key) {    const record = this.store.get(key);    if (!record) return null;    if (Date.now() > record.expiry) {      this.store.delete(key);      return null;    }    return record.value;  }}

const userCache = new TTLMap(5000); // caché por 5 segundos

2. Asincronía y optimización del Event Loop

Node.js es de un solo hilo, pero su naturaleza asíncrona permite manejar múltiples solicitudes de manera eficiente. El principal enemigo del rendimiento son las operaciones síncronas que bloquean el Event Loop.

Evite las versiones síncronas de las funciones

Los módulos fs, crypto y otros tienen análogos síncronos (readFileSync, crypto.pbkdf2Sync). Úselos solo durante la inicialización de la aplicación. Dentro de los manejadores de solicitudes, use solo las versiones asíncronas.

// MALO: Bloquea el Event Loopconst data = fs.readFileSync('/path/to/file.txt', 'utf-8');

// BUENO: Asíncronoconst data = await fs.promises.readFile('/path/to/file.txt', 'utf-8');

Divida tareas pesadas con setImmediate

Si tiene un bucle síncrono pesado (por ejemplo, procesar un array de 10 millones de elementos), bloqueará el servidor durante varios segundos. Divida la tarea en partes y use setImmediate para permitir que el Event Loop procese otras solicitudes entre las partes.

function processLargeArray(items, chunkSize = 1000) {  let index = 0;

  function processChunk() {    const chunk = items.slice(index, index + chunkSize);    // Procesamos el fragmento    chunk.forEach(item => heavyOperation(item));

    index += chunkSize;    if (index < items.length) {      // Continuamos en la siguiente iteración del Event Loop