Lighthouse DOM Treemap - Wie man die Größe des DOM reduziert
In den letzten Jahren hat Google viele Warnungen bezüglich der übermäßigen Größe Ihrer Webanwendung herausgegeben. Dies hat für den Benutzer einen sehr hohen Preis: langsame Darstellung und schlechte Leistung des Browsers und der Benutzererfahrung.
Um die Leistung Ihrer Anwendung zu verbessern, hat Lighthouse die Option eingeführt, die Größe des DOM zu reduzieren. Für viele Unternehmen wurde diese Maßnahme eingeführt, um den Speicherverbrauch zu reduzieren und somit die Größe des gesamten Dokuments zu verringern. Leider könnte eine sehr geringe Verbesserung des Speicherverbrauchs, zumindest in Chrome, dieses Leistungsproblem wieder aufbringen.
Um Ihnen dabei zu helfen, haben wir in Chrome jetzt eine neue Funktion, um die Stellen im DOM-Baum zu lokalisieren, die wirklich schwer sind: DOM-Treemap.
Die Treemap ist eine Erweiterung der Chrome Developer-Tools, in der Sie einen zusätzlichen Tab für die Visualisierung des DOM-Baums hinzufügen können.
Sie können den Standort aller DOM-Knoten auf Ihrer aktuellen Seite sehen. Um herauszufinden, welche Elemente die meisten Kinder haben, klicken Sie einfach auf die Schaltfläche "Kinder" in der unteren rechten Ecke der Symbolleiste.
Das Tool wurde auch um eine Funktion erweitert, um BEM-Affiniciados zu visualisieren. Dadurch können Sie sehen, wie knotenintensiv Ihre BEM-Komponenten im Durchschnitt sind.
