wake-up-neo.com

mehrere oder einzelne Skript-Tags

Gibt es einen Unterschied (Leistung, bewährte Vorgehensweisen usw.) zwischen der Verwendung eines einzelnen Skript-Tags mit eingebettetem Code oder der Verwendung mehrerer Skript-Tags mit demselben Code, der im gesamten HTML-Code verteilt ist?

Zum Beispiel:

<script>
    foo();
</script>
...
<script>
    bar();
</script>

gegen:

<script>
    foo();
    bar();
</script>

Vielen Dank

javascripthtmlscript-tag
42
Assaf Shemesh

Mit inline Skript wie dem, was Sie zitiert haben, ist es unwahrscheinlich, dass much difference; Jedes Mal, wenn der HTML-Parser des Browsers auf ein script-Tag stößt, gilt Folgendes:

  • Kommt zu einem schreienden Halt
  • Erzeugt einen String des Textes im Tag, bis er zum ersten Mal den String "</script>" sieht.
  • Übergibt diesen Text an den JavaScript-Interpreter und horcht auf die Ausgabe, die der Interpreter sendet, wenn Sie einen document.write ausführen.
  • Wartet, bis der Dolmetscher fertig ist
  • Fügt die gesammelte Ausgabe in den Parsing-Stream ein
  • Setzt seine Analyse fort

Eine Erhöhung der Häufigkeit, mit der diese Reihenfolge auftritt, kann theoretisch die Ladezeit Ihrer Seite erhöhen. Dies wirkt sich auch auf den Grad aus, in dem der Parser im Token-Stream nach vorne blicken kann, wodurch er möglicherweise weniger effizient ist.

All das klingt wirklich dramatisch, aber Sie müssten in den verschiedenen Browsern, die Sie interessieren, eine echte Seite profilieren, um festzustellen, ob sie eine Auswirkung auf die Realität hat.

Zusammengefasst, kombinieren Sie sie so viel, wie Sie dies vernünftigerweise können. Wenn Sie ein Paar nicht vernünftig kombinieren können, machen Sie sich nicht zu viele Sorgen, bis Sie ein reales Problem sehen.

Das obige ist für Inline-Skript. Wenn Sie über mehrere script-Tags verfügen, die sich auf mehrere externe JavaScript-Dateien beziehen, haben Sie natürlich auch das Problem, dass jede dieser Dateien heruntergeladen werden muss. Das Initiieren einer HTTP-Anforderung ist (vergleichsweise) eine teure Angelegenheit und daher das Beste im großen und ganzen, diese in einer einzigen Datei zusammenzufassen.

Einige andere Dinge zu beachten:

  • Wenn viele script-Tags in Ihrem HTML-Code verstreut sind, kann es schwierig sein, das Skript zu warten
  • Durch die Trennung von HTML und Skript in separate Dateien können Sie den Grad der Kopplung einschränken, was wiederum die Wartung erleichtert
  • Wenn Sie das Skript in einer separaten Datei ablegen, können Sie diese Datei durch Minifier/Kompressoren/Packer ausführen, die Größe des Codes minimieren und Kommentare entfernen. So können Sie in Ihrem Quellcode Kommentare abgeben, wenn Sie wissen, dass diese Kommentare privat sind
  • Wenn Sie Ihre Skripts in externe Dateien ablegen, haben Sie die Möglichkeit, die Dinge nach Funktionalität zu trennen und sie dann in einer einzigen Datei für die Seite (komprimiert/minifiziert/gepackt) zu kombinieren, um sie effizient an den Browser zu übermitteln

Mehr:

41
T.J. Crowder

Die Kombination Ihrer Skripte so gut wie möglich ist meiner Meinung nach besser. Einige Browser müssen während der Ausführung von Skriptblöcken das Rendering anhalten. Antworten finden Sie unter: Javascript-Leistung: Mehrere Skriptblöcke Vs einzelner größerer Block

2
Babiker

Bis zu diesem Punkt befand sich der gesamte JavaScript-Code in einem Tag. Dies muss nicht der Fall sein.

Sie können beliebig viele Tags in einem Dokument haben.

Die Tags werden so verarbeitet, wie sie angetroffen werden.

Hoffe das hilft.

2
user812254

Ich benutze mehrere Tags. Eine für die Diashow von Bildern und eine für die Diashow von Texten, sodass ich beide auf derselben Webseite haben kann - Diashow von Bildern und Diashow von Texten.

0
Edwin H Oudit

Einige argumentieren, dass es am besten ist, alle Skripts in einem einzigen Skriptblock oder einer einzelnen Skriptdatei zu kombinieren, nur das wirklich benötigte Javascript zu laden und es so spät wie möglich zu laden, um die Wiedergabe von HTML nicht zu verlangsamen.

Abgesehen davon bin ich sicher, dass die Verwendung eines einzelnen Skriptblocks schneller lädt als die Verwendung mehrerer Skriptblöcke, da sie einzeln ausgewertet werden müssen. Dieser Unterschied ist jedoch möglicherweise nicht erkennbar.

0
Till