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.
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.)
Nein. Bestenfalls kann der Code verschleiert werden, um ihn vor dem zufälligen Beobachter zu "verbergen", aber er bietet keinen wirklichen Schutz.
quelle
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 .
quelle
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.quelle
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.
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.
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.
quelle
Viele Vorteile der Trennung von HTML- und Javascript-Inhalten in separate Dateien:
quelle