Czy kiedykolwiek korzystałeś z flame chart'u?

To jedno z tych narzędzi, które często przewija się w DevToolsach, a nie zawsze wiemy, co tak naprawdę pokazuje. Flame chart pomaga zrozumieć, co dokładnie robi przeglądarka i jak działa nasz JavaScript w czasie rzeczywistym.

Kategoryzacja zadań w flame graph

Na obrazie widać zadania ułożone warstwami – szare to zadania przeglądarki, niebieskie parsowanie HTML, fioletowe odpowiadają za layout i malowanie, a żółte to kod JS. Im szerszy pasek, tym więcej czasu dane zadanie zajęło.

Na przykład:

Przykładowy kod HTML ze skryptem wygeneruje poniższy wykres w flame chart.

Flame chart dla przykładu

Dlaczego to ważne? Wszystko w przeglądarce działa na głównym wątku. Jeśli nasz JS jest zbyt ciężki, to blokuje inne rzeczy – np. renderowanie strony czy reakcję na kliknięcia. W praktyce oznacza to wolniejsze działanie strony i gorszy UX. Warto więc czasem zerknąć na flame chart i sprawdzić, co można zoptymalizować – szczególnie pod kątem Core Web Vitals 🚀