Der Flaschenhals des  Webs

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Steve Souders, „JavaScript dominiert die Browser-CPU“

Vor zehn Jahren war das Netzwerk der Hauptflaschenhals. Heute ist JavaScript der Hauptflaschenhals. Die Menge an JavaScript auf Seiten wächst rasant (fast 5x in den letzten 7 Jahren). Um das Rendering von Seiten schnell zu halten und sie schnell erscheinen zu lassen, müssen wir uns auf die JavaScript-CPU-Zeit konzentrieren, um die Blockierung des Hauptthreads des Browsers zu reduzieren.

Alex Russell, beschreibt einen Prototyp von „Never-Slow Mode“ in Chrome

… blockiert große Skripte, setzt Budgets für bestimmte Ressourcentypen (Skript, Schriftart, CSS, Bilder), schaltet document.write() aus, unterdrückt synchrone XHRs, aktiviert client-hints flächendeckend und puffert Ressourcen ohne gesetzten Content-Length.

Craig Hockenberry, postet eine Idee im WebKit-Bugtracker

Ohne Grenzen gibt es keinen Anreiz für einen JavaScript-Entwickler, seine Codebasis klein und Abhängigkeiten minimal zu halten. Es ist einfach, ein weiteres Framework hinzuzufügen, und dieses Framework fügt ein weiteres Framework hinzu, und ehe man sich versieht, lädt man zig Megabyte an Daten, nur um ein paar hundert Kilobyte Inhalt anzuzeigen. …

Die Situation, die ich mir vorstelle, ist, dass eine Website mir jede gewünschte Werbung anzeigen kann, solange sie die Gesamtgröße unter einem festen Betrag hält, sagen wir einem Megabyte pro Seite. Wenn sie sich anstrengen, ihre Website effizient zu gestalten, bin ich gerne bereit, meine Augen zu geben.

Es ist leicht, mit dem Finger auf Frameworks und Skripte von Drittanbietern für große Mengen an JavaScript zu zeigen. Wenn Sie daran interessiert sind, mehr über die Größe von Frameworks zu erfahren, könnten Sie es genießen, mich und Dave mit Jason Miller darüber diskutieren zu hören.

Und wo wir gerade von Drittanbietern sprechen, Patrick Hulce hat Third Party Web erstellt: „Dieses Dokument ist eine Zusammenfassung, welche Skripte von Drittanbietern heute für übermäßige JavaScript-Ausführung im Web am meisten verantwortlich sind.“

Manchmal ist das Anprangern eine wirksame Taktik, um Veränderungen anzustoßen.

Addy Osmani schreibt über eine ESLint-Regel, die bestimmte Pakete verbietet, mit denen Sie die Verwendung bekanntermaßen riesiger Pakete verhindern können. Wenn also jemand versucht, das gesamte lodash oder moment.js zu laden, kann dies auf Linting-Ebene gestoppt werden.

Tim Kadlec fasst die Fäden sehr gut in „Limiting JavaScript?“ zusammen. Wenn Ihre sofortige Reaktion darauf ist, dass JavaScript unfair als Bösewicht ins Visier genommen wird, räumt Tim ein, dass

Eine häufig geäußerte Sorge war: „Wenn JavaScript, warum dann nicht auch andere Ressourcen?“ Es stimmt; JavaScript wird oft kritisiert, wenn auch nicht ohne Grund. Byte für Byte ist JavaScript die bedeutendste Beeinträchtigung der Leistung im Web, daher ist es sinnvoll, sich auf die Reduzierung der Menge, die wir verwenden, zu konzentrieren.

Der Punkt ist jedoch gültig. JavaScript mag häufiger der Hauptschuldige sein, aber es ist nicht der Einzige.