JavaScript rápido no es magia. Solo se trata de conocer estos patrones.
Probablemente estás escribiendo JavaScript lento.
Foto de Seyed Amir Mohammad Tabatabaee en Unsplash
¿Alguna vez has escrito algo en JavaScript, jurando que debería ser rápido, y luego has visto cómo la pestaña de rendimiento de Chrome se ilumina como un árbol de Navidad?
Sí. Lo mismo.
Hace unas semanas, escribí sobre cómo JavaScript — a pesar de todo el descrédito — puede ser en realidad rápido. El truco no está en el lenguaje en sí. Está en cómo lo usas.
Pero algunas personas se pusieron en contacto preguntando cómo escribir realmente JavaScript rápido.
Así que aquí está. Sin magia. Sin profundos internos de V8. Solo un montón de patrones aburridos, confiables, que hacen volar tu código JS, sin sacrificar tu cordura.
1. Los bucles superan a todo lo demás (cuando se usan bien)
Los métodos de array son lindos. Hasta que estás llamando a .map() dentro de un .filter() dentro de un .reduce() y te preguntas por qué tu página se siente como si se estuviera derritiendo.
Si te importa la velocidad, un buen viejo for loop sigue siendo bueno. ¿Por qué? Porque es predecible. V8 sabe exactamente lo que estás haciendo. Sin sobrecarga de devolución de llamada, sin abstracciones, solo iteración en bruto.
¿Quieres rendimiento? Sé primitivo.
Presiona enter o haz clic para ver la imagen en tamaño completo
No es sexy. Solo rápido.
2. Evita el cambio de forma de los objetos
Los objetos de JavaScript son flexibles. Demasiado flexibles.
Cambia su forma en pleno vuelo — añade propiedades dinámicamente, elimina cosas — y el motor tira sus suposiciones optimizadas. Lo que una vez fue una clase oculta elegante se convierte en un diccionario torpe.
Mantente con estructuras de objetos consistentes. Define todos tus campos de antemano. Si una clave podría existir más tarde, inicialízala como null o undefined desde el principio.
Cuanto menos sorprendan tus objetos al motor, mejor.
3. No vuelvas a declarar tus funciones como un maniático
Si estás definiendo funciones dentro de otras funciones dentro de bucles, por favor, detente.
Presiona enter o haz clic para ver la imagen en tamaño completo
No. Simplemente no.
Mueve esa función process hacia afuera. Deja que el motor la optimice una vez y listo.
4. No envases primitivos solo porque puedes
Puedes hacer esto:
Pero no deberías.
Esa palabra — new — acaba de costarte un montón de rendimiento y claridad mental. Los primitivos envasados se comportan de manera extraña. Son objetos fingiendo ser valores.
Mantente con primitivos. Son más rápidos y más cuerdos.
5. La memoización no es hacer trampa
Si tu función está devolviendo la misma cosa cada vez para la misma entrada, simplemente cáchala. Especialmente si implica consultas DOM, cálculos costosos o recorridos profundos de objetos anidados.
No obtienes puntos por recalcular algo sin sentido 300 veces por segundo.
6. Asíncrono no significa rápido
Algunas personas piensan que poner async y await por todas partes hace las cosas más rápidas. Lo que realmente hace es introducir colas de microtareas y un montón de sobrecarga de programación.
Úsalo cuando lo necesites. No porque VS Code te lo diga.
Si tu código puede ejecutarse de manera síncrona sin bloquear nada importante, déjalo.
7. Vigila tus dependencias
Las aplicaciones modernas de JavaScript adoran importar bibliotecas enteras para hacer tres cosas. Esa biblioteca de utilidades de 100KB. Probablemente está haciendo algo que podrías haber escrito en 10 líneas.
Cada dependencia que añades es otro posible agujero negro de rendimiento.
Mide dos veces. npm install una vez.
Pensamientos finales
JavaScript no es un lenguaje lento. Pero sí castiga la descuido. La buena noticia es que no necesitas convertirte en ingeniero de compiladores para escribir código rápido.
Solo necesitas dejar de hacer las cosas que lo ralentizan.
La mayoría de las victorias de rendimiento no provienen de trucos inteligentes, provienen de conocer las cosas aburridas y hacerlas bien.
Al igual que todo lo demás en el software.
