Javascript - Inline vs externes Skript - Was ist der Unterschied?

8

Ich habe ein paar Schnipsel von Javascript verstreut über meine Seiten - viele sind in meinen eigenen .js-Dateien enthalten, aber einige der Sachen, die ich online gefunden habe, sitzen direkt auf der Seite.

Ich bin nicht sehr vertraut mit der Interaktion von JavaScript mit einer Seite - gibt es einen Unterschied zwischen dem Hinzufügen des Skripts inline oder dem Hinzufügen eines Verweises auf die externe Datei?

    
John Ohara 28.04.2015, 11:30
quelle

4 Antworten

10

Es gibt wenig Unterschied in der Verwendung der einen oder anderen Art. Der wirkliche Unterschied kommt von den Vorteilen / Nachteilen, die jeder hat.

Inline-Skripte

  • Sind auf derselben Seite geladen, so dass keine weitere Anfrage ausgelöst werden muss.
  • Werden sofort ausgeführt.
  • Die Attribute async und defer haben keine Auswirkung
  • Kann hilfreich sein, wenn Sie ein serverseitiges dynamisches Rendering verwenden.

Externe Skripts

  • Bessere Trennung von Bedenken und Wartbarkeit.
  • Die Attribute async und defer haben Auswirkungen, wenn also diese Attribute vorhanden sind, ändert das Skript das Standardverhalten. Dies ist mit Inline-Skripten nicht möglich.
  • Sobald ein externes Skript heruntergeladen wurde, speichert der Browser es im Cache. Wenn also eine andere Seite darauf verweist, ist kein zusätzlicher Download erforderlich.
  • Kann verwendet werden, um Client-Code bei Bedarf zu laden und die Downloadzeit und -größe insgesamt zu reduzieren.
devconcept 28.04.2015, 12:03
quelle
3

Externe Skriptdateien

  • Viel einfacher zu analysieren, damit Sie effizienter debuggen und lesen können. Das erleichtert uns als Programmierer das Leben erheblich.
  • Die Downloadzeit wird verkürzt, da die externe Datei zwischengespeichert wird, sodass sie mit der Website
    • heruntergeladen werden kann
  • Statt das gleiche Skript mehrmals zu schreiben, kann eine externe Datei überall im Code
    • aufgerufen und ausgeführt werden

Externe Dateien verringern die Seitenrendering-Geschwindigkeit, da der Browser die Analyse und das Herunterladen der externen Datei beenden muss. Dies fügt eine Netzwerk-Rundreise hinzu, die alles verlangsamt. Da externe Dateien zwischengespeichert werden, ist es schwierig, sie zu löschen, wenn sie aktualisiert wurden

Inline-Code

  • Inline-Code reduziert die Anzahl der HTTP-Anfragen, wodurch die Leistung der Webseite verbessert wird. Dies liegt daran, dass der Code auf der gleichen Seite geladen wird, so dass eine Anforderung nicht benötigt wird
  • Inline-Skript wird sofort ausgeführt

Obwohl Inline-Code viel schwieriger zu lesen und zu analysieren ist, sieht es einfach wie ein Stück Code aus, die zusammengefügt sind. Es ist harte Arbeit, das Problem beim Debuggen zu finden, was das Leben als Programmierer schwierig macht.

Hoffe das hilft dir ein bisschen mehr zu verstehen:)

    
LukeP_8 19.05.2016 22:11
quelle
2

Wenn Sie sich die <script> -Tag-Dokumentation ansehen, können Sie sehen, dass Sie async und verwenden können defer Attribute nur mit externen Skripts, die sich möglicherweise auf Skripts auswirken, die keine Ereignislistener als Einstiegspunkte verwenden.
Darüber hinaus kann der Browser durch das Inlining den Cache nicht eigenständig zwischenspeichern. Wenn Sie dasselbe Skript auf verschiedenen Seiten verwenden, kann der Browser-Cache nicht aktiviert werden. Dies kann sich auf die Leistung und / oder die Bandbreitennutzung auswirken > Und natürlich ist das Aufteilen von Code in Dateien eine Möglichkeit, sie zu organisieren.

    
Siguza 28.04.2015 11:35
quelle
2

Generell gibt es keinen Unterschied wie in den Kommentaren angegeben. Wenn das Snippet jedoch in der Mitte des HTML-Codes in der Seite eingebettet ist und keine Funktion ist, wird es sofort ausgeführt. Solche Skriptsegmente können sich im Verhalten unterscheiden, wenn sie in eine separate JS-Datei verschoben werden, wenn nicht genügend Sorgfalt angewandt wird.

    
Krishna 28.04.2015 11:37
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Ändern Sie in der Eclipse-Startkonfiguration das Standardprogramm "Ausführen"