Usando async y diferir para cargar scripts en orden
Por lo tanto, estoy siguiendo la recomendación de Google PageSpeed para diferir los scripts de la mitad superior de la página. Digamos que este es el código en mi<head>
:
<script src="/js/jquery.js"></script>
<script src="/js/functions.js"></script>
losfunctions.js
el script depende de jQuery, por lo que es crucial quejquery.js
se carga y ejecuta antesfunctions.js
.
aplazar
<script src="/js/jquery.js" defer></script>
<script src="/js/functions.js" defer></script>
Mientras esto funciona yfunctions.js
se ejecuta correctamente, cuando cargo la página, veo que parpadea, como si el CSS aún no se hubiera cargado. Tenga en cuenta que el código anterior está en el<head>
. Si elimino eldefer
atributo dejquery.js
, el parpadeo desaparece. Eso me lleva a mi pregunta:
Mezclado
<script src="/js/jquery.js" async></script>
<script src="/js/functions.js" defer></script>
¿Usaasync
en el script de dependencia ydefer
en el script dependiente, asegúrese de que siempre se ejecutarán en ese orden? Parece funcionar en mis pruebas, pero no sé lo suficiente sobre cómo funciona el analizador para estar seguro.