JavaScript No Es Lento – Solo Está Programado Incorrectamente

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

En esta sesión, exploraremos por qué el modelo de un solo hilo de JavaScript causa retraso en la UI, por qué setTimeout() y requestIdleCallback() fallan en la priorización de tareas, y cómo scheduler.postTask() finalmente ofrece a los desarrolladores un control detallado sobre la ejecución.

A través de ejemplos del mundo real, análisis de rendimiento y una demostración en vivo, mostraremos cómo la programación priorizada puede eliminar los congelamientos de la UI, mejorar la capacidad de respuesta y hacer que la ejecución de JavaScript sea verdaderamente centrada en el usuario. Si te importa el rendimiento de JavaScript, ¡esta es la charla que no querrás perderte! 🚀

This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.

Sulagna Ghosh
Sulagna Ghosh
14 min
16 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Srilakna discute el rendimiento de JavaScript, destacando los desafíos de programación y las limitaciones de los modelos existentes. La introducción de la API Post Task Scheduler aborda estos problemas, ofreciendo programación basada en promesas para prioridades específicas. Se explican los funcionamientos internos y la implementación de la API, enfatizando la priorización de tareas para asegurar un rendimiento fluido de la UI. La API permite a los desarrolladores controlar eficazmente las prioridades de las tareas, evitando congelamientos y retrasos en la UI.

1. Analizando el Rendimiento de JavaScript

Short description:

Srilakna, un ingeniero de JavaScript, discute cómo JavaScript no es lento, sino que está mal programado. Presenta una demostración para mostrar problemas de capacidad de respuesta y explora técnicas de solución de problemas de rendimiento.

Hola a todos. Soy Srilakna. Soy un ingeniero de JavaScript. Y hoy voy a hablar sobre un tema muy interesante, JavaScript no es lento, solo está mal programado. Sé que el título es un poco dramático, pero pronto descubriremos por qué lo he dicho.

Así que he preparado una pequeña demostración para presentarme. Así que déjame ir a la parte de la demostración. Estoy muy emocionado por eso. Así que aquí está mi demostración. Al hacer clic en uno o no más, verás una breve introducción de mí mismo. Y esta prueba de capacidad de respuesta y contador es para el propósito de la demostración posterior.

Así que déjame hacer clic en el botón. Espera, ¿qué pasó? El contador se congeló por un momento, ¿verdad? OK, déjame hacerlo de nuevo. Uno o no más. El botón de prueba de capacidad de respuesta no es clicable por un momento. ¿Qué está pasando? No estaba preparado para eso. OK, déjame calmarme e intentar solucionar esto. Puedo hacerlo. Así que comenzaré revisando la pestaña de la consola si hay algún error o no. Así que déjame hacer eso primero. Consola y estoy actualizando. Uno o no más. Prueba de capacidad de respuesta. No, no hay error en la consola. Así que no tengo ninguna llamada de red. Así que también estoy omitiendo la pestaña de red. Esto está relacionado con el retraso. Así que creo que la pestaña de rendimiento puede ayudarnos. Así que déjame ir a la pestaña de rendimiento y. Nuevamente, comenzar a grabar.

2. JavaScript Scheduling Challenges

Short description:

Explorando problemas con la programación de JavaScript, el bloqueo de la computación pesada en el hilo principal, la prioridad de los clics del usuario y la priorización de tareas en la visualización del rendimiento.

Prueba de capacidad de respuesta. OK, detener. OK, podemos ver una montaña amarilla muy larga. Sé para qué es esto. En realidad, tengo una computación pesada sincrónica, pero en realidad usé fragmentación para que no bloquee el hilo principal. Pero esto no funciona, en realidad, de alguna manera. Estos son el método de fragmentación de cómputo. Y puedo ver esto es, creo, el clic del botón para probar la capacidad de respuesta. Déjame comprobar. Así que. Sí, llamada a función. Sí, este es el clic del botón de prueba de capacidad de respuesta. Y en realidad esperaba que este botón se registrara en algún lugar entre la fragmentación de cómputo, entre dos fragmentos de cómputo. Pero esto no sucedió realmente.

Todo el bloque de JavaScript, el JavaScript pesado se ejecutó completamente. Luego esto se registró y el intervalo establecido para el contador se está registrando. Y sé, creo que sé por qué está sucediendo esto. OK, así que antes de explicar esto a ustedes, déjenme resumir rápidamente lo que está sucediendo aquí. Así que la computación pesada bloquea todo el hilo principal, aunque he usado fragmentación para evitar que eso suceda. Y el segundo es un clic del usuario, que debería tener la máxima prioridad. Eso no se está registrando correctamente. Eso se registra después de que toda la ejecución pesada se haya completado. Y de esta visualización del rendimiento, podemos ver claramente una cosa que algo está mal con la programación de JavaScript y la priorización de tareas.

Así que. Antes de avanzar con esta depuración, debemos recordar dos cosas importantes sobre JavaScript que JavaScript es de un solo hilo, significa que JavaScript usa un hilo, un solo hilo para realizar tareas, lógica, UI de escritorio y JavaScript usa programación cooperativa. Significa que si JavaScript está ejecutando algo actualmente y voy a JavaScript diciendo como, por favor ejecuta mi tarea, JavaScript me dirá déjame terminar mi tarea primero, luego programaré o ejecutaré la tuya. Este es en realidad el concepto básico de la programación cooperativa. Y cuando estamos hablando de programación cooperativa, revisemos rápidamente cómo el modelo de prioridad que JavaScript usa detrás. Así que lo primero es no ceder. Esto está reservado para los códigos sincrónicos que se ejecutan completamente hasta su finalización y tiene la máxima prioridad.

3. JavaScript Scheduling Model Limitations

Short description:

Explorando prioridades web, desafíos con la programación de JavaScript y limitaciones de set timeout y request idle callback para la priorización e interrupción de tareas.

Next is the next highest priority has micro tasks. Estos son callbacks de promise, mutation observers. Esto se ejecuta a continuación. Después de eso, la tercera prioridad más alta es request animation frame. Callbacks que se ejecutan justo antes de los próximos tres pines. Tiene la tercera prioridad más alta. Después de eso, tareas interframe, tareas normales como funciones de timer, fetch callbacks, este tipo de tarea cae bajo esta categoría. Esto se ejecuta con prioridad ordinaria. Y al final está request idle callback. Esto tiene la prioridad más baja, significa que cuando el hilo está en estado inactivo, solo entonces este tipo de tarea se ejecutará. Así que esta es la estructura jerárquica de prioridades web.

Y claramente podemos ver una cosa, aunque he usado fragmentación para evitar que esta tarea pesada se bloquee, el hilo principal como JavaScript es de un solo hilo y usa programación cooperativa. JavaScript es en realidad como completar toda la ejecución de la tarea pesada primero, y luego verificará la siguiente tarea con mayor prioridad. Nosotros, los desarrolladores, claramente no tenemos control para decirle a JavaScript que después de completar este fragmento, después de completar la ejecución de un fragmento en particular, por favor ejecuta este clic de usuario, y luego puedes continuar con el siguiente fragmento. No tenemos ese tipo de control. Y ese es el problema con JavaScript.

Y esto no es cuán rápido es JavaScript, sino cuán inflexible ha sido el modelo de programación de JavaScript. Entonces, ¿tenemos algo que pueda evitar que esto suceda? Y esa es la solución. Bueno, puedes hablar sobre set timeout, puedes pensar que set timeout puede ayudarnos a resolver este problema. Bueno, set timeout es solo una función de temporizador.

4. Introducing Post Task Scheduler API

Short description:

Discutiendo las limitaciones de set timeout y request idle callback, introduciendo la nueva API de post task scheduler con programación basada en promesas para prioridades específicas, actualmente disponible en navegadores basados en Chromium.

Así que no, set timeout no puede. Luego request idle callback. Hemos visto la jerarquía de prioridades. Se ejecuta cuando el hilo está en modo inactivo. Piensa en la situación. Si el usuario está interactuando constantemente con el navegador, entonces no hay modo inactivo para el hilo. Así que la tarea nunca se ejecutará. Así que completa imprevisibilidad. Así que estas dos opciones, no podemos depender de estas dos. Así que esto es realmente un problema de programación real y necesitamos una solución real para esto.

No soluciones alternativas como usar web workers cuando eso ni siquiera es necesario o mostrar una sincronización de todo. No, una solución real. Bueno, si me hubieras preguntado esto hace algunos años, diría que no. Pero hoy, sí, tenemos la respuesta. JavaScript ha lanzado una nueva familia de APIs de scheduler. Y hoy vamos a hablar sobre la más importante y más priorizada. Esa es post task.

Entonces, ¿qué es post task? Es una API de programación basada en promesas que te permite encolar tu trabajo con una prioridad específica. Y esta prioridad influye en cómo los navegadores, los bucles de eventos la programan. Así que esta es la sintaxis. Veremos esta sintaxis en unos momentos. Otra cosa importante es que actualmente está disponible en navegadores basados en Chromium. Aunque existe polyfill. Y Safari y Firefox, navegadores no basados en Chromium, también están siguiendo esto. Esta es una amplitud de API de scheduler.

5. Understanding Post Task Internal Workings

Short description:

Explicando el funcionamiento interno de la API de post task scheduler, destacando el uso de la cola de tareas y los niveles de prioridad para diferentes tipos de tareas.

Así que lo siguiente importante es cómo funciona internamente. Utiliza una cola de tareas global. Así que la primera pregunta, ¿qué es la cola de tareas? La cola de tareas es una cola donde las tareas significan la función de JavaScript que quieres que el navegador ejecute. Espera por datos. Y cuando usamos scheduler.postTask, estás insertando una tarea en una de estas colas.

Y cada cola de tareas tiene un nivel de prioridad específico según la sintaxis. Tenemos un vistazo de la prioridad. Así que hay tres tipos de prioridades. User blocking, user visible y background. User blocking tiene la prioridad más alta y está reservada para clics de usuario. Y este tipo de tareas importantes. Luego está user visible.

Esto tiene prioridad media y esta es la prioridad predeterminada para post task. Y al final están las tareas de background. Tiene la prioridad más baja, tarea no visual y tareas como mine donde se procesa computación pesada, que pueden tener la prioridad más baja, caen en esta categoría. Otra cosa importante es que cuando publicas una tarea, hereda la prioridad de la cola en la que la colocaste.

6. Implementing Post Task API in Code

Short description:

Demostración de la implementación de la API de post task en código para tareas de computación pesada, asegurando un rendimiento fluido de la UI sin retrasos ni congelamiento de pantalla.

Y una tarea, como dije, en la cola de background se trata como de baja prioridad y cederá a trabajos más importantes. Así que claramente tenemos un entendimiento de cómo funciona esta API de post task. Y esta es la sintaxis de la API de post task. Solo una sintaxis rápida.

Y déjame implementarlos en mi código, suficiente de la parte teórica. Así que lo que haré, esta es mi función compute chunk. Y aquí tengo este bloque sincrónico largo de computación pesada. Y envolveré este compute chunk con la API de scheduler ya que es una función basada en promesas.

Así que uso un sink de ello. Y déjame habilitar el botón apropiado para esto también. Sí. Y déjame. Verificar de nuevo. Bueno, esto es lo que esperaba y está funcionando tal como esperaba. Sin retraso en la UI, sin pantalla congelada. Y déjame mostrarte cómo se está colocando esto en el hilo principal. Así que primero, déjame refrescarlo de nuevo. Y haciendo clic en esto.

7. Understanding Post Task Prioritization

Short description:

Explicación de la priorización de compute chunks usando la API de post task para prevenir el congelamiento y retraso de la UI, mostrando el poder del control explícito de la prioridad de tareas para los desarrolladores.

Esta detención de la capacidad de respuesta. OK, así que ahora estamos viendo, en realidad, hay múltiples chunks. Y explicaré lo que está sucediendo aquí. Así que cada compute chunk está envuelto con esta prioridad de post task. Y veremos el botón de interacción. Haz clic en algún lugar aquí.

Sí. Aquí. Así que. Déjame verificar. Incluso la función de clic llamada. Sí, este es el evento. Entonces, lo que está sucediendo aquí es que hemos envuelto el compute chunk con este post task con prioridad de background, los está tratando como una tarea de menor prioridad. Así que cuando primero comenzó el compute chunking y luego cuando el usuario hace clic, entonces le da al clic del usuario su propio espacio.

Y después del procesamiento del clic del usuario, entonces nuevamente comienza las funciones de compute chunks o computando los chunks, chunks individuales. Y sí, hemos prevenido el congelamiento y retraso de la UI. Así que estamos al final de nuestra sesión y hemos hecho JavaScript rápido nuevamente. Mira, JavaScript no es inherentemente lento. Su programación por defecto es simplemente rígida.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
How React Compiler Performs on Real Code
React Advanced 2024React Advanced 2024
31 min
How React Compiler Performs on Real Code
Top Content
I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!
Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Depuración del Rendimiento de React
React Advanced 2023React Advanced 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Masterclass de alto rendimiento Next.js
React Summit 2022React Summit 2022
50 min
Masterclass de alto rendimiento Next.js
Workshop
Michele Riva
Michele Riva
Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.
Maximizar el rendimiento de la aplicación optimizando las fuentes web
Vue.js London 2023Vue.js London 2023
49 min
Maximizar el rendimiento de la aplicación optimizando las fuentes web
WorkshopFree
Lazar Nikolov
Lazar Nikolov
Acabas de llegar a una página web y tratas de hacer clic en un elemento en particular, pero justo antes de hacerlo, se carga un anuncio encima y terminas haciendo clic en eso en su lugar.
Eso... eso es un cambio de diseño. Todos, tanto los desarrolladores como los usuarios, saben que los cambios de diseño son malos. Y cuanto más tarde ocurran, más interrupciones causarán a los usuarios. En este masterclass vamos a analizar cómo las fuentes web causan cambios de diseño y explorar algunas estrategias para cargar fuentes web sin causar grandes cambios de diseño.
Tabla de contenidos:¿Qué es CLS y cómo se calcula?¿Cómo las fuentes pueden causar CLS?Estrategias de carga de fuentes para minimizar CLSRecapitulación y conclusión