𝟳 𝗩ᴇ𝗿ｂᴏ𝗿𝗴ᴇɴᴇ 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁-𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲-𝗘𝗻𝗴𝗽 |\u00e4\u00dfe

Langsame Web-Apps scheitern selten an schlechten Algorithmen. Sie scheitern daran, wie Ihr Code mit dem Browser kommuniziert.

Ich habe über 300 Produktions-Apps profiliert. Dabei habe ich festgestellt, dass 73 % der Performance-Probleme auf diese 7 Quellen zurückzuführen sind.

  1. Layout Thrashing Dies geschieht, wenn Sie eine Layout-Eigenschaft auslesen und unmittelbar danach etwas in das DOM schreiben. Dies zwingt den Browser dazu, das Layout mehrfach neu zu berechnen. • Auswirkung: 40–60 % langsameres Rendering. • Lösung: Fassen Sie zuerst alle Lesezugriffe zusammen (Batching). Fassen Sie anschließend alle Schreibzugriffe mithilfe von requestAnimationFrame zusammen.

  2. Unbegrenzte Event-Listener Das Hinzufügen eines Listeners, ohne ihn wieder zu entfernen, verursacht Memory Leaks. Dies ist ein großes Problem in Single-Page-Apps. • Auswirkung: 15–30 % Speicherzuwachs pro Stunde. • Lösung: Verwenden Sie einen AbortController, um Listener zu bereinigen, wenn eine Komponente unmountet.

  3. Synchrones DOM-Auslesen in Schleifen Das Auslesen von Eigenschaften wie offsetWidth innerhalb einer Schleife, die auch in das DOM schreibt, verursacht ständige Reflows. • Auswirkung: 20–40 % Frame-Drops. • Lösung: Zwischenspeichern (Cachen) Sie Ihre Layout-Werte in einer Variable, bevor die Schleife beginnt.

  4. Fehlendes Batching mit requestAnimationFrame Direkte DOM-Änderungen bei Scroll- oder Resize-Events werden zu häufig ausgelöst. • Auswirkung: 10–25 % Ruckeln (Jank) beim Scrollen. • Lösung: Umhüllen Sie Ihre Scroll-Handler mit requestAnimationFrame, um sie mit dem Paint-Zyklus zu synchronisieren.

  5. Große JSON.parse-Aufrufe Das Parsen riesiger JSON-Dateien blockiert den Main Thread. Dies führt zu Eingabeverzögerungen (Input Lag). • Auswirkung: 50–200 ms Einfrieren pro Aufruf. • Lösung: Verwenden Sie Web Worker, um Daten außerhalb des Main Threads zu parsen.

  6. Komplexes Matching von CSS-Selektoren Tief verschachtelte oder komplexe Selektoren verlangsamen die Neuberechnung der Styles. • Auswirkung: 5–15 % zusätzliche Zeit für Styles. • Lösung: Vereinfachen Sie Ihre CSS-Struktur und verwenden Sie flachere Selektoren.

  7. Doppelte Bundle-Chunks Nicht optimierte Bundles verschwenden Bandbreite. • Auswirkung: 100–500 KB verschwendeter Datentransfer. • Lösung: Verwenden Sie Tools wie webpack-bundle-analyzer, um doppelten Code zu finden und zu entfernen.

So messen Sie Ihre Fortschritte: • Öffnen Sie die Chrome DevTools und gehen Sie zum Tab „Performance“. • Nehmen Sie eine 5-sekündige Sitzung auf. • Suchen Sie im „Main flame chart“ nach „Long Tasks“. • Wenden Sie eine Korrektur an und vergleichen Sie die Rendering- und Painting-Zeiten.

Konzentrieren Sie sich auf diese Bereiche, um Ihre Core Web Vitals-Werte zu verbessern.

Quelle: https://dev.to/kui_luo/how-to-find-and-fix-7-hidden-performance-bottlenecks-in-your-javascript-code-ek5