При попытке профилировать производительность сайта с помощью инструментов PageSpeed я получаю смутное предложение минимизировать работу основного потока, как показано ниже:
Ссылка «Узнать больше» здесь не совсем полезна. Я вижу, что стиль и макет составляют большую часть, поэтому я пытаюсь профилировать сайт с помощью Chrome Dev Tools. После запуска трассировки производительности я вижу все стили, макет и перерисовку в основном потоке.
Где я застрял и не нашел полезного руководства, как на самом деле преобразовать эти события на временной шкале в фактический элемент DOM или стили, которые вызывают узкое место в производительности или конкретное перекрашивание. Все примеры, которые мне удалось найти, показывают очень простой пример с несколькими элементами на странице.
Как отследить, что является причиной самых больших стилей и узких мест в плане фактического кода?