Heim >Web-Frontend >js-Tutorial >Implementieren Sie eine leistungsstarke JavaScript-Ausführung und laden Sie_Grundkenntnisse

Implementieren Sie eine leistungsstarke JavaScript-Ausführung und laden Sie_Grundkenntnisse

WBOYOriginal: 2016-05-16 15:16:521698Durchsuche

Der Browser verwendet einen einzigen Prozess bei der Verarbeitung der HTML-Seitenwiedergabe und der JavaScript-Skriptausführung. Wenn der Browser also beim Rendern von HTML auf das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a stößt, führt er zuerst den Code im Tag aus (sofern das src-Attribut verwendet wird). Die geladene externe Linkdatei wird zuerst heruntergeladen und dann ausgeführt. Während dieses Vorgangs werden das Rendern und die Interaktion der Seite blockiert.

...Obwohl es Blockierungen geben wird, gibt es dennoch mehrere Möglichkeiten, die Auswirkungen von JavaScript auf die Leistung zu reduzieren.

1. Der Speicherort des Skript-Tags

Wenn 3f1c4e4b6b16bbbd69b2ee476dc4f83a in 93f0f5c25f18dab9d176bd4f6de5d30e erscheint, wie zum Beispiel:

<head>
  <script type="text/javascript" src="js1.js"></script>
  <script type="text/javascript" src="js2.js"></script>
  <script type="text/javascript" src="js3.js"></script>
</head>

Wenn mehrere js-Dateien geladen werden, lädt der Browser zuerst den js-Code herunter und führt ihn aus, wodurch das Rendern der Seite blockiert wird und eine Seite mit weißem Bildschirm angezeigt wird (der Browser rendert keinen Inhalt auf der Seite, bis er den 6c04bd5ca3fcae76e30b72ad730ca86d analysiert). tag) ), gibt es keine Möglichkeit zur Vorschau oder Interaktion, was eine sehr schlechte Benutzererfahrung darstellt.

Hinweis:

Moderne Browser unterstützen nur das parallele Herunterladen externer Ressourcen. 3f1c4e4b6b16bbbd69b2ee476dc4f83a blockiert keine anderen 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags.
Das Herunterladen von JavaScript-Ressourcen erfolgt asynchron, die Ausführung von JavaScript-Code erfolgt jedoch weiterhin synchron, was ebenfalls zu Blockierungen führt.
Daher ist es eine relativ häufige JavaScript-Optimierungsmethode, 3f1c4e4b6b16bbbd69b2ee476dc4f83a am Ende des 6c04bd5ca3fcae76e30b72ad730ca86d-Tags zu platzieren, um sicherzustellen, dass die Seitenwiedergabe abgeschlossen ist.

2. Mehrere Skript-Tags zusammenführen

Wenn der Browser HTML analysiert und auf 3f1c4e4b6b16bbbd69b2ee476dc4f83a trifft, kommt es aufgrund der Ausführung des Skripts zu einer gewissen Verzögerung. Bei externen Links mit src-Attributen wird es noch schlimmer sein Mehr Leistungsaufwand. Die Minimierung dieser Verzögerung ist auch eine Optimierungsmethode, um die Anzahl der HTTP-Anfragen zu reduzieren, die Anzahl der Drei-Wege-Handshakes und der redundanten HTTP-Header-Übertragung zu reduzieren, die Antwortzeit zu verkürzen und die Benutzererfahrung zu verbessern. Es gibt viele Lösungen und Tools zum Zusammenführen von js im Internet, die hier nicht beschrieben werden.

3. Verwenden Sie die nicht blockierende Methode, um JavaScript herunterzuladen

Verwenden Sie die Attribute „defer“ und „async“ des Skript-Tags
Verwenden Sie dynamisch erstellte Skript-Tags, um JavaScript-Code herunterzuladen und auszuführen
Verwenden Sie das XHR-Objekt, um JavaScript-Code herunterzuladen und in die Seite einzufügen

3.1. Verwenden Sie die Attribute „defer“ und „async“ des Skript-Tags

Die Attribute async und defer werden beide zum asynchronen Laden von js-Dateien verwendet und blockieren andere Browserprozesse während des Vorgangs nicht. Der Unterschied besteht darin, dass async nach dem Laden automatisch ausgeführt wird, während defer warten muss, bis die Seite geladen wird Es ist zu beachten, dass diese beiden Attribute im 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag mit dem src-Attribut (externes Link-Skript) enthalten sein müssen. Unten ist die Demo:

<!DOCTYPE html>
<html>
<head>
  <title>defer example</title>
</head>
<body>
  <script type="text/javascript" src="defer.js" defer></script>
  <script>
    alert("script");
  </script>
  <script>
    window.onload= function(){
      alert("load");
    }
  </script>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
  <div class="demo">defer demo</div>
</body>
</html>

//Die Datei defer.js enthält nur eine Codezeile: warning("defer");
Das asynchrone Beispiel hat auch die gleiche Seitenstruktur. Ich werde das Beispiel hier nicht zeigen. Sie können auf den Link unten klicken.
Klicken Sie hier für den Link zum Aufschieben des Beispiels!
Klicken Sie hier für den Link zum Asynchron-Beispiel!

Obwohl die Seitenstruktur gleich ist, gibt es einen Unterschied

Öffnen Sie defer.html und Sie werden Folgendes sehen: Das Warnfeld „script“ wird angezeigt => Die Seite rendert Text => Das Warnfeld „defer“ wird angezeigt => Das Warnfeld „load“ wird angezeigt erscheint
Öffnen Sie async.html und Sie werden Folgendes sehen: Das Warnfeld für „script“ wird angezeigt => Das Warnfeld für „async“ wird angezeigt => Die Seite rendert Text => Das Warnfeld für „load“ wird angezeigt

3.2. Verwenden Sie dynamisch erstellte Skript-Tags, um JavaScript-Code herunterzuladen und auszuführen

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.getElementByTagName("head")[0].appendChild(script);

file.js beginnt mit dem Herunterladen, wenn das Skriptelement zur Seite hinzugefügt wird. Der Vorteil dieser Methode besteht darin, dass das Herunterladen und Ausführen von file.js andere Prozesse auf der Seite nicht blockiert.

Aus der Demo ist ersichtlich, dass die dynamische Lademethode den Text auf der Seite sehen kann, bevor das Warnfeld angezeigt wird, die normale Methode jedoch den Text auf der Seite erst sehen kann, nachdem das Warnfeld angezeigt wird.

Wir können eine browserübergreifende Funktion kapseln, die Skriptskripte liest und Skript-Tags dynamisch erstellt:

function loadScript(url,callback){
  var script = document.createElement("script");
  script.type = "text/javascript";
  //检测客户端类型
  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("head")[0].appendChild(script);
}

Diese Art der dynamischen Skriptlademethode ist gut kompatibel und relativ einfach. Es handelt sich um eine häufig verwendete nicht blockierende Lösung.

3.3. Verwenden Sie das XHR-Objekt, um JavaScript-Code herunterzuladen und in die Seite einzufügen

Eine andere Möglichkeit, Skripte ohne Blockierung zu laden, besteht darin, das XMLHttpRequest-Objekt (XHR) zu verwenden, um das Skript abzurufen und in die Seite einzufügen.
Bei dieser Technik wird zunächst ein XHR-Objekt erstellt, dann eine JavaScript-Datei heruntergeladen und schließlich der Code über ein gemeinsames dynamisches 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Element in die Seite eingefügt.

var xhr = new XMLHttpRequest();
xhr.open("get","file.js",true);
xhr.onreadystatechange = function(){
  if(xhr.readyState===4){
    if(xhr.status>=200&&xhr.status<300||xhr.status==304){
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.text = xhr.responseText;
      document.body.appendChild(script);
    }
  }
}

以上代码发送GET请求file.js文件,onReadyStateChange检测readyState是否为4(4表示请求完成)和HTTP状态吗是否有效(200表示有效响应,304表示读取缓存)。判断响应有效之后,就动态创建一个3f1c4e4b6b16bbbd69b2ee476dc4f83a标签,内容就是服务器接收到的responseText。

这种方法的优点以及缺点:

优点:下载JavaScript代码可以不立即执行,且兼容性好适合所有主流浏览器。
缺点:JavaScript文件必须与所请求页面处于同一个域,这种情况下JavaScript文件不能从CDN下载,不适合大型的Web应用。

4.一种推荐的无阻塞方案

如果页面有大量的JavaScript代码需要添加,可以先在页面中去外链之前我们封装好的动态读取script脚本的函数loadScript,然后再使用它去加载其他所需脚本,例如:

<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
  loadScript("file.js",function(){
    //do something
  });
</script>

这样只需在第一个3f1c4e4b6b16bbbd69b2ee476dc4f83a下载比较精简的loader.js文件时对页面有些许影响,之后的3f1c4e4b6b16bbbd69b2ee476dc4f83a并不会有太多影响。

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：Bestimmen Sie anhand Ihrer JavaScript-Kenntnisse, ob der Browser geschlossen oder aktualisiert wirdNächster Artikel：Bestimmen Sie anhand Ihrer JavaScript-Kenntnisse, ob der Browser geschlossen oder aktualisiert wird

In Verbindung stehende Artikel

Mehr sehen