Mam duże SPA z jednym dużym plikiem CSS, który zawiera wiele reguł. Niektóre z nich są nieaktualne i powinny zostać zreinstalowane lub usunięte. Jest skompilowany z zestawu plików źródłowych SCSS.Jak zmierzyć przetwarzanie CSS i czas renderowania w przeglądarce?
Jestem teraz refactoring style i zastanawiam się, czy istnieje sposób, aby zmierzyć, ile czasu zajmuje, aby wyświetlić stronę za pomocą jakiegoś określonego pliku CSS.
Powiedzmy, że jestem w punkcie początkowym, gdzie jest dużo bzdur w CSS, i widzę, że przy aktualnym nadętym arkuszu stylów potrzeba około 2,234 sekundy, aby renderować aplikację.
Następnie, stopniowo ją koryguję, stosuję pewne "optymalizacje" i na każdym kroku widzę, że z pewnymi zmianami czas renderowania maleje, staje się, powiedzmy, 2,21 sekundy, a przy niektórych innych zmianach czas ten rośnie, powiedzmy , 2,5 sekundy.
Czy istnieje sposób na uzyskanie tego wskaźnika?
Możesz użyć wtyczki, takiej jak Page Load Time [w magazynie wtyczek Chrome], aby podać szczegółowe informacje, ale według mojej wiedzy jedynymi danymi mierzonymi w czasie są czasy sieci (przynajmniej w Chrome). –
Po prostu ciekawy, ale dlaczego pojedynczy nadęty plik css dla całej aplikacji? Możesz rozbić 'scss' na moduły dla każdego komponentu i to zostanie skompilowane tylko dla komponentów, które są renderowane w przeglądarce. – nashcheez
Całkowicie nieprzetestowana i jestem z dala od klawiatury, ale co, jeśli wstawisz swój arkusz stylów, a następnie owiniesz swój element stylu w bloki skryptów, każde wywołujące 'performance.now()'? To powinno dać ci czas analizy. Teraz czas renderowania będzie trudniejszy ... – Kaiido