Ist Inline-JavaScript gut oder schlecht?

16

Ich habe momentan von WordPress auf das Yii-Framework umgestellt und ein externer Entwickler baut meine Website neu auf.

Eine Sache, die mir auffällt, ist, dass jedes Mal, wenn er AJAX / jQuery auf die Yii-Weise aufruft, JavaScript inline in die Webseite eingebettet wird. Obwohl der JavaScript-Code scheinbar unter der Fußzeile platziert ist, ist er immer noch inline.

Im Allgemeinen scheint es, dass JavaScript-Code häufiger in die Webseite eingefügt wird. Ich war schon immer der Meinung, dass JavaScript-Skripte so weit wie möglich in JavaScript-Dateien platziert werden sollten. Ist das ein kommender "neuer" Trend? Oder sollte ich trotzdem versuchen, JavaScript-Code in separaten Dateien zu speichern?

Steven
quelle
Was genau meinst du damit, dass JavaScript inline in die Webseite eingefügt wird ?
Salman A
3
Für das Wohl der anderen , die diese Frage und denken an Dinge wie finden <a onClick="function(){/* do stuff */} ">Click Here</a>diese, ich verstehe, als sehr schlecht und man sollte ihren Code aus ihren HTML - See trennen: Dieser Artikel
TecBrat
1
@ user1066946 t.co/j1RpJgwoku :-)
Kos
1
@ user1066946 Ich benutze Angular sehr gerne. Ich habe gerade festgestellt, dass das "Semantic Web" einen Kreis gebildet hat (um einen Klebercode neben dem DOM aufzubewahren)
Kos,
1
"Obwohl der JavaScript-Code anscheinend unter der Fußzeile platziert ist, ist er immer noch inline." - Es hört sich so an, als würden Sie sich auf eingebettetes JavaScript beziehen , nicht auf "Inline" - JavaScript (auf das sich TecBrat bezieht).
MrWhite

Antworten:

13

Inline-JavaScript erhöht die Downloadzeiten für die Seite, was nicht gut ist. Bei einem Aufruf einer .jsDatei können dies zumindest parallele Aufrufe sein und die Downloadzeiten für Inhalte können verkürzt werden. Ja, es gibt Zeiten, in denen es in Ordnung ist, JavaScript direkt in den HTML-Code einzufügen. Oft ist es jedoch besser, wenn Sie dies so weit wie möglich auslagern.

Beachten Sie, dass die Ladezeiten von Seiten (das heißt HTML) und nicht alle Ressourcenaufrufe sich auf die Metriken auswirken, die sich auf das Ranking auswirken (auch wenn dies als PageRank oder in den SERPs keine Rolle spielt). Der Punkt ist, es beeinflusst die Leistung einer Website für SEO, wie auch immer sie sich manifestiert.

closetnoc
quelle
7
Das Aushandeln einer zweiten Verbindung zu einem vermutlich gleichen Host zum Herunterladen der gleichen Datenmenge ist schneller als im aktiven Stream? Wenn Sie beispielsweise 50 KBit / s für eine Datei an einen Host senden, wird diese normalerweise beim Starten einer zweiten Sitzung möglicherweise auf 25 KBit / s reduziert. Es sei denn, der Host drosselt aus irgendeinem Grund pro Verbindung.
EkriirkE
Es gibt jedoch einen Nachteil für externe Dateien. Wenn dies nicht ordnungsgemäß durchgeführt wird, erstellen Sie DOM-Blocking-Code, dh der doc.ready-Trigger ist langsamer, was sich auf die wahrgenommene Geschwindigkeit auswirkt . Aber wenn richtig gemacht, ist extern der richtige Weg
Martijn
4
.jsDateien sind besser zum Zwischenspeichern geeignet. Es macht keinen Sinn, dass zwei Verbindungen zum gleichen Host die Download-Geschwindigkeit auf magische Weise erhöhen.
Der Gedanke, die Bandbreite zu teilen, obwohl ich Ihre Logik verstehe und es nicht ganz falsch ist, ist ein bisschen irreführend. Der HTML-Code ist kleiner, was weniger Zeit in Anspruch nimmt, und jeder nachfolgende Aufruf kann tatsächlich warten.
Closetnoc
3
Wenn Sie nach Zeit suchen, ist es falsch, die Bandbreite zu betrachten. Betrachten Sie den Profiler bei Ladezeiten: Normalerweise sind die Verbindungszeiten 10-100x GRÖSSER als die tatsächliche Datenaustauschzeit. Dies bedeutet, dass die FRAGMENTIERUNG ein echtes Problem darstellt. Die Verwendung einer externen, dedizierten Datei für wirklich kleine Js ist möglicherweise die schlechteste inline-Datei. Inline ist besser in Browsern, die keine echte Parallelisierung durchführen
Lesto
29

Auf meiner Website zur Währungsumrechnung handelt es sich bei den meisten Sitzungen um einzelne Seitenaufrufe. Dies liegt daran, dass Benutzer ihre Währungsberechnung direkt auf der Startseite durchführen können (die gesamte Berechnung wird clientseitig mit JavaScript durchgeführt.)

Meine Seite wird in etwa der Hälfte der Zeit heruntergeladen und gerendert, in der alle Ressourcen (CSS, JS und sogar Bilder ) auf der Seite eingebunden sind. Da so wenige meiner Benutzer mehrere Seiten anzeigen, würde ich nicht viel davon profitieren, wenn einige dieser Ressourcen zwischen den Seitenaufrufen zwischengespeichert würden.

Meine Seite ist nicht typisch. Die meisten Websites haben mehrere Seiten pro Sitzung und große Bilder, die meine Technik weniger anwendbar machen würden. Es gibt keine richtige Lösung für diese Frage; es hängt von der Website ab. Sie müssen es selbst anhand des typischen Verhaltens Ihrer Benutzer messen .

Stephen Ostermiller
quelle
12

Es ist nicht unbedingt schlecht, JavaScript in Ihrer HTML-Datei zu haben, aber Sie müssen ein Urteil darüber fällen.

Es ist schlecht, wenn Sie eine große Menge an JavaScript auf mehreren Seiten verwenden. In diesem Fall sollte sich das JavaScript in einer externen, komprimierten und zwischenspeicherbaren Datei befinden. Wenn Ihre Site sehr viel Verkehr aufweist, sollten Sie ein CDN verwenden.

Wenn Sie jedoch über eine kleine Menge JavaScript verfügen, kann das Speichern des Ablegens in einer externen Datei dadurch zunichte gemacht werden, dass Sie eine zusätzliche HTTP-Anforderung zum Abrufen dieser Datei stellen müssen. In diesem Fall ist es effizienter, das JavaScript auf Ihrer Seite zu belassen.

Wenn dasselbe kleine JavaScript-Snippet auf mehreren Seiten verwendet wird, ist es hilfreich, es in einer externen Datei zu platzieren, um das Caching zu nutzen.

Letztendlich müssen Sie die Größe des JavaScript gegen den Mehraufwand für zusätzliche HTTP-Anforderungen abwägen. In den meisten Fällen wird es für eine "durchschnittliche" Site wahrscheinlich keinen großen Unterschied machen, sie nur in eine externe Datei zu legen.

Schaumkuh
quelle
4

Ich bin ein Yii-Entwickler und kann Ihnen sagen, dass Yii nichts damit zu tun hat . Es liegt ganz beim Entwickler , ob er oder sie JavaScript-Code in eine separate Datei legt und ihn mit der CClientScript::registerScriptFileMethode auf der HTML-Seite (Ansicht) registriert oder ihn direkt auf die HTML- Seite (Ansicht) legt und ihn mit der CClientScript::registerScriptMethode registriert .

Laut Ihrer Antwort stimmen die meisten (professionellen?) Yii-Entwickler nachdrücklich für den ersten Ansatz, dh so viel Javascript-Code wie möglich in separaten Dateien zu halten. Das ist also mit Sicherheit kein neuer Codetrend, sondern eine schlechte Entwicklerpraxis. Zumindest ist das in der Yii-Community so.

EDIT : Eigentlich habe ich das wichtigste Argument vergessen. Yii (wie auch die meisten anderen professionellen PHP-Frameworks) basiert auf dem MVC- Entwurfsmuster (eigentlich: Architekturmuster). Und dasselbe Muster kann in fronted verwendet werden: HTML-Code ist das Modell (Daten), CSS ist die Ansicht (Dekorator) und Javascript ist der Controller. Alle von ihnen setzen in separate Dateien , .jsund .cssDateien - minimierte, obsfucated und im besten Szenario gzip.

Wenn Sie Ihre Yii-Anwendung erstellen, können Sie das MVC-Muster aufbrechen und alles in derselben Datei behalten. Die Frage ist - lohnt es sich, was sind die Vorteile (keine?) Und wohin führt Sie das? Sie können dieselbe Argumentation verwenden, wenn Sie fragen, ob JS-Code inline bleiben soll oder nicht.

trejder
quelle
In Ordnung. Der Entwickler scheint für alles Widgets von Drittanbietern zu verwenden. Autocomplete, Ajax-Bilduploads usw. All dies fügt Inline-Js hinzu.
Steven
Nein, dem kann ich nicht zustimmen. Ich verwende Twitter Bootstrap in meinen Yii-Anwendungen (wahrscheinlich die größte Erweiterung von Yii und eine Vielzahl von Widgets) sowie in vielen anderen Yii-Erweiterungen, und keine von ihnen verwendet Inline-JS. Ihr Entwickler müsste wirklich Glück haben, Widgets und Erweiterungen zu finden, die nur Inline-Javascript verwenden. Sie müssen Erfahrung mit Yii haben, um eigene Erweiterungen zu schreiben (mit Ausnahme der wenigen, wirklich schlecht geschriebenen), und selbst erfahrene Yii-Entwickler verwenden Inline-Code als letzte Option, wenn alles andere fehlschlägt.
Trejder
Die Verwendung von Erweiterungen und Widgets von Drittanbietern in Yii ist eine großartige Idee (Sie müssen das Rad nicht erneut erfinden). Die Verwendung von Inline-JS-Code in Yii-Anwendungen oder -Erweiterungen ist jedoch eine schlechte Einstellung. Also zwingen Sie Ihren Entwickler, besseren Code zu schreiben / bessere Erweiterungen und Widgets zu verwenden, oder ... holen Sie sich einen besseren Entwickler! :]
trejder
Ok, danke für das Feedback. Wo finde ich neben Stackoverflow eine gute Yii-Community?
Steven
Bei Yii Forum . Die meisten Seiten sind frei zugänglich. Einige erfordern die Registrierung eines Kontos und die Anmeldung. Die meisten Yii-Entwickler bei Stack Overflow haben eigene Accounts im Forum. Nach fast sechs Jahren hat das Yii-Framework eine große Community von Entwicklern. Wenn Sie also genau hinschauen, sollten Sie in der Lage sein, nur wenige Yii-Entwickler in Ihrer lokalen Community oder sogar in der Nachbarschaft zu finden. Viel Glück.
Trejder
3

Es hängt tatsächlich vom Zweck der Webseite ab, die Sie entwickeln:

Ich verwende eine kleine Menge Inline-JavaScript, während ich externe JavaScript-Dateien bevorzuge, wenn sie groß sind.

In jedem Fall muss die Seite, wenn sie JavaScript lädt, zuerst ausgeführt werden. Es wird empfohlen, externes JavaScript zu verwenden, um den Seiteninhalt nicht zu verlängern. Dies erleichtert auch das Debuggen.

Abhijith Bhattu
quelle
2

Die Antwort hängt tatsächlich davon ab, was getan wird.

Wenn Sie Inline-JavaScript bemerken, das auf der gesamten Website verwendet wird (z. B. ein Widget, das in der Kopfzeile auf allen Seiten der Website angezeigt wird), ist es angemessen, es in eine "allgemeine" JavaScript-Datei zu verschieben.

Tatsächlich würde ich so viel JavaScript wie möglich in eine gemeinsame JavaScript-Datei verschieben, selbst wenn es auf einer einzelnen Seite verwendet würde. Ich würde den Server so konfigurieren, dass er starke Caching- und Komprimierungsheader für JavaScript-Dateien sendet. Dadurch wird die Größe der Seite (n) verringert, die Größe der JavaScript-Datei jedoch nicht wesentlich erhöht.

Auf der anderen Seite, wenn das JavaScript einfach ein Bündel von Konfigurationsoptionen / -initialisierungen ist, zB:

$(function () {
    myplugin({
        images: ["img1", "img2", "img3"]
    });
});

wo es aus irgendeinem Grund nicht möglich war, den Code in eine externe JavaScript-Datei zu verschieben (z. B. wenn die Bildparameter aus der Datenbank stammen), würde ich ihn inline lassen. Allerdings würde ich Plugins von Drittanbietern wählen, die "unauffällig" sind (oder sie als solche konvertieren).

Salman A
quelle
2

Diese Antworten verfehlen die Marke. Schauen Sie sich Inline-Caching an .

Da Yii in PHP codiert ist, werden Sie feststellen, dass Entwickler manchmal PHP-Code schreiben, um Javascript-Code dynamisch auf dem Server zu generieren - basierend auf einem Zustand, einer Bedingung oder einem Wert, der dem Server bekannt ist. Senden Sie dann alles in einem Stapel an den Client, damit der Client die Funktion ausführen und einen Teil der vom Server bereits durchgeführten Berechnung überspringen kann.

Anstatt eine ganze Reihe von generischen Javascript-Funktionen in einer .js-Datei an den Client zu senden, die keinen Kontext haben, bis sie mit Daten versehen sind (Daten, die möglicherweise auf dem Server gespeichert sind und einen Roundtrip erfordern), können wir die "backen" Kontext / Daten als Teil der Javascript-Funktion. Dies ist sparsam, da Sie die Funktionen / Daten zusammen senden und nur die Funktionen / Daten senden, die ein Client zu diesem Zeitpunkt möglicherweise benötigt, anstatt die gesamte App beim Laden der ersten Seite zu senden. Dies bedeutet auch, dass Sie Ihre gesamte App nicht beim Laden der ersten Seite einfach herunterladen und rückentwickeln müssen, da Sie nur einen kleinen Teil der Funktionalität einbinden, die jeder einzelne Client zu diesem Zeitpunkt möglicherweise benötigt. Ich bin mir nicht sicher, wie gut das für SEO ist, aber ich bin mir sicher, dass es entsprechend optimiert werden kann.

Stellen Sie sich vor, ein Endbenutzer schreibt eine Seite in einer CMS-Software mit einem WYSIWYG-Editor. Wie fügt dieser Benutzer der Seite neue Funktionen hinzu, wenn er keinen Zugriff auf Ihre JS-Quelldateien auf dem Server hat? Sie wechseln zur Registerkarte HTML und verwenden Inline-Javascript.

Nicht alle Inline-Javascript ist schlecht; manchmal ist auch onclick in ordnung. Vermeiden Sie generell das Schreiben von Inline-Javascript, und Sie sind auf dem besten Weg, gute Gewohnheiten zu entwickeln.

Verweise:

Perry
quelle
0

Normalerweise ist Inline-JS-Code schlecht, wie die anderen vor mir sagten.

Aber ich denke an einen Anwendungsfall, bei dem Inline-JS besser ist .

Stellen Sie sich ein CMS vor, das eine JS-gesteuerte Galerie einfügt. Die Galerie kann in jQuery erstellt werden. Es wird durch ein ID-Attribut gekennzeichnet, das nicht nur auf der Seite, sondern auf der gesamten Site eindeutig ist. In diesem Fall - glaube ich - wäre Inline-JS besser, da der JS-Code nur auf einer Seite verwendet wird und Sie keinen HTTP-Overhead haben

Yunzen
quelle