it-swarm.com.de

Ist es besser, den JS-Code in die HTML-Datei oder in eine externe Datei einzufügen?

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

17
AqeelAT

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

  • Das separate Bereitstellen von HTML und JS hat den Vorteil, dass ein Client das JS zwischenspeichern kann. Dazu müssen Sie die entsprechenden Header senden, damit der Client nicht jedes Mal eine neue Anforderung ausgibt. Das Caching ist problematisch, wenn Sie ein Update durchführen und damit die Client-Caches ungültig machen möchten. Ein Verfahren 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: unmöglich) festzustellen, ob eine Anforderung an eine JS-Datei gestellt wurde, weil Sie auf Ihrer HTML-Seite darauf 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 übertragen (dies wäre jedoch albern).

  • Durch das Bereitstellen 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 einschließen, z. über PHP.

    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 Minifizierung, wodurch die Größe der von Ihnen bereitgestellten JS-Datei verringert wird. 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 schwerer verständlich.

    Im Zusammenhang mit der Minimierung steht die Praxis, alle Ihre JS-Dateien in einer einzigen Datei zu kombinieren. Dies reduziert die Anzahl der erforderlichen Anforderungen.

  • Komprimierung, die einen Rechenaufwand für jede Anforderung sowohl auf dem Client als auch auf dem Server hinzufügt. Die (de) komprimierte Zeit ist jedoch normalerweise kleiner als die Zeit, die für die Übertragung der nicht komprimierten Daten aufgewendet wird. Die Komprimierung wird normalerweise transparent von der Serversoftware behandelt.

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

  • Bilder können mit Daten-URLs in HTML oder CSS eingefügt 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.
27
amon

Ich entwerfe eine einseitige Website

Wenn Sie buchstäblich nur eine Seite haben, ist es (aus Sicht der Leistung) besser, alles in einer Datei zu liefern ... Stylesheets, JavaScript und sogar Bilder (kleine Bilder inline) mit Daten-URIs). Dadurch entfallen die zusätzlichen HTTP-Anforderungen, die zum Abrufen relativ langsamer externer Ressourcen erforderlich sind.

Die resultierende Datei sollte vor dem Bereitstellen komprimiert werden, wodurch die Größe der Ganztextantwort massiv verringert wird.

Sie sollten weiterhin große Bilder außerhalb der Seite in Betracht ziehen, da die Größe der Daten-URIs und die Browserkompatibilität begrenzt sind. (z. B. IE8 hat eine Grenze von 32 KB, was aufgrund der Art der Base64-Codierung einer tatsächlichen Dateigröße von etwa 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.

5
MrWhite

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

Sie können nicht zulassen, dass ein Browser JS auf der Seite verwendet, wenn er es nicht herunterladen kann.

In dieser Hinsicht macht es keinen Unterschied, ob Sie das JS inline oder in eine Datei einfügen, obwohl es üblich 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 mit ihm interagieren über den Browser - entweder beim ersten Laden der Seite oder mit AJAX .

4
Oded

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

Obwohl ich das nicht selbst tun würde, und wenn Sie Best Practices der Softwareentwicklung kennenlernen möchten, empfehle ich Ihnen dringend, alles in eine externe *.js - Datei zu kopieren und über <script> - Tags zu laden.

In Bezug auf Ihren zweiten Punkt, nein, Sie können dem Benutzer oder Browser nicht verweigern, Ihren Code anzuzeigen. Es gibt etwas namens obfuscation, das das Lesen Ihres Codes erschwert, die Leistung jedoch beeinträchtigt.

2
David Sergey

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, ein oder zwei Dateien zu haben, die Sie dem Client bereitstellen. Es ist jedoch auch besser, Ihren JS-Code aus Gründen der Wartbarkeit auf mehrere Dateien aufzuteilen. Um dies zu tun, 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.

Wird es schneller auf die Seite geladen?

Ja, offensichtlich ist es schneller, da Sie nur eine Anforderung für den HTML-Code ausführen, während Sie viele Anforderungen (mindestens 2) mit Ihrem JS-Code als extern ausführen würden. Dies ist nur möglich, wenn Ihr JS-Code auf beiden Seiten nicht minimiert ist, und dies berücksichtigt nicht, wie schwierig es sein wird, Ihren Code zu verwalten, wenn sich alles auf einer einzigen HTML-Seite befindet.

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 einzelne Bild und jedes einzelne Skript kann heruntergeladen werden. Aber , Sie können minifizieren/uglifizieren Ihren Code, so dass es für einen Menschen schwieriger ist, ihn zu verwenden. Dies ist nur eine Folge der Hässlichkeit, die zuerst für die Aufführung gemacht wurde.

1

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

  • erhöht die Lesbarkeit einzelner Dateien natürlich
  • da der Javascript-Code nicht mehr auf eine HTML-Datei beschränkt 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 eingefügt wird, problemlos andere Dateien und erweiterte Bibliotheken verwenden, um komplexe Berechnungen durchzuführen (maschinelles Lernen, 3D-Grafiken, Framework usw.-Bibliotheken).
  • javascript kann auf der Clientseite 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 Modul/eine Bibliothek angewendet werden (Entwurfsmuster, Informationen zu TypeScript/Babel usw.)
  • javascript-Code kann durch Minifizierung/Uglifizierung leicht von den Besuchern der Webseite verschleiert oder "versteckt" werden
  • javascript-Dateien können durch gulp, webpack usw. zu einer einzigen Datei/einem einzigen Modul gebündelt werden
0
shubham agarwal