Maison > Article > interface Web > Explication des méthodes pour implémenter la synchronisation et le chargement asynchrone des fichiers JavaScript

Explication des méthodes pour implémenter la synchronisation et le chargement asynchrone des fichiers JavaScript

巴扎黑original: 2017-08-21 09:38:152072parcourir

Cet article présente principalement le code d'implémentation du chargement synchrone et asynchrone des fichiers JavaScript, qui a une certaine valeur de référence. Ceux qui sont intéressés peuvent en apprendre davantage sur les

références aux fichiers JS, bien qu'il existe actuellement de nombreux frameworks et. les outils (tels que webpack, commonjs, requirejs, etc.) sont bien gérés. Mais en dehors de ces frameworks, il est toujours utile de comprendre la méthode de chargement native. Cet article décrit brièvement les méthodes de chargement synchrone et asynchrone de certains fichiers js. Le

Le chargement synchrone

peut être inséré dans le fichier html avec la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a quand vous apprenez pour la première fois.

Préparez deux fichiers js comme suit :

calc1.js

console.log(&#39;calc1 loading begin&#39;)

function add(...args) {
  return args.reduce((currentTotal, i) => currentTotal + i, 0);
}
console.log(&#39;calc1 loading end&#39;)

calc2.js

console.log(&#39;calc2 loading begin&#39;)

console.log(add(1,2,3))

console.log(&#39;calc2 loading end&#39;)

calc2.js dépend de calc1.js.

le fichier html est le suivant :

<body>

  <script src="calc1.js">
  </script>
  
  <script src="calc2.js">
  </script>
</body>

De cette façon, le chargement du fichier est synchrone. Autrement dit, calc2.js n'est chargé qu'après le chargement de calc1.js, il est donc garanti que calc2.js peut toujours appeler correctement la fonction d'ajout dans calc1. Les résultats du débogage dans Chrome sont les suivants :

Cependant, les inconvénients du chargement synchrone sont également évidents s'il y a plusieurs fichiers, le temps de chargement total sera très long et. l'interface utilisateur sera bloquée.

Chargement asynchrone via Script Element

L'avantage du chargement asynchrone est qu'il peut charger plusieurs fichiers js en même temps, et parce qu'il est asynchrone, il ne bloquera pas l'interface utilisateur et offrira une bonne expérience utilisateur. Bien entendu, l’inconvénient est que l’ordre de chargement des fichiers dépendants ne peut être garanti.

code HTML

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    var script1 = document.createElement(&#39;script&#39;);
    script1.src=&#39;calc1.js&#39;;
    script1.type=&#39;text/javascript&#39;;

    var script2 = document.createElement(&#39;script&#39;);
    script2.src=&#39;calc2.js&#39;;
    script2.type=&#39;text/javascript&#39;;

    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script1).appendChild(script2);
  </script>
</head>

Les résultats de débogage dans Chrome peuvent parfois être correctement affichés comme suit :

Mais parfois, comme clac1.js n'est pas chargé en premier, une erreur sera signalée lors de l'exécution de calc2.js.

Ensuite, nous devons résoudre le problème de l'ordre de chargement et nous assurer que calc1.js est chargé en premier.

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function loadScript(file, callbackFn) {
      var script = document.createElement(&#39;script&#39;);
      script.src= file;
      script.type=&#39;text/javascript&#39;;
      // 监听onload时间，当前js文件加载完成后，再加载下一个
      script.onload = callbackFn;
      document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script)
    }
    
    loadScript(&#39;calc1.js&#39;, function () {
      loadScript(&#39;calc2.js&#39;);
    } );

  </script>
</head>

De cette façon, le résultat correct sera toujours affiché.

Le chargement de fichiers JS via AJAX

 <script>
    function loadScript(file, callbackFn) {
      var xhr = new XMLHttpRequest();
      xhr.open(&#39;get&#39;, file, true);
      // for IE
      if (xhr.onreadystatechange) {
        xhr.onreadystatechange = function () {
          console.log(xhr.readyState, xhr.status);
          if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
              insertScriptText(xhr.responseText);
              if (callbackFn) {
                callbackFn();
              }
            }
          }
        }
      } else {
        xhr.onload = function () {
          insertScriptText(xhr.responseText);
          if (callbackFn) {
            callbackFn();
          }
        }
      }
      xhr.send(null);
    }

    function insertScriptText(scriptText) {
      var script = document.createElement(&#39;script&#39;);
      script.type = &#39;text/javascript&#39;;
      script.text = scriptText;
      document.body.appendChild(script);
    }

    loadScript(&#39;calc1.js&#39;, function () {
      loadScript(&#39;calc2.js&#39;);
    });

  </script>

peut également afficher les résultats correctement .

Résumé

S'il s'agit d'un seul ou de quelques fichiers js, vous pouvez insérer une balise de script en fin du corps HTML à charger de manière synchrone. Webpack fusionne en fait plusieurs fichiers js en un seul, puis insère des références de script dans le corps.

S'il existe plusieurs fichiers js, il est recommandé de les charger de manière asynchrone pour éviter de bloquer le rendu de l'interface et raccourcir le temps de chargement global. Cet article présente deux méthodes, l'élément de script et Ajax, et fournit également des exemples de séquence de chargement de fichiers avec dépendances.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de setTimeout() et setInterval() dans les minuteries JavaScriptArticle suivant：Explication détaillée de setTimeout() et setInterval() dans les minuteries JavaScript

Articles Liés

Voir plus