suchen

Heim  >  Artikel  >  Web-Frontend  >  Erläuterung der Methoden zur Implementierung der Synchronisierung und des asynchronen Ladens von JavaScript-Dateien

Erläuterung der Methoden zur Implementierung der Synchronisierung und des asynchronen Ladens von JavaScript-Dateien

巴扎黑
巴扎黑Original
2017-08-21 09:38:152144Durchsuche

In diesem Artikel wird hauptsächlich der Implementierungscode für das synchrone und asynchrone Laden von JavaScript-Dateien vorgestellt, der einen gewissen Referenzwert hat. Interessierte können sich über

Referenzen auf JS-Dateien informieren, obwohl es derzeit viele Frameworks gibt Tools (wie Webpack, CommonJS, RequireJS usw.) werden gut gehandhabt. Abgesehen von diesen Frameworks ist es jedoch immer noch hilfreich, die native Lademethode zu verstehen. In diesem Artikel werden kurz die synchronen und asynchronen Lademethoden einiger js-Dateien beschrieben.

Synchrones Laden

kann mit dem 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag eingefügt werden wenn Sie zum ersten Mal lernen.

Bereiten Sie zwei js-Dateien wie folgt vor:

calc1.js


console.log('calc1 loading begin')

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

calc2.js


console.log('calc2 loading begin')

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

console.log('calc2 loading end')

calc2.js hängt von calc1.js ab.

HTML-Datei lautet wie folgt: 


<body>

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

Auf diese Weise erfolgt das Laden der Datei synchron. Das heißt, calc2.js wird erst geladen, nachdem calc1.js geladen wurde, sodass garantiert ist, dass calc2.js die Add-Funktion in calc1 immer korrekt aufrufen kann. Die Debugging-Ergebnisse in Chrome lauten wie folgt:

Allerdings liegen auch die Nachteile des synchronen Ladens auf der Hand. Wenn mehrere Dateien vorhanden sind, ist die Gesamtladezeit sehr lang Die Benutzeroberfläche wird blockiert.

Asynchrones Laden über Skriptelement

Der Vorteil des asynchronen Ladens besteht darin, dass mehrere JS-Dateien gleichzeitig geladen werden können. Da es asynchron ist, blockiert es die Benutzeroberfläche nicht und bietet eine gute Benutzererfahrung. Der Nachteil besteht natürlich darin, dass die Ladereihenfolge abhängiger Dateien nicht garantiert werden kann.

HTML-Code


<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>

Die Debugging-Ergebnisse in Chrome können manchmal korrekt wie folgt ausgegeben werden:

Aber manchmal wird beim Ausführen von calc2.js ein Fehler gemeldet, weil clac1.js nicht zuerst geladen wird.

Dann müssen wir das Problem der Ladereihenfolge lösen und sicherstellen, dass calc1.js zuerst geladen wird. 


<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>

So wird immer das richtige Ergebnis ausgegeben.

Das Laden von JS-Dateien über 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>

kann die Ergebnisse auch korrekt ausgeben .

Zusammenfassung

Wenn es sich um eine einzelne oder mehrere js-Dateien handelt, können Sie an der Stelle ein Skript-Tag einfügen Ende des HTML-Körpers zum synchronen Laden. Webpack führt tatsächlich mehrere JS-Dateien zu einer zusammen und fügt dann Skriptreferenzen in den Textkörper ein.

Wenn mehrere js-Dateien vorhanden sind, wird empfohlen, diese asynchron zu laden, um eine Blockierung des Schnittstellen-Renderings zu vermeiden und die Gesamtladezeit zu verkürzen. In diesem Artikel werden zwei Methoden vorgestellt, Skriptelement und Ajax, und außerdem Beispiele für die Ladesequenz von Dateien mit Abhängigkeiten bereitgestellt.

Das obige ist der detaillierte Inhalt vonErläuterung der Methoden zur Implementierung der Synchronisierung und des asynchronen Ladens von JavaScript-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erklärung von setTimeout() und setInterval() in JavaScript-TimernNächster Artikel：Detaillierte Erklärung von setTimeout() und setInterval() in JavaScript-Timern

In Verbindung stehende Artikel

Mehr sehen