Обзор

Проблема рендеринга веб-страницы возникает, когда страница не отображается или не функционирует правильно на устройстве пользователя. Эта проблема может проявляться по-разному, например, в виде неполных или искаженных изображений, нарушенной компоновки, длительного времени загрузки или неотзывчивых функций. Причиной этих проблем могут быть различные факторы. 

HTTP-архивация (HAR) - это инструмент, который может помочь диагностировать и решать проблемы рендеринга веб-страниц. HAR позволяет администраторам сети захватывать и анализировать данные сетевого трафика, включая запросы, реакции и задержки, которые возникают при доступе пользователя к веб-странице. Эти данные могут предоставить представление о том, как загружается и функционирует веб-страница, выявить любые узкие места или ошибки и помочь определить основную причину проблем с рендерингом.

В этой статье будет обсуждаться, как мы можем использовать данные HAR для устранения проблем с рендерингом веб-страниц.

Среда

HAR данные требуются.

Инструкции

Соберите данные HAR, воспроизводя проблему. Инструкции по сбору данных HAR смотрите в этой статье. Мы рассмотрим, как использовать собранные данные HAR для выявления проблем, анализируя коды состояния HTTP и время отклика HTTP-запросов.  

Коды состояния HTTP

Коды статуса HTTP предоставляют информацию о статусе запроса клиента к серверу, помогая диагностировать и устранять любые проблемы, которые могут возникнуть в процессе коммуникации. Ниже приведены распространенные коды состояния HTTP и их значение. Обратитесь к странице Определение кода статуса HTTP/1.1 для деталей.

• 200 - Успех
• 404 - Страница не найдена / Неудачный запрос
• 401 - Неавторизованный
• 403 - Запрещено 
• 304 - Не изменено (содержимое кешируется)
• 500 - Внутренняя ошибка сервера

Шаги

1. Загрузите собранные данные HAR в анализатор HAR Google
2. Отфильтруйте запросы по кодам состояния HTTP.
   Пример
   Ниже показан файл HAR, загруженный в анализатор HAR Google. Это соединение - попытка просмотреть Facebook, в которой содержимое не загрузилось правильно. Фильтруя по неуспешным (не 2xx) кодам состояния HTTP, мы можем увидеть, что есть много откликов 403 (запрещено) для доменного имени x.x.fbcdn.net (отмечено желтым). Следующим шагом будет дальнейшее расследование, почему эти запросы запрещены. 
   
   
   
3. Для стран, где доступ к Google ограничен (например, Китай), доступ к анализатору HAR Google невозможен. В этом случае вы можете загрузить данные HAR в том же инструменте разработки, в котором данные были собраны, а затем отсортировать по коду состояния HTTP в порядке убывания.
   

Долгое время загрузки веб-страницы

Одной из самых распространенных проблем, с которыми сталкиваются при работе с веб-приложениями, является медленная загрузка страниц, или, в некоторых случаях, полная невозможность загрузки. Используя собранные данные HAR, мы можем углубиться в детали каждого запроса и выявить, какие из них испытывают значительные задержки при загрузке. Возможно, что некоторые запросы застряли в состоянии постоянной загрузки, что способствует общему замедлению работы приложения. Анализ данных HAR позволяет нам точно определить эти проблемные запросы и предпринять соответствующие меры для их устранения.

Шаги

1. Загрузите собранные данные HAR в анализатор HAR Google

2. Нажмите на запрос, который задерживается с ответом (обычно это самая длинная полоса с общим временем)

3. Проверьте, что является основным фактором задержки (Блокировка, Ожидание или Получение)
   Важные поля времени
   Заблокированное время - Время, затраченное на ожидание отправки запроса браузером.
   Время ожидания - Время ожидания ответа от сервера. Если это значение высокое, это может означать, что сервер занят или испытывает проблемы с производительностью. Ниже мы видим, что ожидание от сервера составляет примерно 5 секунд:
   Время получения - Это время, которое требуется серверу для передачи необходимой информации клиенту. Обычно именно здесь мы обнаруживаем сетевую проблему. 
   
   ПРИМЕЧАНИЕ: Поле времени также доступно при использовании инструментов разработчика в Chrome, предоставляя аналогичную разбивку фаз времени. Для подробного объяснения фаз разбивки времени обратитесь к timing-preview.
   

4. Для стран, где доступ к Google ограничен (например, Китай), доступ к анализатору Google HAR не будет возможен. В этом случае вы можете загрузить данные HAR в тот же инструмент разработчика, в котором они были собраны.
5. Анализ будет аналогичен шагу 2, где мы сосредоточены на идентификации соединений с самыми длительными временем отклика. Чтобы проиллюстрировать, на приведенном ниже скриншоте, в разделе "Обзор", мы можем наблюдать несколько соединений, которые испытывают значительные задержки при загрузке. Выделяя эти соединения в разделе "Обзор", мы можем определить некоторые запросы, которым требуется более 30 секунд на загрузку. Выбор одного из этих соединений показывает, что это запрос к app.launchdarkly.com.
   
6. После идентификации запросов с длительным временем загрузки можно провести дальнейшее расследование для выявления основной причины задержки. Одним из потенциальных факторов для изучения является наличие внутренних файерволов, которые могут блокировать эти запросы.
7. В некоторых регионах, таких как Китай, это известная проблема, что некоторые длительно обрабатываемые запросы в приложениях могут быть связаны с встроенными трекерами. Для получения более подробной информации обратитесь к Китай | Проблемы рендеринга веб-страниц.