Warum sollte ich Inline-Scripting vermeiden?

Ein sachkundiger Freund hat sich kürzlich eine Website angesehen, bei deren Start ich mitgeholfen habe, und etwas wie "Sehr coole Site, schade um das Inline-Scripting im Quellcode" kommentiert.

Ich bin definitiv in der Lage, das Inline-Skript dort zu entfernen, wo es auftritt. Mir ist vage bewusst, dass es "eine schlechte Sache" ist. Meine Frage ist: Was sind die wirklichen Probleme mit Inline-Skripten? Gibt es ein signifikantes Leistungsproblem oder ist es meist nur eine Frage des guten Stils? Kann ich meinen Vorgesetzten ein sofortiges Eingreifen in Bezug auf Inline-Skripte rechtfertigen, wenn andere Dinge, an denen gearbeitet werden muss, offensichtlichere Auswirkungen auf die Website haben könnten? Wenn Sie auf eine Website zugreifen und einen Blick auf den Quellcode werfen würden, welche Faktoren würden Sie dazu veranlassen, "hmm, professionelle Arbeit hier" zu sagen, und was würde Sie veranlassen, sich von einem offensichtlich amateurhaften Job zurückzuziehen?

Okay, diese Frage hat sich im Schreiben in mehrere Fragen verwandelt. Aber im Grunde genommen Inline-Scripting - was ist los?

Was sind die wirklichen Probleme beim Inline-Scripting? Gibt es ein signifikantes Leistungsproblem oder ist es meist nur eine Frage des guten Stils?

Die Vorteile beruhen nicht auf der Leistung, sondern, wie Michael in seinem Kommentar ausführte, auf der Trennung von Ansicht und Controller. Die HTML / CSS-Datei sollte im Idealfall nur die Präsentation enthalten, und für Skripte sollten separate Dateien verwendet werden. Dies erleichtert es Ihnen (und Ihren Kollegen), sowohl die visuellen als auch die funktionalen Aspekte zu lesen und zu pflegen.

Kann ich meinen Vorgesetzten ein sofortiges Eingreifen in Bezug auf Inline-Skripte rechtfertigen, wenn andere Dinge, an denen gearbeitet werden muss, offensichtlichere Auswirkungen auf die Website haben könnten?

Nein wahrscheinlich nicht. Es kann sehr schwierig sein, die Kräfte, die für reine Wartungsarbeiten benötigt werden, zu überzeugen, auch wenn Sie glauben, dass dies auf lange Sicht Kosten spart. In diesem Fall halte ich es jedoch nicht für so wichtig, dass Sie alles stoppen und Ihr Inline-Skript entfernen. Stellen Sie stattdessen sicher, dass Sie sich bewusst bemühen, Bereiche zu korrigieren, während Sie aus anderen Gründen daran arbeiten. Refactoring-Code sollte etwas sein, was Sie regelmäßig tun, aber nur ein bisschen auf einmal.

Wenn Sie auf eine Website zugreifen und einen Blick auf den Quellcode werfen würden, welche Faktoren würden Sie dazu veranlassen, "hmm, professionelle Arbeit hier" zu sagen, und was würde Sie veranlassen, sich von einem offensichtlich amateurhaften Job zurückzuziehen?

Der wichtigste Faktor, der mir sagt, dass es nicht professionell ist, ist die Überbeanspruchung von Tabellen oder Divs. Hier ist ein Artikel, der erklärt, warum keiner von beiden überbeansprucht werden sollte.

Ich werde nicht der Anwalt des Teufels sein, aber es gibt keine enge Beziehung zwischen Amateurjob und Inline-JavaScript. Sehen wir uns den Quellcode einiger der bekanntesten Websites an:

• Google,
• Wikipedia,
• Microsoft,
• Adobe,
• Dell,
• IBM.

Jede ihrer Homepages verwendet Inline-JavaScript. Bedeutet das, dass all diese Unternehmen amateurhafte Leute einstellen, um ihre Homepages zu erstellen?

Ich gehöre zu den Entwicklern, die keinen JavaScript-Code in HTML einfügen können. Ich mache es nie in den Projekten, an denen ich arbeite (außer wahrscheinlich einigen Aufrufen <a href="javascript:...">für Projekte, in denen unauffälliges JavaScript von Anfang an nicht erforderlich war, und ich entferne immer Inline-JavaScript, wenn ich den Code von jemand anderem umgestalte. Aber lohnt es sich? ? Nicht so sicher.

In Bezug auf die Leistung erzielen Sie nicht immer eine bessere Leistung, wenn Sie JavaScript in einer separaten Datei ablegen. In der Regel sind wir versucht, zu berücksichtigen, dass Inline-JavaScript Bandbreite verschwendet, da es nicht zwischengespeichert werden kann (außer wenn Sie sich mit statisch zwischenspeicherbarem HTML befassen). Im Gegenteil, eine externe .js-Datei wird nur einmal geladen.

In Wirklichkeit handelt es sich nur um eine weitere vorzeitige Optimierung : Sie haben möglicherweise Recht, wenn Sie glauben, dass die Auslagerung von JavaScript Ihre Website beschädigen würde, aber Sie können sich auch völlig irren:

• Was ist, wenn die meisten Benutzer einen leeren Cache haben?
• Haben Sie gedacht, dass bei einer externen .js-Datei bei jeder Seitenanfrage eine Anfrage an diese Datei gestellt wird, wenn die Website nicht richtig konfiguriert ist (und normalerweise nicht),
• Ist die .js-Datei wirklich zwischengespeichert (mit IIS ist dies möglicherweise nicht so einfach)?

Sammeln Sie also vor einer vorzeitigen Optimierung Statistiken über Ihre Besucher und werten Sie die Leistung mit und ohne Inline-JavaScript aus.

Dann kommt das letzte Argument: Sie haben JavaScript und HTML in Ihrer Quelle gemischt, also saugen Sie. Aber wer hat gesagt, dass Sie beide gemischt haben? Der vom Browser verwendete Quellcode ist nicht immer der Quellcode, den Sie geschrieben haben. Zum Beispiel kann der Quellcode komprimiert, minimierte oder mehrere CSS oder JS - Dateien können in einer Datei zusammengefügt werden, aber das bedeutet nicht , dass Sie wirklich dem Namen Ihrer Variablen a, b, c... a1, usw. , oder dass Sie schrieb ein große CSS-Datei ohne Leerzeichen oder Zeilenumbrüche. Auf die gleiche Weise können Sie problemlos externen JavaScript-Quellcode zur Kompilierungszeit oder später über die Vorlagen in HTML einfügen lassen.

Wenn Sie JavaScript und HTML in dem von Ihnen geschriebenen Quellcode mischen , sollten Sie abschließend in Betracht ziehen, dies in Ihren zukünftigen Projekten nicht zu tun. Dies bedeutet jedoch nicht, dass der an den Browser gesendete Quellcode immer schlecht ist, wenn er Inline-JavaScript enthält.

• Es kann schlimm sein.
• Dies kann im Gegenteil ein Zeichen dafür sein, dass die Website von Fachleuten geschrieben wurde, die sich um die Leistung kümmerten, bestimmte Tests durchführten und feststellten, dass es für ihre Kunden schneller sein würde, Teile von JavaScript inline zu integrieren.
• Oder es kann überhaupt nichts bedeuten.

Schämen Sie sich also eher für die Person, die sagt "Sehr coole Site, schämen Sie sich für das Inline-Scripting im Quellcode", indem Sie sich nur die Quelle ansehen, die an den Browser gesendet wurde, ohne zu wissen, wie die Website erstellt wurde.

Es ist im Allgemeinen gut, zu versuchen, HTML und JS im Allgemeinen getrennt zu halten. HTML ist für die Ansicht, JS ist für die Anwendungslogik. Aber meiner Erfahrung nach macht eine extreme Entkopplung von HTML und Javascript (aus Gründen der Reinheit) die Wartung nicht einfacher. es kann tatsächlich weniger wartbar sein.

Zum Beispiel verwende ich manchmal dieses Muster (von ASP.net entlehnt) beim Einrichten von Ereignishandlern:

<input type="button" id="yourId" onclick="clickYourId()" />

oder

<input type="button" id="yourId" onclick="clickYourId(this)" />

Es ist kein Rätsel, was ein Ereignis auslöst. Der Grund dafür ist, dass Sie sechs Monate später das Element (z. B. in Chrome) überprüfen und sofort sehen können, welches JavaScript-Ereignis ausgelöst wurde.

Stellen Sie sich andererseits vor, Sie lesen den Code eines anderen Benutzers, der hunderttausend Zeilen umfasst, und stoßen auf ein magisches Element, das ein JavaScript-Ereignis auslöst:

<input id="yourId"  />

Wie können Sie mir leicht sagen, welche JavaScript-Methode dies aufruft? Chrome hat dies einfacher gemacht, aber das Ereignis ist möglicherweise an die ID oder an das erste untergeordnete Element des Containers gebunden. Möglicherweise ist das Ereignis an das übergeordnete Objekt angehängt. Wer weiß? Viel Glück beim Finden. :)

Ich würde auch argumentieren, dass das vollständige Ausblenden von Javascript vor dem Designer die Wahrscheinlichkeit erhöht, dass sie es bei einem Update brechen. Wenn jemand Code für ein magisch aktives Element bearbeitet, welche Anzeige im Code weist darauf hin, dass es sich um ein aktives Element auf der Seite handelt?

Kurz gesagt, die beste Vorgehensweise besteht darin, HTML und Javascript zu trennen. Aber auch Faustregeln sind manchmal kontraproduktiv, wenn sie im Extremfall angewendet werden. Ich würde mich für einen Mittelweg-Ansatz aussprechen. Vermeiden Sie große Mengen an Inline-Js. Wenn Sie Inline verwenden, sollte die Funktionssignatur sehr einfach sein:

1. emptyFunction()
2. doCallWithThis(this)
3. atTheExtremOnlyPassOneNumber(2)

Ein Argument, das ich hier vermisse, ist die Möglichkeit eines erhöhten Schutzes vor Cross-Site-Scripting- Angriffen.

Es ist möglich, die Ausführung von Inline-JavaScript in modernen Browsern über die Inhaltssicherheitsrichtlinie zu deaktivieren . Dies hat das Risiko verringert, dass Ihre Website Opfer von XSS wird. Dies kann ein überzeugenderes Argument für Ihr Management sein, in das Entfernen von Inline-Skripten zu investieren.

Hier sind ein paar Gründe.

1. Inline-Skript kann nicht minimiert werden (durch Symbolreduzierung in eine kürzere Version konvertiert). Keine Sorge für Breitband, aber Sie sollten ein Mobilgerät in einem Bereich mit geringer Bandbreite oder Benutzer mit globalem Datenroaming in Betracht ziehen - möglicherweise zählt jedes Byte.

2. Inline-Skripte können vom Browser nur zwischengespeichert werden, wenn die Seite selbst zwischengespeichert werden kann (was zu einer sehr langweiligen Seite führen würde). Externe Javascript-Dateien müssen nur einmal abgerufen werden, auch wenn sich der Seiteninhalt jedes Mal ändert. Kann die Leistung bei Verbindungen mit geringer Bandbreite ernsthaft beeinträchtigen.

3. Inline-Skripte sind schwerer zu debuggen, da die mit Fehlern verbundene Zeilennummer bedeutungslos ist.

4. Es wird vermutet, dass Inline-Skripte die Barrierefreiheit (508 / WAI) beeinträchtigen, obwohl dies nicht bedeutet, dass alle Inline-Skripte Probleme verursachen. Wenn Sie einen Screenreader haben, der Skriptinhalte ankündigt, haben Sie ein Problem! (Ich habe das noch nie gesehen).

5. Inline-Skripte können nicht unabhängig von ihrer Seite getestet werden. Externe Javascript-Dateien können durch unabhängige Tests ausgeführt werden, einschließlich automatisierter Tests.

6. Inline-Skripte können zu einer schlechten Trennung von Bedenken führen (wie in vielen anderen Antworten hier beschrieben).

Es gibt mehrere Gründe, die es rechtfertigen, das Skript nicht inline einzuschließen:

• Zuallererst sorgt die offensichtliche Antwort dafür, dass Code übersichtlicher, prägnanter, verständlicher und lesbarer wird.

• Aus praktischer Sicht möchten Sie Skripte / CSS / etc. Häufig wiederverwenden. Wenn Sie diese Teile auf Ihrer gesamten Website einfügen, müssen Sie bei jeder kleinen Änderung jede einzelne Seite bearbeiten.

• Wenn Sie ein SCM für Ihr Projekt verwenden, wird die Verfolgung von Änderungen und Festschreibungen für alle Beteiligten erleichtert, wenn die verschiedenen Komponenten gut voneinander getrennt sind.

Soweit ich weiß, wäre die Leistung kein Problem. Dies hängt von vielen Faktoren ab, die sich auf die Art Ihrer Website, die Spezifikationen Ihres Servers usw. beziehen. Wenn Ihre Webseite beispielsweise viel Javascript verwendet, speichert Ihr Browser die Skripts möglicherweise im Cache, was zu einer besseren Leistung führt, wenn Der Code ist in mehrere Dateien aufgeteilt. Auf der anderen Seite könnte man sagen, dass einige Server eine einzelne große Datei schneller bereitstellen als mehrere kleinere. In diesem Fall könnte man argumentieren, dass die Leistung besser ist, wenn der Code nicht getrennt wird.

Ich kenne keine formalen Tests in diesem Bereich, obwohl es sehr wahrscheinlich ist, dass jemand sie durchgeführt hat.

Letztendlich würde ich sagen, dass es sich vor allem um bewährte Verfahren handelt und dass die Vorteile in Bezug auf Lesbarkeit und Organisation (insbesondere in Punkt 2) die Trennung des Codes in verschiedene Dateien zu einer viel besseren Option machen.

Die Antwort hängt wirklich davon ab, wie der Inline-Code (unter der Annahme, dass Javascript verwendet wird).

Wir haben eine Kombination aus Inline-Code, SSIs (serverseitigen Includes), Js-Dateien und CSS-Dateien verwendet, um die gewünschten Effekte zu erzielen und die Server-Rückläufe für onClick-Ereignisse zu reduzieren.

Es kann also irreführend sein, wenn jemand pauschal feststellt, dass die Verwendung von "Inline-Code" schlecht ist, ohne vollständig zu verstehen, wie er verwendet wird.

Wenn jedoch jede Seite dieselbe Kopie und denselben eingefügten Javascript-Code hat, anstatt eine js-Datei zu verwenden, dann ist das schlecht.

Wenn jede Seite einen eigenen kopierten und eingefügten CCS-Abschnitt hat, anstatt eine CSS-Datei zu verwenden, dann ist das schlecht.

Es ist auch sehr aufwändig, Ihre gesamte js-Bibliothek auf jeder Seite einzuschließen, insbesondere wenn auf dieser Seite keine der Funktionen verwendet wird.

Ich gehe hier von Inline-Javascript aus.

Ohne den Code zu sehen, ist es schwer, sicher zu sein. Ich vermute, er bezog sich auf eines von zwei Dingen:

1. Sie haben sich <script>auf der ganzen Seite verteilt
2. Alles, was Sie JS ist in der Kopfzeile der Seite, nicht in externen Dateien

Das erste ist eine schlechte Entwurfsentscheidung. Das Verteilen von Skripten in einer Quelldatei erschwert die Pflege der Seite erheblich , da Sie nach einem bestimmten Skript suchen müssen. Es ist viel besser, den gesamten Code an einem Ort aufzubewahren (am liebsten oben in der Quelldatei).

Was die zweite betrifft - das ist nicht unbedingt eine schlechte Sache. Seitenspezifischer Code sollte sich auf dieser Seite befinden. Wenn Sie doppelten Code zwischen den Seiten haben, sollten Sie ihn mit externalisieren <script src>. Wenn Sie dann eine neue Seite erstellen, können Sie diese Datei einfach einschließen, und alle dort behobenen Fehler müssen nicht noch einmal überprüft werden.

Ein Grund, InLine Javascript NICHT zu verwenden (nicht einmal onclick = "DoThis (this)" auf Schaltflächen), ist, wenn Sie beabsichtigen, Ihre Webanwendung zu einer Chrome App zu machen. Wenn Sie also vorhaben, Ihre Web-App in eine native Chrome-App zu portieren, schließen Sie zunächst KEIN Inline-Javascript ein. Dies wird gleich zu Beginn dessen erklärt, was Sie (obligatorisch) in Ihrer Web-App ändern müssen, wenn Sie beabsichtigen, es zu "verchromen".

Was sind die wirklichen Probleme beim Inline-Scripting?

Inline-Skripte sind schlecht und sollten vermieden werden, da sie das Lesen des Codes erschweren.

Code, der schwer zu lesen ist, ist schwer zu warten. Wenn Sie es nicht leicht lesen und verstehen können, was vor sich geht, können Sie Fehler nicht leicht erkennen. Wenn es schwierig ist zu warten, wird es später mehr Zeit verschwenden, wenn es Probleme gibt.

Die Schwierigkeit ergibt sich normalerweise aus verschachtelten Codierungen. In der nächsten Codezeile ist ein Problem aufgetreten. Können Sie es erkennen?

<a onclick='alert("What\'s going wrong here?")'>Alert!</a>

Im Idealfall ist der Code so geschrieben, dass Fehler leicht erkannt werden können. Joel Spolsky hat bereits 2005 einen großartigen Artikel geschrieben, der diesen Punkt hervorhebt . Die Codebeispiele könnten einige wesentliche Verbesserungen gebrauchen, da sie ein Alter von 9 Jahren aufweisen, aber das zugrunde liegende Konzept ist immer noch stark: Schreiben Sie Code auf eine Weise, die das Herausfinden von Fehlern erleichtert.

Gibt es ein signifikantes Leistungsproblem oder ist es meist nur eine Frage des guten Stils?

Inline-Scripting führt zu Wiederholungen. Anstatt eine Codezeile für 100 Seiten zu ändern, müssen Sie wahrscheinlich 100 Seiten einzeln ändern. Dies und die schlechte Lesbarkeit beeinträchtigen die Leistung des Betreuers erheblich . Die Programmierzeit ist mit echten Kosten verbunden, die sich schneller als die wenigen Millisekunden nach den meisten Codeoptimierungen auf das Endergebnis eines Unternehmens auswirken. Sicherlich ist es wichtig, Engpässe zu optimieren, aber der Leistungsunterschied des Codes ist in diesem Fall vernachlässigbar.

Kann ich meinen Vorgesetzten ein sofortiges Eingreifen in Bezug auf Inline-Skripte rechtfertigen, wenn andere Dinge, an denen gearbeitet werden muss, offensichtlichere Auswirkungen auf die Website haben könnten?

Nein. Wenn es dumm ist und funktioniert, ist es nicht dumm.

Die Programmierfolge lautet: Wenn es dummer Code ist und funktioniert, ist es kein dummer Code. Konzentrieren Sie sich auf die eigentlichen Probleme, bevor Sie versuchen, etwas zu reparieren, das nicht kaputt ist. Wenn der Inline-Code irgendwann aktualisiert werden muss, sei es in sechs Stunden, sechs Monaten oder sechs Jahren, korrigieren Sie den Code so, dass die zukünftige Wartung erleichtert wird.

Welche Faktoren würden Sie veranlassen, "hmm, professionelle Arbeit hier" zu sagen, und was würde Sie veranlassen, sich von einem offensichtlich amateurhaften Job zurückzuziehen?

Ich neige dazu, "professionell" nur als jemanden zu definieren, der für die Ausführung einer Aufgabe bezahlt wird, anstatt anzunehmen, dass er eine signifikante Fähigkeit in dem besitzt, wofür er bezahlt wird. Viele Profis sind sicher in der Lage, gute Arbeit zu leisten, aber meistens schlage ich mich vor Entsetzen vor der schrecklichen Arbeit zurück, die andere Profis geleistet haben, anstatt etwas, das sich ein Amateur ausgedacht hat. Ein Großteil meiner bisherigen Arbeit betraf die Bergung von Zugunglücksprojekten, die von den ursprünglichen Entwicklern verpfuscht wurden, sodass Ihre Laufleistung variieren kann.

Nach alledem ist es im Allgemeinen einfach, Programme in Unternehmensqualität auszuwählen