Comentario: La carga asincrónica puede entenderse como un procesamiento concurrente sin bloqueo. En el pasado, utilizamos varias técnicas de JavaScript para hacer esto. Ahora WebKit ha implementado el atributo Async Async de la etiqueta de script para HTML5. Los amigos interesados pueden aprender al respecto.
(Nota del traductor: la carga asincrónica puede entenderse como un procesamiento concurrente no bloqueado).Una de las razones por las que estoy entusiasmado con HTML5 es que implementa muchas características esperadas en la industria. Siempre necesitamos mostrar indicaciones en blanco en el cuadro de entrada, pero todos se implementan en JavaScript. También queremos que todo el bloque se pueda hacer clic, que también se implementa con JavaScript.
WebKit ahora implementa la propiedad asíncrona asíncrona de la etiqueta de script para HTML5. En el pasado solíamos usar varios trucos de JavaScript para hacer esto, pero ahora las nuevas propiedades hacen que sea relativamente fácil evitar el bloqueo.
atributos de async - html
Como mencioné anteriormente, agregar el atributo async es muy simple:
<!-Especifique Async y Onload Callback->
<script async src = "sitescript.js"> </script>
De hecho, si su diseño de estructura JavaScript y HTML es razonable, entonces el 90% de los casos de los elementos de su script se pueden cargar de forma asincrónica.
Diferir los atributos HTML
El navegador Safari agrega un atributo de referencia adicional
<!-Especifique Difer, el efecto es similar a Async->
<script difiere src = "sitescript.js"> </script>
La diferencia entre asíncrono y diferir
El blog oficial de Webkit explica la diferencia entre Async y Difer
------------------------------------
En circunstancias normales, si el navegador encuentra un script externo al analizar el archivo de origen HTML, el proceso de análisis se detendrá y se enviará una solicitud para descargar el archivo de script. DOM Parsing continuará realizándose después de que el script se descargue y ejecute completamente. Por ejemplo:
<script src = myBlowingscript.js> </script>
Durante el proceso de descarga, el navegador se bloquea para realizar otras tareas útiles, incluido el análisis HTML, la ejecución de otros scripts y la visualización del diseño CSS. Aunque los escáneres de precarga de WebKit pueden detectar múltiples lectura durante la fase de descarga, todavía hay un gran retraso de red para algunas páginas.
Existen muchas técnicas para mejorar la velocidad de visualización de la página, pero todas requieren habilidades adicionales específicas de código y navegador. Ahora el script no puede tener que ejecutar scripts sincrónicamente agregando async o diferir los atributos. El ejemplo es el siguiente:
<script async src = "myAsyncscript.js"> </script>
<script difiere src = "mydeferscript.js"> </script>
Ni el script de anotación de Async ni diferir se descargará inmediatamente sin detener el análisis HTML. Ambos admiten devoluciones de llamada de eventos Onload para resolver la inicialización que requiere que el script ejecute.
La diferencia entre los dos es la diferencia en la ejecución:
El script Async se ejecutará inmediatamente después de descargar el archivo de script, y su tiempo de ejecución debe ser antes de que se active el evento de carga de la ventana. Esto significa que es probable que no se ejecuten múltiples scripts async en el orden en el que aparecen en la página.
Por el contrario, el navegador asegura que se ejecuten múltiples scripts de diferencias en orden de ocurrencia en la página HTML, y que el tiempo de ejecución sea antes de que se complete la resolución DOM y se dispare el evento DOMCONTENTENTOGLED del documento.
El siguiente es un ejemplo que tarda 1 segundo en descargar y 1 segundo para analizar otras operaciones. Podemos ver que toda la carga de la página tomó aproximadamente 2 segundos.
El mismo ejemplo, pero esta vez especificamos el atributo de diferir del script. Porque cuando se descarga el script de diferir, otras operaciones se pueden ejecutar en paralelo, por lo que es aproximadamente 1 veces más rápido.
------------------------------------
¿Qué navegadores admiten async y difieren?
También mencionado en el artículo citado anteriormente:
Además de la nueva versión del navegador basada en WebKit, Firefox ha admitido las propiedades de diferir y ongar durante mucho tiempo, y ha agregado el atributo Async desde FF3.6. IE también es compatible con el atributo de diferencias, pero no admite el atributo Async. A partir de IE9, el atributo Onload también será compatible.
¡Aynsc es increíble!
Estaba muy feliz de ver el WebKit implementar async. El bloqueo es un gran cuello de botella de rendimiento para cada sitio web, y poder especificar directamente los archivos de script La carga asíncrona sin duda acelerará las páginas web.