Оптимизация прокрутки Google Search Console
Йохан Исакссон рассказал, как он улучшил производительность прокрутки большого списка Google Search Console — "How I made Google’s data grid scroll 10x faster with one line of CSS".
Йохан не работает в Google, но много работает с Google Search Console — SEO-инструмент Google. Он обратил внимание, что при прокрутке списка с 500 элементами производительность перерисовки страницы падает до 5-7 fps. Как оказалось, прокрутка большого списка приводит к перерасчёту раскладки тридцати тысяч DOM-элементов страницы.
Для решения этой проблемы Йохан воспользовался CSS-свойством contain, с помощью которого можно изолировать отдельные части страницы, чтобы их изменение не влияло на производительность рендеринга всей страницы:
table {
contain: strict;
}После внесённого изменения производительность рендеринга улучшилась в 10 раз.
Хорошая статья. Рекомендую почитать всем, кому интересен пример поиска и устранения проблем производительности рендеринга.