Web Performance Optimization
  • Web Performance Optimization
  • Render Blocking CSS
  • Render Blocking JS
  • Resources Priority
  • Performance Budget
  • Images
  • HTTP/2 Server Push
  • Caching
  • Compression
  • Web Workers
  • React
  • Auditar con Chrome
Powered by GitBook
On this page
  • ¿Cómo funciona?
  • Script
  • Async
  • Defer

Was this helpful?

Render Blocking JS

Tratar de diferir los scripts para mejor rendimiento

PreviousRender Blocking CSSNextResources Priority

Last updated 5 years ago

Was this helpful?

¿Cómo funciona?

Los scripts bloquean el análisis y renderizado de un documento HTML. Cuando el browser encuentra un script detiene el análisis del documento, descarga el recurso, lo ejecuta y luego continua con el análisis del documento.

Script

El análisis HTML se detiene, se descarga el script, se ejecuta el script y después se reanuda el análisis HTML.

Async

El script se descarga de forma asíncrona, pero una vez descargado, se detiene para ejecutar el script. Tras la ejecución se reanuda el análisis HTML.

Defer

El script se descarga de forma asíncrona, en paralelo con el análisis HTML, su ejecución es diferida hasta que termine el análisis HTML. No hay bloqueo en el renderizado HTML.

¿Cómo utilizarlos?

Si el script no tiene dependencias utilizar async

Si el script tiene dependencias utilizar defer, siempre conviene utilizar defer.