Une brève analyse des compétences de chargement asynchrone JavaScript_javascript

Avant-propos

Je pense que vous avez rencontré de nombreux problèmes avec le chargement du script JavaScript. Principalement en quelques points——

1> Problèmes de chargement, de dépendance des fichiers et d'ordre d'exécution causés par les scripts synchrones et les scripts asynchrones
2> Problèmes d'optimisation des performances causés par les scripts synchrones et les scripts asynchrones

Une compréhension approfondie de tous les aspects liés au chargement des scripts aidera non seulement à résoudre des problèmes pratiques, mais aidera également à comprendre et à mettre en œuvre l'optimisation des performances.

Regardez d'abord n'importe quel code de balise de script——

Copier le code Le code est le suivant :

S'il est placé au-dessus de , il bloquera tout travail de rendu de page, laissant l'utilisateur dans un état « écran blanc de la mort » jusqu'à ce que le script soit chargé et exécuté. Le script à la fin de permettra uniquement aux utilisateurs de voir une page statique sans vie. L'endroit où le rendu côté client doit être effectué est parsemé de contrôles inefficaces et de cases vides. Obtenez un cas de test -

Copier le code Le code est le suivant :

Je suis le contenu

Parmi eux, le contenu de test.js——

Copier le code Le code est le suivant :

alert('Je suis le code du script dans la tête. Après avoir exécuté le js ici, le rendu du contenu du corps va démarrer !');

Nous verrons que l’alerte est un point de pause, et à ce moment, la page est blanche. Mais veuillez noter que la page entière a été chargée à ce moment-là. Si le corps contient des balises avec certains attributs src (comme la balise img ci-dessus), le navigateur a déjà commencé à charger le contenu associé. En bref, veuillez noter que le timing de fonctionnement du moteur js et du moteur de rendu s'excluent mutuellement (certains livres l'appellent le thread UI).

Par conséquent, nous avons besoin que les scripts chargés de rendre la page plus belle et plus facile à utiliser doivent être chargés immédiatement, tandis que les scripts qui peuvent être chargés plus tard doivent être chargés plus tard.

1. Exécution retardée du script

Il est de plus en plus courant de placer des scripts à la fin de la balise De cette manière, d'une part, les utilisateurs peuvent voir la page plus rapidement et, d'autre part, les scripts peuvent opérer directement sur les éléments DOM chargés. Pour la plupart des scripts, ce « déplacement » constitue une énorme amélioration. Le modèle de page est le suivant——

Copier le code Le code est le suivant :

Cela accélère considérablement le temps de rendu de la page, mais sachez que cela peut donner à l'utilisateur la possibilité d'interagir avec la page avant que le bodyScript ne soit chargé. La raison en est que le navigateur ne peut pas charger ces scripts tant que le document entier n'a pas été chargé, ce qui peut constituer un goulot d'étranglement pour les documents volumineux envoyés via des connexions lentes.

Idéalement, le chargement du script devrait se produire simultanément au chargement du document et ne pas affecter le rendu du DOM. De cette façon, vous pouvez exécuter le script une fois que le document est prêt car les scripts ont déjà été chargés dans l'ordre des balises <script> </p> <p></p> <p>Nous pouvons utiliser le report pour remplir cette exigence, c'est-à-dire - </p> <p><br> </p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="92200" class="copybut" id="copybut92200" onclick="doCopy('code92200')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code92200"> <br> <script src="deferredScript.js"></script>