Ist Inline-JavaScript gut oder schlecht?

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?

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.

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 .

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.

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.

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.

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).

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:

• Inline-Caching
• Dynamisches JavaScript mit Inline-Caches optimieren
• Erklären von JavaScript-VMs in JavaScript - Inline-Caches
• Warum sollte ich Inline-Scripting vermeiden? (Siehe MainMa's & user1389596's Antwort)

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