Wann sollte ich Inline vs. verwenden?Externes Javascript?

StackOverflow https://stackoverflow.com/questions/138884

Frage

Ich würde gerne wissen, wann ich im Hinblick auf Leistung und Wartungsfreundlichkeit externe Skripte einbinden oder sie inline mit dem HTML-Code schreiben sollte.

Was ist die allgemeine Praxis dafür?

Szenario aus der realen Welt: Ich habe mehrere HTML-Seiten, die eine clientseitige Formularvalidierung benötigen.Dazu verwende ich ein jQuery-Plugin, das ich auf allen diesen Seiten einbinde.Aber die Frage ist, ob ich:

  • die Codebits schreiben, die dieses Skript inline konfigurieren?
  • Alle Teile in eine Datei aufnehmen, die von allen diesen HTML-Seiten gemeinsam genutzt wird?
  • Jedes Bit in eine separate externe Datei einbinden, eines für jede HTML-Seite?

Danke.

War es hilfreich?

Lösung

Zu der Zeit, diese Antwort ursprünglich geschrieben wurde (2008), die Regel war einfach: Alle Skript extern sein sollen. Sowohl für die Wartung und Leistung.

(Warum Leistung? Denn wenn der Code getrennt ist, kann es einfacher, von Browsern zwischengespeichert werden.)

JavaScript gehört nicht in den HTML-Code und wenn es enthält Sonderzeichen (wie <, >) es sogar schafft Probleme.

Heute, Web-Skalierbarkeit hat sich geändert. die Anzahl der Anfragen zu reduzieren hat eine gültige Betrachtung aufgrund der Latenzzeit zur Herstellung mehr HTTP-Anforderungen ist. Dies macht die Antwort komplexer: in den meisten Fällen JavaScript externe aufweist, ist noch empfohlen. Aber für bestimmte Fälle, vor allem sehr kleine Teile des Codes, inlining sie in die HTML-Website macht Sinn.

Andere Tipps

Wartbarkeit ist definitiv ein Grund, sie extern zu halten, aber wenn die Konfiguration einen Einzeiler (oder im Allgemeinen kürzer als die HTTP-Overhead Sie machen diese Dateien extern bekommen würden) ist es leistungsmäßig besser, sie inline zu halten. Denken Sie immer daran, dass jeder HTTP-Anforderung einigen Aufwand hinsichtlich der Ausführungszeit und Verkehr erzeugt.

Natürlich das alles irrelevant wird der Moment der Code länger als ein paar Zeilen und ist auf eine einzige Seite nicht wirklich spezifisch. In dem Moment, Sie wollen in der Lage, diesen Code wiederverwenden, sie extern machen. Wenn Sie dies nicht tun, Blick auf seine Größe und entscheiden dann.

Externalisierende Javascript ist eine der Yahoo-Leistungsregeln: http://developer.yahoo.com/performance/rules.html#external

Während die Hard-und-schnell-Regel, die Sie immer Skripte externalisieren sollte in der Regel eine gute Wette, in einigen Fällen möchten Sie vielleicht einige der Skripte und Stile Inline. Sie sollten jedoch nur Inline-Dinge, die Sie wissen, wird die Leistung verbessern (weil Sie diese gemessen haben).

Wenn Ihnen nur die Leistung am Herzen liegt, sind die meisten Ratschläge in diesem Thread völlig falsch und werden in der SPA-Ära, in der wir davon ausgehen können, dass die Seite ohne den JS-Code nutzlos ist, immer falscher.Ich habe unzählige Stunden damit verbracht, die Ladezeiten von SPA-Seiten zu optimieren und diese Ergebnisse mit verschiedenen Browsern zu überprüfen.Generell kann die Leistungssteigerung durch die Neuorchestrierung Ihres HTML-Codes recht dramatisch sein.

Um die beste Leistung zu erzielen, müssen Sie sich Seiten als zweistufige Raketen vorstellen.Diese beiden Stufen entsprechen in etwa <head> Und <body> Phasen, aber stellen Sie sie sich stattdessen als vor <static> Und <dynamic>.Der statische Teil ist im Grunde eine String-Konstante, die Sie so schnell wie möglich durch die Antwortpipe schieben.Dies kann ein wenig knifflig sein, wenn Sie eine Menge Middleware verwenden, die Cookies setzt (diese müssen vor dem Senden von http-Inhalten gesetzt werden), aber im Prinzip wird nur der Antwortpuffer geleert, hoffentlich bevor in irgendeinen Vorlagencode (Razor, PHP usw.) gesprungen wird. usw.) auf dem Server.Das klingt vielleicht schwierig, aber ich erkläre es einfach falsch, weil es nahezu trivial ist.Wie Sie vielleicht schon vermutet haben, sollte dieser statische Teil das gesamte Javascript inline und minimiert enthalten.Es würde ungefähr so ​​aussehen

<!DOCTYPE html>
     <html>
         <head>
             <script>/*...inlined jquery, angular, your code*/</script>
             <style>/* ditto css */</style>
         </head>
         <body>
             <!-- inline all your templates, if applicable -->
             <script type='template-mime' id='1'></script>
             <script type='template-mime' id='2'></script>
             <script type='template-mime' id='3'></script>

Da es Sie so gut wie nichts kostet, diesen Teil über die Leitung zu senden, können Sie davon ausgehen, dass der Client diesen etwa 5 ms + Latenzzeit nach der Verbindung mit Ihrem Server empfängt.Vorausgesetzt, der Server ist einigermaßen nah dran, könnte diese Latenz zwischen 20 ms und 60 ms liegen.Browser beginnen mit der Verarbeitung dieses Abschnitts, sobald sie ihn erhalten, und die Verarbeitungszeit dominiert normalerweise die Übertragungszeit um den Faktor 20 oder mehr, was nun Ihr amortisiertes Zeitfenster für die serverseitige Verarbeitung des ist <dynamic> Portion.

Es dauert etwa 50 ms, bis der Browser (Chrome, Rest vielleicht 20 % langsamer) Inline-JQuery + Signalr + Angular + NG Animate + NG Touch + NG Routes + Lodash verarbeitet.Das ist an sich schon ziemlich erstaunlich.Die meisten Web-Apps haben weniger Code als alle gängigen Bibliotheken zusammen, aber nehmen wir an, Sie haben genauso viel, also würden wir Latenz + 100 ms Verarbeitung auf dem Client gewinnen (dieser Latenzgewinn kommt vom zweiten Übertragungsblock).Wenn der zweite Block eintrifft, haben wir den gesamten JS-Code und die Vorlagen verarbeitet und können mit der Ausführung von Dom-Transformationen beginnen.

Sie mögen einwenden, dass diese Methode orthogonal zum Inlining-Konzept ist, aber das ist nicht der Fall.Wenn Sie statt Inlining eine Verknüpfung zu CDNs oder Ihren eigenen Servern herstellen, müsste der Browser eine oder mehrere weitere Verbindungen öffnen und die Ausführung verzögern.Da diese Ausführung grundsätzlich kostenlos ist (da die Serverseite mit der Datenbank kommuniziert), muss klar sein, dass alle diese Sprünge mehr kosten würden, als überhaupt keine Sprünge durchzuführen.Wenn es eine Browser-Eigenart gäbe, die besagt, dass externe JS schneller ausgeführt werden, könnten wir messen, welcher Faktor dominiert.Meine Messungen deuten darauf hin, dass zusätzliche Anfragen zu diesem Zeitpunkt die Leistung beeinträchtigen.

Ich arbeite viel mit der Optimierung von SPA-Apps.Es ist üblich, dass die Leute denken, dass das Datenvolumen eine große Sache sei, während in Wahrheit oft Latenz und Ausführung dominieren.Die minimierten Bibliotheken, die ich aufgelistet habe, summieren sich auf 300 KB an Daten, und das sind nur 68 KB im gzip-Format oder 200 ms Download auf einem 2-Mbit-3G/4G-Telefon, was genau der Latenzzeit entspricht, die auf demselben Telefon erforderlich wäre, um zu überprüfen, ob es dieselben Daten enthält bereits in seinem Cache, auch wenn es per Proxy zwischengespeichert wurde, da die mobile Latenzsteuer (Telefon-zu-Tower-Latenz) weiterhin anfällt.Unterdessen verfügen Desktop-Verbindungen mit geringerer First-Hop-Latenz in der Regel ohnehin über eine höhere Bandbreite.

Kurz gesagt: Im Moment (2014) ist es am besten, alle Skripte, Stile und Vorlagen zu integrieren.

BEARBEITEN (MAI 2016)

Da JS-Anwendungen weiter wachsen und einige meiner Nutzlasten mittlerweile bis zu 3+ Megabyte an minimiertem Code umfassen, wird es offensichtlich, dass zumindest gängige Bibliotheken nicht mehr inline sein sollten.

Ich denke, der spezifische (nur) vertretbarer Fall für die Inline-Skript

Eigentlich ist es ein ziemlich solider Fall Inline-Javascript zu verwenden. Wenn die js klein genug ist, (Einzeiler), neige ich dazu, aufgrund von zwei Faktoren, die die Javascript inline bevorzugen:

Ich würde einen Blick auf den gewünschten Code nehmen und es in so viele separate Dateien aufteilen, wie gebraucht. Jede js Datei würde nur einen „logischen Satz“ von Funktionen usw. zB halten. Eine Datei für alle Login-bezogenen Funktionen.

Dann während der Standortentwicklung auf jeder HTML-Seite sind Sie nur diejenigen, die benötigt werden. Wenn Sie mit Ihrer Website online gehen können Sie optimieren durch die Kombination von Datei jeden js einer Seite in eine Datei benötigt.

Die einzige Verteidigung ich für Inline bieten JavaScript, das ist, wenn stark typisierte Ansichten mit .net MVC verwenden Sie c # Variablen Mitte Javascript verweisen, die ich nützlich gefunden habe.

Drei Überlegungen:

  • Wie viel Code benötigen Sie (manchmal Bibliotheken sind ein First-Class-Verbraucher)?
  • Spezifität: ist dieser Code funktioniert nur im Rahmen dieses spezifischen Dokuments oder Elemente
    • ?
  • Jeder Code innerhalb des Dokuments neigt es länger und somit langsamer zu machen. Außerdem SEO Überlegungen es offensichtlich machen, dass Sie internes Scripting minimieren ...

Externe Skripte sind auch leichter zu debuggen Firebug. Ich mag zu Unit Test meines JavaScript und alle externen hilft mit. Ich hasse JavaScript in PHP-Code zu sehen und HTML es wie ein großes Durcheinander zu mir aussieht.

Ein weiterer versteckter Nutzen von externen Scripts ist, dass man sie leicht durch eine Syntaxprüfung ausgeführt werden kann wie JSLint . Das kann man von vielen herzzerreißenden sparen, schwer zu finden, IE6 Fehler.

In Ihrem Szenario klingt es wie das Schreiben der externen Sachen in einer Datei unter den Seiten geteilt würde gut für Sie. Ich stimme mit allem, was oben gesagt.

Während der frühen Prototyping halten Sie den Code inline zum Nutzen der schnellen Iteration, aber sicher sein, sie alle externen durch die Zeit, die Sie Produktion erreichen zu machen.

Ich würde sogar zu sagen wagen, dass, wenn Sie nicht platzieren können alle Ihre Javascript extern, dann haben Sie ein schlechtes Design unter den Händen haben, und Sie sollten Ihre Daten und Skripte

Refactoring

Google hat die Ladezeiten enthalten hinein Seite Ranking Messungen, wenn Sie Inline viel, wird es länger für die Spinnen nehmen durch Ihre Seite zu kriechen, kann dies Ihre Seite Ranking beeinflussen, wenn Sie zu viel enthalten. in jedem Fall können unterschiedliche Strategien Einfluss auf Ihrem Ranking haben.

Nun, ich denke, dass Sie Inline verwenden sollten, wenn einzelne Seite von Webseiten als Skripte werden nicht über mehrere Seiten geteilt werden müssen,

Versuchen Sie immer, externen Js zu verwenden, wie Inline-js immer schwierig ist, zu halten.

Darüber hinaus ist es professionell erforderlich, dass Sie eine externe js verwenden, da die Mehrheit der Entwickler extern verwenden empfehlen js.

ich mir externe js verwenden.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top