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

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

WBOY

Libérer： 2016-05-16 16:24:00

original

1150 Les gens l'ont consulté

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 :

Script de chargement asynchrone

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>

Ajouter l'attribut defer équivaut à dire au navigateur : Veuillez commencer à charger ce script maintenant, mais veuillez attendre que le document soit prêt et que tous les scripts précédents avec l'attribut defer aient fini de s'exécuter avant de l'exécuter.

De cette façon, placer le script delay dans la balise head apportera tous les avantages de placer le script dans la balise body, et cela augmentera également considérablement la vitesse de chargement des documents volumineux. Le mode page en ce moment est——

Mais tous les navigateurs ne prennent pas en charge le defer (pour certains navigateurs modernes, si defer est déclaré, leurs scripts internes n'effectueront pas les opérations de rendu document.write et DOM. IE4 prend tous en charge l'attribut defer). Cela signifie que si vous voulez vous assurer que votre script retardé peut s'exécuter après le chargement du document, vous devez encapsuler tout le code du script retardé dans une structure telle que $(document).ready de jQuery. Cela en vaut la peine, car près de 97 % de vos visiteurs bénéficient des avantages du chargement parallèle, tandis que les 3 % restants ont toujours accès à du JavaScript entièrement fonctionnel.

Accélérer le chargement et l'exécution des scripts. Je ne veux pas attendre que les scripts différés s'exécutent les uns après les autres (le report nous rappelle un scénario de file d'attente ordonnée consistant à attendre tranquillement que le document se charge), ni Je veux attendre que le document soit prêt avant d'exécuter ces scripts, je veux charger le plus rapidement possible et exécuter ces scripts le plus rapidement possible. L’attribut async du HTML5 vient ici à l’esprit, mais sachez qu’il s’agit d’une anarchie chaotique.

Par exemple, nous chargeons deux scripts tiers totalement indépendants, la page fonctionne très bien sans eux, et nous ne nous soucions pas de savoir lequel s'exécute en premier et lequel s'exécute en dernier. Par conséquent, utiliser l’attribut async sur ces scripts tiers équivaut à améliorer leur vitesse d’exécution sans dépenser un centime.

L'attribut async est nouveau dans HTML5. La fonction est similaire à defer, qui permet le rendu DOM lors du téléchargement du script. Cependant, il sera exécuté dès que possible après le téléchargement (c'est-à-dire que le moteur JS sera exécuté dès qu'il sera inactif), et il n'y a aucune garantie que le script sera exécuté dans l'ordre. Ils se termineront avant l’événement onload.

Firefox 3.6, Opera 10.5, IE 9 et les derniers Chrome et Safari prennent tous en charge l'attribut async. Vous pouvez utiliser async et defer en même temps, de sorte que tous les IE après IE 4 prennent en charge le chargement asynchrone, mais sachez que async écrasera le defer.

Faites attention à l'ordre d'exécution ici - chaque fichier de script est chargé, puis headScript.js est exécuté, puis defferedScript.js est chargé en arrière-plan pendant le rendu du DOM. Puis à la fin du rendu DOM, defferedScript.js et les deux scripts asynchrones seront exécutés. Il est à noter que pour les navigateurs prenant en charge l'attribut async, ces deux scripts s'exécuteront dans le désordre.

Bien que les fonctions des deux attributs de script ci-dessus soient très attrayantes, elles ne sont pas largement utilisées en raison de problèmes de compatibilité. Par conséquent, nous utilisons plus souvent des scripts pour charger d’autres scripts. Par exemple, nous souhaitons uniquement charger un script pour les utilisateurs qui remplissent certaines conditions, ce que l'on appelle souvent "chargement paresseux".

Au niveau de l'API du navigateur, il existe deux manières raisonnables de récupérer et d'exécuter des scripts de serveur -

1> Générer une requête ajax et utiliser la fonction eval pour traiter la réponse