Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Scripts en línea asíncronos a través de datos: URI

Las secuencias de comandos en línea son sincrónicas. "Bueno, duh!" podrías decir. Esa es una característica, no un error. Porque acceder a una variable después de un script en línea debería tener éxito. Y eso está bien. Pero no genial.
¿Cuándo es esto malo? Bueno, los scripts en línea hacen que las hojas de estilo se bloqueen. ¿Esperar lo? Steve lo explicó hace 10 años , y todavía es relevante hoy. Permíteme demostrarlo.

La línea de base

Digamos que tenemos:
  • CSS1 se retrasó artificialmente para tardar 5 segundos en cargar
  • Asíncrono externo JS1 que se carga bien e imprime en la consola
  • CSS2 que tarda 10 segundos en cargar
  • Asíncrono externo JS2
  <link rel = "stylesheet" href = "css1.css.php" type = "text / css" /> <script src = "js1.js" async > </script> <link rel = "stylesheet" href = " css2.css.php " type = " text / css " /> <script src = " js2.js " async > </script>    
    
     
    
Lo que tenemos es una cascada como esta:
... y en la consola (donde nos registramos DOMContentLoadedonloadtambién) que vemos que a pesar de CSS lleva siempre a la carga, sólo bloquea onloadLa ejecución externa de JS está bien.

Agregar guiones en línea

¿Qué sucede cuando agrega un script en línea después de cada JS externo? Código:
  <link rel = "stylesheet" href = "css1.css.php" type = "text / css" /> <script src = "js1.js" async > </script> <script> consola . log ( 'script en línea 1' + (+ nueva fecha - inicio )); </script> <link rel = "stylesheet" href = "css2.css.php" type = "text / css" /> <    
    
      
     
    > </script> <script> consola . log ( 'script en línea 2' + (+ nueva Fecha - inicio )); </script>
      
Ahora, el primer JS asíncrono externo funciona bien, pero la secuencia de comandos en línea y el segundo JS externo se retrasan por la lentitud del primer archivo CSS. Eso no es bueno. El segundo script en línea está bloqueado por el segundo CSS aún más lento. (Y si hubiera más archivos JS externos, también se bloquearían). DOMContentLoadedtambién está bloqueado
script externo 1 87
guión en línea 1 5184
script externo 2 5186
secuencia de comandos en línea 2 10208
DOMContentLoaded 10216
onload 10227
Hay una buena razón por la cual los navegadores hacen esto, por ejemplo, el script en línea puede solicitar información de diseño y para que eso funcione, el CSS debe descargarse y aplicarse. Pero es menos que perfecto.

Motivación

¿Por qué es esto un problema? ¿Puede deshacerse de los scripts en línea, si hacen que su ejecución sea más lenta? Bueno, eso no siempre es una opción. Tal vez necesite un trabajo que solo el servidor pueda hacer (o mejor que lo haga el servidor) y que luego esté disponible en el lado del cliente. Tal vez desee agregar un fragmento de terceros a la página, botones sociales, análisis y demás. ¿Agrega estos en la parte superior antes de cualquier links? Eso significa potencialmente ralentizar los scripts de su aplicación. ¿Los mueves hasta el fondo? Tal vez mejor, si eso es incluso una opción, pero todavía bloquean. No importa lo que se interponga entre a linky en línea script, el comportamiento de bloqueo todavía existe.
Entonces, ¿cómo evita que se bloqueen los scripts en línea?

Exteriorizar

Si solo hubiera una manera de hacer que una secuencia de comandos en línea parezca externa al navegador ... Pero sí, srcseñale un data:URI. No necesita ser codificado en base64 tampoco.
Entonces tomas esto:
<script> consola . log ( 'script en línea 1' + (+ nueva fecha - inicio )); </script>    
... y convertirlo en esto:
<script async src = "data: text / javascript, console.log% 28% 27inline% 20script% 201% 20% 27% 20% 2B% 20% 28% 2Bnew% 20Date% 20-% 20start% 29% 29% 3B " > </script>  
¡Y voilá! ¡No más bloqueos! ¡La sincronización se vuelve asíncrona! ¡Bailen todos!
secuencia de comandos en línea 1 2
guión en línea 2 4
DOMContentLoaded 10
script externo 1 271
script externo 2 277
onload 10270
Parece extraño, pero bueno, ¡funciona! Y hay días aprendiendo de la vista: la fuente es casi imposible de todos modos.

Notas

Probé este truco en Chrome (Mac / PC), Firefox (Mac / PC), Safari (Mac), Edge (PC). Funciona en todas partes excepto Edge. Oh, bueno, al menos se comporta como si nada hubiera cambiado, por lo que no le hace daño a Edge.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas