Недавно я изучаю оптимизацию производительности фронт-конца. Необходимо понять процесс рендеринга страницы, чтобы назначить правильное лекарство и узнать узкое место производительности. Ниже приведены некоторые вещи, которые я видел, и я поделюсь ими с вами.
Ссылка: понимание рендерера
Рендеринг страницы имеет следующие характеристики :• Опрос однопоточных событий
• Четко определенная, непрерывная и упорядоченная работа (HTML5)
• Разделение и строительные деревья DOM
• Запросить ресурсы и предварительную нагрузку
• Построить рендеринг деревьев и нарисовать страницы
Конкретно :Когда мы получаем соответствующие байты HTML из сети, дерево DOM начинает строиться. Поток, который обновляет пользовательский интерфейс, отвечает за браузер. Построение дерева DOM заблокирована, когда:
• Поток отклика HTML блокируется в сети
• Есть разгруженные сценарии
• Узел сценария был встречен, но в настоящее время был файл разряженного стиля.
Дерево рендеринга построено из дерева DOM и будет заблокировано файлом стиля.
Поскольку он основан на опросе событий с одним потоком, даже если нет блокировки сценариев и стилей, рендеринг страницы будет заблокирован, когда эти сценарии или стили будут проанализированы, выполнены и применены.
Некоторые случаи, когда рендеринг страницы не блокирует :• Определенные атрибуты отложения и асинхронные атрибуты
• Файл стиля без соответствующего типа носителя
• Узел сценария или узел стиля не вставлен через анализатор
Здесь давайте проиллюстрируем это примером (полный код) :Скопировать код