Verdammt, überlassen Sie es Patrick Brosset, über CSS-Leistung auf die zugänglichste und praktischste Weise zu sprechen. Nicht, dass CSS immer das ist, was die Geschwindigkeit beeinträchtigt, oder auch nur die am einfachsten zu erzielenden Verbesserungen bei der Leistung.
Aber *wenn* Sie nach Verbesserungen auf der CSS-Seite suchen, hat Patrick eine nette Methode, Ihre teuersten Selektoren mit Edge DevTools zu identifizieren.
- Öffnen Sie DevTools.
- Wechseln Sie zum Tab "Performance".
- Stellen Sie sicher, dass die Option „Erweiterte Rendering-Instrumentierung aktivieren“ aktiviert ist. Das hat mich im Prozess aufgehalten.
- Nehmen Sie einen Seitenaufruf auf.
- Öffnen Sie den Tab „Bottom-Up“ im Bericht.
- Betrachten Sie die Größe Ihrer neu berechneten Stile.
Von hier aus klicken Sie auf ein „Recalculated Style“-Ereignis in der Main-Wasserfallansicht und erhalten einen neuen Tab „Selector Stats“. Schauen Sie sich all diese köstlichen Details an!
Jetzt sehen Sie alle Selektoren, die verarbeitet wurden, und sie können sortiert werden nach: Dauer, Anzahl der Übereinstimmungen, Anzahl der Übereinstimmungsversuche und etwas namens „Fast Reject Count“, was, wie ich gelernt habe, die Anzahl der Elemente ist, die leicht und schnell von einer Übereinstimmung ausgeschlossen werden konnten.
Viele Einblicke hier, wenn CSS wirklich der Flaschenhals ist, der untersucht werden muss. Aber lesen Sie Patrick's vollständigen Beitrag auf dem Microsoft Edge Blog, denn er geht viel tiefer auf das Warum und Wie ein und führt eine vollständige Fallstudie durch.