Измерение производительности загрузки HTML-документа с помощью JavaScript
В этом руководстве мы научимся измерять скорость загрузки различных частей HTML-документа с помощью JavaScript. Это поможет вам понять, как быстро загружается ваша веб-страница и оптимизировать её производительность.
Введение в измерение скорости загрузки
Загрузка веб-страницы проходит несколько этапов. Мы будем измерять время для следующих событий:
- Время начала загрузки страницы
- Время загрузки заголовка HTML
- Время до загрузки DOM
- Время выполнения операций с DOM
- Время, когда загрузка страницы завершена
Мы сделаем это с помощью JavaScript-кода, который вы вставите в раздел <head> вашего HTML-документа.
Код для измерения производительности
Скопируйте следующий код и вставьте его в раздел <head> вашего HTML-документа:
Как использовать код
После того, как вы вставите код на свою страницу, вам нужно будет открыть консоль браузера, чтобы увидеть результаты. Вот что вам нужно сделать:
- Откройте браузер и перейдите на вашу веб-страницу.
- Нажмите правую кнопку мыши и выберите "Просмотр кода" или "Инструменты разработчика" (DevTools).
- Перейдите на вкладку "Консоль" (Console).
После загрузки страницы вы увидите информацию о времени загрузки в виде таблицы.
Что показывает таблица
Таблица, которая появится в консоли, будет содержать следующие столбцы:
- Время начала: время, когда начинается загрузка страницы.
- Начало загрузки HEAD: время, когда загружается секция
<head>. - Начало загрузки DOM: момент, когда DOM полностью загружен и готов к взаимодействию.
- Операции с DOM: время, затраченное на выполнение операций с DOM.
- Конец загрузки DOM: время, когда все операции с DOM завершены.
- Начало и конец загрузки окна: время, когда начинается и заканчивается полная загрузка страницы.
Заключение
Теперь вы знаете, как измерять производительность загрузки HTML-документа с помощью JavaScript. Это может помочь вам оптимизировать загрузку вашего сайта и обеспечить лучшее пользовательское взаимодействие. Если у вас есть вопросы, не стесняйтесь задавать их!