Ist es besser, den JS-Code in der HTML-Datei oder in einer externen Datei abzulegen?


15

Wenn ich eine einseitige Website entwerfe, ist es besser, eine externe Datei für meinen JS-Code zu erstellen oder sie einfach in den HTML-Code einzufügen? Ist das Laden der Seite schneller? Kann ich die Berechtigungen ändern, um die Benutzeranforderungen für den Code abzulehnen, aber die HTML-Seite kann den Code trotzdem aufrufen?

Antworten:


25

Sie sollten Ihren JS-Code in einer separaten Datei ablegen, da dies das Testen und Entwickeln erleichtert. Die Frage, wie Sie den Code bedienen, ist eine andere.

  • Die getrennte Bereitstellung von HTML und JS hat den Vorteil, dass ein Client die JS zwischenspeichern kann. Dazu müssen Sie entsprechende Header senden, damit der Client nicht jedes Mal eine neue Anforderung ausgibt. Caching ist problematisch, wenn Sie ein Update durchführen und damit die Client-Caches ungültig machen möchten. Eine Methode besteht darin, eine Versionsnummer in den Dateinamen aufzunehmen, z /static/mylibrary-1.12.2.js.

    Wenn sich das JS in einer separaten Datei befindet, können Sie den Zugriff darauf nicht einschränken: Es ist schwierig (technisch gesehen unmöglich) festzustellen, ob eine Anforderung an eine JS-Datei gestellt wurde, weil Sie auf diese auf Ihrer HTML-Seite verwiesen haben oder weil jemand sie herunterladen möchte direkt. Sie können jedoch Cookies verwenden und sich weigern, Kunden zu bedienen, die bestimmte Cookies nicht senden (aber das wäre dumm).

  • Durch die Bereitstellung des JS im HTML-Code wird die Größe jeder Seite erhöht. Dies ist jedoch in Ordnung, wenn ein Client wahrscheinlich nicht mehrere Seiten anzeigt. Da der Client keine separate Anforderung für das JS ausgibt, lädt diese Strategie die Seite schneller - zumindest zum ersten Mal, aber es gibt einen Break-Even-Punkt, an dem das Caching besser ist. Sie können das JS zB über PHP einbinden.

    Hier benötigt der Client keinen separaten Zugriff auf die JS-Datei, die bei Bedarf ausgeblendet werden kann. Trotzdem kann jeder den JS-Code im HTML-Code anzeigen.

Andere Strategien zur Minimierung der Ladezeiten umfassen

  • JS- Minimierung , die die Größe der von Ihnen bereitgestellten JS-Datei verringert. Da die Minimierung beim Bereitstellen des Codes nur einmal erfolgt, ist dies eine sehr effiziente Methode zum Speichern von Bytes. OTOH dies macht Ihren Code für interessierte Besucher schwieriger zu verstehen.

    Im Zusammenhang mit der Minimierung werden alle Ihre JS-Dateien in einer einzigen Datei zusammengefasst. Dies reduziert die Anzahl der erforderlichen Anforderungen.

  • Komprimierung, die einen zusätzlichen Rechenaufwand für jede Anforderung sowohl auf dem Client als auch auf dem Server verursacht. Der Zeitaufwand für das (Dekomprimieren) ist jedoch in der Regel geringer als der Zeitaufwand für die Übertragung der unkomprimierten Daten. Die Komprimierung wird normalerweise transparent von der Serversoftware durchgeführt.

Diese Techniken gelten auch für andere Ressourcen wie Bilder.

  • Bilder können mit Daten-URLs in HTML oder CSS eingebunden werden. Dies ist nur für kleine, einfache Bilder praktisch, da die Base64-Codierung die Größe erhöht. Dies kann immer noch schneller sein als eine andere Anfrage.
  • Mehrere kleine Bilder (Symbole, Schaltflächen) können zu einem einzigen Bild kombiniert und dann als Sprites extrahiert werden.
  • Bilder können vom Server auf die Größe reduziert werden, in der sie tatsächlich auf der Website verwendet werden, wodurch Bandbreite gespart wird. Vergleichen Sie Miniaturbilder.
  • Bei einigen Grafiken können textbasierte Bilder wie SVG viel kleiner sein.

"Einfacher Test und Entwicklung", ich bin mir nicht sicher, ob es immer hilfreich ist, JS für diesen Zweck in einer eigenen Datei zu haben. In einem Projekt verwende ich sehr kleine HTML-Dateien, und es ist eigentlich besser organisiert, sie in den HTML-Code einzubeziehen. Was das Cachen angeht, kann es die Geschwindigkeit bei mehreren Besuchen verbessern (vielleicht), aber für das Laden der ersten Seite wird es immer schneller sein, das Javascript direkt in den HTML-Code aufzunehmen.
YungGun

5

Ich entwerfe eine einseitige Website

Wenn Sie buchstäblich nur eine Seite haben, dann ist es aus Performance-Sicht besser, alles in einer Datei bereitzustellen ... Stylesheets, JavaScript und sogar Bilder (kleine Bilder mit Daten-URIs). Dadurch entfallen die zusätzlichen HTTP-Anforderungen, die zum Abrufen von externen Ressourcen erforderlich sind, die relativ langsam sind.

Die resultierende Datei sollte vor dem Serving gezippt werden, wodurch die Größe der Ganztextantwort massiv reduziert wird.

Sie sollten weiterhin in Betracht ziehen, große Bilder außerhalb der Seite zu haben, da die Größe der Daten-URIs und die Browserkompatibilität begrenzt sind. (IE8 hat beispielsweise ein Limit von 32 KB, was aufgrund der Art der Base64-Codierung einer tatsächlichen Dateigröße von ca. 23 KB entspricht.)

Kann ich die Berechtigungen ändern, um die Benutzeranforderungen für den Code abzulehnen, aber die HTML-Seite kann den Code trotzdem aufrufen?

Nein. Bestenfalls kann der Code verschleiert werden, um ihn vor dem zufälligen Beobachter zu "verbergen", aber er bietet keinen wirklichen Schutz.


1
Warum die negative Abstimmung? Während es für Entwicklungs- und mehrseitige Websites besser ist, separate / externe Dateien zu haben, fragt das OP in diesem Fall speziell nach einer "einseitigen Website" und ob sie "schneller zu laden" ist. Das Minimieren von HTTP-Anforderungen sollte in dieser Instanz Priorität haben. Sie können (und sollten) weiterhin mit mehreren Dateien entwickeln, aber das ist nicht die Frage, die gestellt wird.
MrWhite

Indem Sie js, css und images in getrennten Dateien ablegen, ermöglichen Sie dem Browser, die Dateien zwischenzuspeichern. Wenn sich der Seiteninhalt ändert, muss nur der HTML-Code neu geladen werden.
Thierry J.

@ThierryJ. Okay, Sie können die Dateien zwischenspeichern, aber beim Laden der ersten Seite (was sehr wichtig ist, um neue Benutzer zu gewinnen) ist es immer noch viel schneller, alle Dateien einzuschließen, da das Zwischenspeichern nicht wirksam ist. Außerdem muss der Computer die zwischengespeicherte Datei noch laden. Dieser Schritt wird vollständig übersprungen, wenn Sie die Datei in den HTML-Code einfügen. Es wird wahrscheinlich in fast jedem Fall schneller sein, nur die Datei in den HTML-Code aufzunehmen. Sie müssen den HTML-Code sowieso neu laden, und der Javascript-Anteil kann nicht mehr als hundert KB betragen, er ist vernachlässigbar.
YungGun

4

Der clientseitige JS-Code muss vom Browser gesehen werden (dh, wenn die Seite JS direkt verwenden muss) - das bedeutet, dass er vom Browser heruntergeladen werden muss.

Ein Browser kann JS nicht auf der Seite verwenden, wenn er es nicht herunterladen kann.

In dieser Hinsicht macht es keinen Unterschied, ob Sie das JS einbinden oder in eine Datei einfügen, obwohl es gängige Praxis ist, eine JS-Datei zu verwenden (Trennung von Bedenken für eine).

Wenn Sie Code haben, den Sie nicht für den Browser verfügbar machen möchten, müssen Sie serverseitigen Code verwenden (z. B. node.js, php, perl, asp.net, jsp - es gibt so viele Optionen) und damit interagieren über den Browser - entweder beim Laden der ersten Seite oder mit AJAX .


2

Nun, es hängt von der Menge des Codes ab und davon, wie ernst es Ihnen ist, Programmierer / Software-Ingenieur zu sein, und nicht nur ein Programmierer. Ich habe mit einigen Designern zusammengearbeitet, die kurze Code-Schnipsel direkt in HTML eingefügt haben, und während ich mich zusammengekauert habe, hat es tatsächlich funktioniert.

Obwohl ich das nicht selbst machen würde, und wenn Sie Best Practices der Softwareentwicklung kennenlernen möchten, rate ich Ihnen dringend, alles in eine externe *.jsDatei zu packen und über <script>Tags zu laden .

In Bezug auf Ihren zweiten Punkt können Sie weder dem Benutzer noch dem Browser die Anzeige Ihres Codes verweigern. Es gibt etwas, obfuscationdas Ihren Code schwerer lesbar macht, die Leistung wird jedoch beeinträchtigt.


1

ist es besser, eine externe Datei für meinen JS-Code zu erstellen oder sie einfach in den HTML-Code einzufügen?

Es ist besser, eine externe Datei für Ihren JS-Code zu erstellen. Es ist auch besser, eine oder zwei Dateien zu haben, die Sie dem Client zur Verfügung stellen. Es ist jedoch auch besser, Ihren JS-Code aus Gründen der Wartbarkeit auf mehrere Dateien aufzuteilen. Dazu können Sie Präprozessoren wie Gulp verwenden , die Ihre verschiedenen JS-Dateien zu einer Datei kombinieren.

Es ist besser, weniger Dateien bereitzustellen, da der Client weniger HTTP-Anforderungen verarbeiten muss.

Ist das Laden der Seite schneller?

Ja, offensichtlich ist es schneller, da Sie nur eine Anforderung für den HTML-Code ausführen, während Sie viele Anforderungen (mindestens zwei) mit Ihrem JS-Code als externem Code ausführen. Dies ist nur dann der Fall, wenn Ihr JS-Code auf keiner Seite minimiert ist und dies nicht berücksichtigt, wie schwierig es sein wird, Ihren Code zu verwalten, wenn alles in einer einzigen HTML-Seite enthalten ist.

Kann ich die Berechtigungen ändern, um die Benutzeranforderungen für den Code abzulehnen, aber die HTML-Seite kann den Code trotzdem aufrufen?

Nein, kannst du nicht. JS-Code ist wie CSS-Code und HTML-Code statischer Inhalt. Das heißt, sobald es im Browser ist, kann der Client es und seinen Inhalt vollständig herunterladen. Jede einzelne Datei, jedes Bild und jedes Skript kann heruntergeladen werden. Aber können Sie minify / uglify Ihren Code , so dass es schwieriger für einen Menschen , es zu benutzen. Das ist nur eine Folge der Verhäßlichung, das wurde gemacht erste für die Leistung.


0

Viele Vorteile der Trennung von HTML- und Javascript-Inhalten in separate Dateien:

  • Erhöht die Lesbarkeit einzelner Dateien
  • da der javascript code nicht mehr in einer html datei enthalten ist, können die anderen html und javascript dateien oder bibliotheken ihren javascript code verwenden
  • In ähnlicher Weise kann Javascript-Code, der in eine separate Datei gestellt wird, problemlos andere Dateien und erweiterte Bibliotheken verwenden, um komplexe Berechnungen durchzuführen (maschinelles Lernen, 3D-Grafiken, Framework usw., Bibliotheken).
  • Javascript kann auf der Client-Seite zwischengespeichert werden und dadurch muss nur der HTML-Inhalt bei der Seitenaktualisierung neu geladen werden
  • Gute / moderne Softwareentwicklungspraktiken können einfacher auf eine separate Javascript-Datei / ein separates JavaScript-Modul / eine separate JavaScript-Bibliothek angewendet werden (Entwurfsmuster, Informationen zu Typoskript / Babel usw.).
  • JavaScript-Code kann durch Minimierung / Uglifizierung leicht für die Besucher der Webseite verschleiert oder "verborgen" werden
  • Javascript - Dateien können durch gulp, webpack usw. zu einer einzigen Datei / einem einzigen Modul gebündelt werden

1
dies scheint nicht zu bieten alles wesentliche über gemacht Punkte und erläuterte vor 6 Antworten
gnat
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.