Jakie akcje wywołują "Aktualizuj drzewo warstw"?

Question

Czy ktoś mógłby mi pomóc określić, które akcje powodują działanie "Aktualizuj drzewo warstw"? A jaki wpływ ma "Aktualizacja drzewa warstw" na czas ładowania strony?

Answer 1

Wyjazd https://csstriggers.com/

to narzędzie stworzone przez kilku inżynierów Google (Paul i Surma), który odpowiada na pytanie „Jeśli zmienię specyficzną właściwość CSS, co praca będzie przeglądarka być zmuszony do zrobienia? " Praca przeglądarki podzielona jest na trzy główne obszary (układ, farba i kompozyt), a to narzędzie określa, co jest wyzwalane przez właściwości CSS w różnych przeglądarkach. Zauważ, że są pewne problemy z informacją na temat Webkita i Gecko (zobacz this issue na GitHub), ale ogólnie jest to świetny zasób.

Takie narzędzie powinno być głównym źródłem informacji, ponieważ dostawcy przeglądarek zawsze optymalizują różne rzeczy, a programista nie zawsze może polegać na statycznych informacjach, które czytały w przeszłości.

Jeśli jesteś ciekawy, jak to narzędzie pobiera swoje dane, możesz sprawdzić source code. Używa zestawu w pełni zautomatyzowanych testów, aby wykorzystać różne silniki przeglądarki i teoretycznie powinien być zawsze aktualny.

Ponieważ to narzędzie jest zalecane przez programistów Google, jest mało prawdopodobne, że kiedykolwiek przestanie działać, ale w takim przypadku zawsze możesz zbudować go samodzielnie, korzystając z kodu źródłowego.

Jeśli chodzi o czas poświęcony na aktualizację układu (i drzewek warstw), nie ma łatwej odpowiedzi. Liczba elementów DOM, które masz w swojej aplikacji, może wpłynąć na czas trwania każdego układu, a także można wywołać "wyrzucanie układu" przez wielokrotne aktualizowanie, a następnie sprawdzanie informacji o układzie. Może to spowodować, że przeglądarka wyda znacznie więcej czasu na tym etapie. Jeśli obawiasz się o konkretny problem z wydajnością, najlepszym sposobem jest zmierzenie tego, co faktycznie dzieje się w Twojej własnej aplikacji za pomocą narzędzi wydajności przeglądarki.