Résumé des méthodes courantes de chargement de fichiers de script JavaScript en HTML

Lorsque le navigateur rencontre la balise (intégrée) 3f1c4e4b6b16bbbd69b2ee476dc4f83a, le navigateur actuel n'a aucun moyen de savoir si javaScript modifiera le contenu de la page. Par conséquent, le navigateur arrêtera de traiter la page à ce moment-là, exécutera d'abord le code javaScript, puis continuera à analyser et à afficher la page. La même situation se produit également lors du processus d'utilisation de l'attribut src pour ajouter du javaScript (c'est-à-dire du javaScript de lien externe). Le navigateur doit d'abord passer du temps à télécharger le code dans le fichier de lien externe, puis l'analyser et l'exécuter. Au cours de ce processus, le rendu des pages et l'interaction de l'utilisateur sont complètement bloqués.

En d'autres termes : chaque fois que le navigateur analyse la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a (qu'elle soit intégrée ou un lien externe), le navigateur donnera (en une seule étape) la priorité au téléchargement et à l'analyse et exécutera le javaScript. code dans la balise, bloquant le téléchargement et le rendu de tout le contenu des pages suivantes.

Méthode 1 : Approche conventionnelle

La méthode la plus traditionnelle consiste à insérer 3f1c4e4b6b16bbbd69b2ee476dc4f83a ; Étiquette.

Cependant, cette approche conventionnelle cache de sérieux problèmes de performances. D'après la description ci-dessus des caractéristiques de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, nous savons que dans cet exemple, lorsque le navigateur analyse la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a, le navigateur arrêtera d'analyser le contenu après celle-ci et téléchargera d'abord le fichier de script, puis exécutez-le. Le code qu'il contient signifie que le fichier de style test.css suivant et la balise 6c04bd5ca3fcae76e30b72ad730ca86d ne peuvent pas être chargés, la page ne peut pas être rendue. Par conséquent, la page restera vierge jusqu'à ce que le code javaScript soit complètement exécuté.

<script type="text/javaScript" src="example.js"></script>

Méthode 2 : Approche classique

Puisque la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a chargement, ne serait-il pas possible d'éviter cette mauvaise situation en plaçant la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a après tout le contenu de la page ? Placez toutes les balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a aussi près que possible du bas de la balise 6c04bd5ca3fcae76e30b72ad730ca86d afin de minimiser l'impact sur le téléchargement du reste de la page.

Le téléchargement parallèle des scripts a été implémenté sur les navigateurs IE8+, mais dans certains navigateurs (même si le fichier script est placé en bas de la balise 6c04bd5ca3fcae76e30b72ad730ca86d), les scripts de la page sont toujours chargés un après l'autre. Nous avons donc besoin de la méthode suivante, qui est : charger dynamiquement des scripts.

Méthode 3 : Script dynamique

Grâce au modèle objet de document (DOM), nous pouvons presque n'importe où sur le création de page.

<script type=&#39;text/javascript&#39;>
  var script = document.createElement(&#39;script&#39;);
  script.type = &#39;text/javaScript&#39;;
  script.src = &#39;file1.js&#39;;
  document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>

Le code ci-dessus crée dynamiquement une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a du fichier de lien externe1 et l'ajoute à la balise 93f0f5c25f18dab9d176bd4f6de5d30e Le point clé de cette technologie est :

Peu importe le moment où le téléchargement est démarré, le processus de téléchargement et d'exécution du fichier ne bloquera pas les autres processus sur la page (y compris le chargement du script).
Cependant, cette méthode est également imparfaite. Le script chargé de cette manière sera exécuté immédiatement après la fin du téléchargement, ce qui signifie que l'ordre d'exécution entre plusieurs scripts ne peut être garanti (sauf pour Firefox et Opera). Lorsqu'un script dépend d'un autre script, des erreurs sont susceptibles de se produire. Par exemple, pour écrire un code jQuery, vous devez importer la bibliothèque jQuery. Cependant, le fichier de code jQuery que vous écrivez sera probablement téléchargé en premier et exécuté immédiatement. À ce moment, le navigateur signalera une erreur : « jQuery n'est pas activé. défini' ou similaire, car jQuery n'est pas défini pour le moment. La bibliothèque n'a pas encore été téléchargée. Les améliorations suivantes ont donc été apportées :

<script type=&#39;text/javascript&#39;>
  function loadScript(url, callback) {
    var script = document.createElement(&#39;script&#39;);
    script.type = "text/javaScript";
    // IE和opera支持onreadystatechange
    // safari、chrome、opera支持onload
    if (script.readyState) {//IE
      script.onreadystatechange = function() {
        if (script.readyState == "loaded"
            || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {//其他浏览器
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
  }
</script>

L'amélioration du code ci-dessus consiste à ajouter une fonction de rappel, qui sera appelée après le chargement du fichier de script correspondant. De cette façon, un chargement séquentiel peut être réalisé. L'écriture est la suivante (en supposant que le fichier2 dépend du fichier1 et que le fichier1 et le fichier3 sont indépendants l'un de l'autre) :

loadScript(‘file1.js',function(){ loadScript(‘file2.js',function(){}); }); loadScript(‘file3.js',function(){});

le fichier2 commencera à se charger une fois le fichier1 terminé. chargé, en veillant à ce que file1 soit exécuté avant file2 Déjà préparé. File1 et file3 sont téléchargés en parallèle et ne s'influencent pas. Bien que la fonction LoadScript soit assez bonne, il y a encore quelques aspects insatisfaisants - en analysant ce code, nous savons que le chargement séquentiel dans la fonction LoadScript est implémenté en bloquant le chargement du script (comme indiqué dans le texte rouge ci-dessus). Ce que nous voulons vraiment réaliser, c'est que les scripts sont téléchargés de manière synchrone et exécutés dans l'ordre correspondant, c'est-à-dire chargés en parallèle et exécutés séquentiellement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!