Обзор браузера
В настоящее время существует 5 основных браузеров: Internet Explorer, Firefox, Safari, Chrome и Opera. согласно сСтатистика браузера StatCounter, текущая (по состоянию на май 2019 года) общая рыночная доля браузеров Firefox, Safari и Chrome составляет почти 83,66%. Как видите, в наши дни браузеры с открытым исходным кодом занимают очень солидный сегмент на рынке браузеров.
Вышеуказанные пять браузеров имеют разные ядра браузера, что приводит к разному отображению одной и той же HTML-страницы. Ядром Internet Explorer является Trident, ядром Firefox является Gecko, ядром Chrome и Safari является Webkit, ядром Opera является Presto.
Во-вторых, процесс рендеринга браузера
Давайте в общих чертах взглянем на диаграмму пути ключа рендеринга браузера:
1. Парсинг HTML, построение дерева DOM
После того, как браузер получит байтовые данные HTML из сети или с жесткого диска, он будет анализировать байты в дереве DOM с помощью следующего процесса:
- Кодировка символов: Сначала преобразуйте необработанные байтовые данные HTML в символы указанной кодировки файла.
-
токенизация: Затем браузер преобразует строку в различные токены в соответствии со спецификацией HTML (например,
<html>,<body>,<p>Такие теги, а также строки и атрибуты в тегах преобразуются в токены, каждый из которых имеет особое значение и правила). - сгенерировать объект узла: каждый токен затем преобразуется в объект, который определяет его свойства и правила, объект-узел.
- Построить DOM-дерево: Наконец, объект-узел конструируется в древовидную структуру, то есть дерево DOM. Между тегами HTML существуют сложные отношения родитель-потомок, и древовидная структура может просто интерпретировать такие отношения.
Следующее лучше понять с помощью фрагмента HTML-кода и изображений.Байт -> Символ -> Токен -> Объект узла -> Объектная модель"этот процесс:
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="test.png"></div>
</body>
</html>
2. Парсинг CSS, построение дерева CSSOM
Парсинг браузера<link>тег, браузер начинает анализировать CSS, создавая дерево CSSOM, подобное дереву DOM. Код style.css выглядит следующим образом:
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
3. Рендеринг дерева
После построения дерева DOM и дерева CSSOM браузер имеет только два независимых набора объектов.Дерево DOM описывает структуру и содержимое документа, а дерево CSSOM описывает правила стиля соответствующего документа.Для отображения страницы ему необходимо Дерево DOM и дерево CSSOM объединяются для построения дерева рендеринга.
4. Макет
После построения дерева рендеринга браузер получает содержимое и стиль каждого узла.Следующим шагом является вычисление точного положения и размера каждого узла в окне браузера, то есть макет.
На этапе компоновки перейдите от корневого узла дерева рендеринга и используйте режим блочной модели для представления расстояния между каждым узлом и другими элементами, чтобы определить положение и размер каждого элемента на экране.
Блочная модель: включая поля, отступы, границы и содержимое. Стандартная ширина/высота блочной модели = содержимое; ширина/высота блочной модели IE = содержимое + отступы + граница.
5. Раскрасьте страницу рисования
Когда макет макета будет завершен, браузер немедленно выдаст событие Paint и начнет рисовать дерево рендеринга в пикселях. Время, необходимое для рисования, пропорционально сложности стиля CSS. После завершения рисования пользователь может см. последнюю страницу на экране эффект рендеринга.
Если вы хотите более подробно изучить процесс рендеринга браузера, вы можете использовать панель «Производительность» в инструментах разработчика Chrome, чтобы записать процесс браузера от запроса до рендеринга, как показано на следующем рисунке:
3. Схема оптимизации рендеринга
1. Оптимизируйте схему критического пути рендеринга
Путем оптимизации критического пути рендеринга можно оптимизировать производительность рендеринга страницы и сократить время белого экрана страницы.
-
Оптимизировать JS: загрузка файла JavaScript блокирует построение дерева DOM, которое можно передать
<script>Тег добавляет асинхронный атрибут async, чтобы синтаксический анализ HTML в браузере не блокировался файлом js. -
Оптимизировать CSS: каждый раз, когда браузер встречает
<link>тег, браузер должен отправить запрос на сервер для получения файла CSS, а затем продолжить построение дерева DOM и дерева CSSOM, которые могут объединить все CSS в один файл, уменьшить HTTP-запросы, сократить время загрузки туда и обратно ключевых ресурсов и оптимизировать скорость рендеринга.
2. Другие схемы оптимизации
-
Загрузить часть HTML
Браузер сначала загружает основной HTML для инициализации статической части, а динамически изменяющийся HTML-контент загружается через Ajax-запросы. Это снижает нагрузку на браузер при построении дерева DOM и делает страницу более быстрой для пользователя. -
компрессия
Удалите лишние символы (такие как ненужные комментарии, пробелы и символы новой строки) из файлов HTML, CSS и JavaScript, а затем сожмите их, чтобы уменьшить размер данных файла и ускорить анализ браузером кодировки файла. -
Оптимизация загрузки изображений
1) Маленькие иконки объединены в изображения спрайтов, благодаря чему уменьшается количество HTTP-запросов на img;
2) Когда загружено много изображений, применяется схема ленивой загрузки, и отрендеренные изображения загружаются, когда пользователь прокручивает видимую область страницы. -
HTTP-кеширование
Браузеры поставляются с возможностями кэширования HTTP, просто убедитесь, что заголовок каждого ответа сервера содержит следующие атрибуты:
1) ETag: ETag — это токен сквозной проверки, который проверяет наличие обновлений ресурсов и не передает никаких данных, если ресурс не изменился. Когда браузер отправляет запрос, он отправляет ETag на сервер, а сервер проверяет токен по текущему ресурсу (обычно ETag — это отпечаток, полученный после хэширования контента), если ресурс не изменился, сервер вернет ответ 304 Not Modified, тогда браузеру не придется повторно загружать ресурс, а он продолжит повторное использование кеша.
2) Кэш-контроль: Cache-Control определяет стратегию кэширования, которая указывает, при каких условиях ответ может быть кэширован и как долго он может кэшироваться.
а. без кеша: no-cache означает, что вы должны сначала подтвердить у сервера, изменился ли возвращенный ответ, а затем использовать ответ для удовлетворения последующих запросов на тот же URL (каждый раз сервер будет отправлять запрос на сервер в соответствии с ETag для подтвердите изменение, если оно не изменилось, браузер не скачает ресурс). no-store напрямую запрещает браузеру и всем промежуточным кэшам сохранять любую версию возвращаемого ответа. Проще говоря, эта политика отключает любое кэширование и загружает ответ сервера полностью при каждой отправке запроса.
б. публичный и частный: Если ответ помечен как общедоступный, браузер может кэшировать ответ, даже если с ним связана HTTP-аутентификация, даже если код состояния ответа обычно не кэшируется. Если ответ помечен как частный, то ответ обычно кэшируется только для одного пользователя, поэтому промежуточный кэш (CDN) не может кэшировать его.
в. максимальный возраст: max-age определяет максимальное время кэширования от времени запроса в секундах.
резюме
Сегодня здесь представлен процесс рендеринга браузера и схема оптимизации.Если у вас есть больше и лучшие схемы оптимизации производительности страницы, вы можете обменяться дополнительной информацией.Добро пожаловать, чтобы оставить сообщение в области комментариев~~