Точный и автоматизированный учет времени в верхней части страницы

Эта статья была опубликована вМы покупаем блог фронтенд-команды

Автор: Лю Юаньян

Компания: Weidian — команда разработчиков

Дата: 2018-03-05

задний план

Что касается метода получения данных о производительности внешнего интерфейса, большая часть отрасли в настоящее время использует метод ручного встраивания, то есть в коде вручную определяют позицию, где завершается первый экран, и добавляют код, записанный на первый экран там, похожий на:firstscreen.report()так.

Делается это просто и легко, но недостатки тоже очевидны:

смешанный с бизнес-кодом

Общие требования к мониторингу смешаны с бизнес-кодом
Неполное покрытие

Разработчики страниц обязаны сознательно вручную добавлять встроенный код, а охват встроенных точек в бизнесе может не достигать 100%.
Точность не обязательно высокая

Так как разработчики обязаны сами судить о расположении статистического скрипта, то будут некоторые неточности, т.к. у всех разное понимание первого экрана

Основываясь на приведенном выше анализе, мы недавно попробовали некоторые решения, пытаясь автоматизировать расчет времени над сгибом, экономя рабочую силу и повышая точность.

определение

Определение времени в верхней части страницы может варьироваться от компании к компании.В этой статье время в верхней части страницы относится к:

Если на первой странице страницы есть изображение

首屏时间 = 首屏图片全部加载完毕的时刻 - window.performance.timing.navigationStart

Если над сгибом нет изображения

首屏时间 = 页面处于稳定状态前最后一次 dom 变化的时刻 - window.performance.timing.navigationStart

Принцип реализации

Общая идея такова:

Начиная с загрузки страницы, проверяйте через определенные промежутки времени и постоянно записывайте список картинок и другую информацию на первом экране страницы в каждый момент времени.

Вопрос: Через какие промежутки ставятся точки?
Узнать момент Т1, когда первый экран страницы находится в стабильном состоянии (до этого момента первый экран страницы может быть стабильным в течение определенного периода времени)

Вопрос: Как узнать этот Т1?
Основываясь на количестве изображений над кратным сгибом в T1, перемещайтесь вперед и назад, чтобы найти время последней точки T2, которое согласуется с изображением над кратным сгибом в T1 среди всех точек.
Подсчитайте все изображения, загруженные во время T2, и завершите время T3.
T3 — момент завершения первого экрана, сообщите об этом

Ниже, один за другим, чтобы решить проблемы, упомянутые выше:

Вопрос: Как узнать момент Т1, когда надстворчатая часть находится в устойчивом состоянии?

Разделим страницу от загрузки до рендеринга на два этапа: 1. Получить данные 2. После сбора данных рендерить страницу.

Эта логика соответствует большей части логики страницы: сначала получить данные, а затем отобразить страницу.

решение:
1. Отслеживайте объект отправки XHR через аспект AOP, захватите первый запрос XHR на странице, начните с момента отправки первого запроса XHR и подсчитайте все запросы, отправленные в течение 1000 мс, в массив Request.
  
  Запросы, которые, по нашему мнению, могут повлиять на верхнюю часть страницы, находятся в[第一个 xhr 请求发出的时刻，第一个 xhr 请求发出的时刻 + 1000ms]выдано в срок.
2. Для последовательных запросов (то есть следующий запрос зависит от возвращаемых данных предыдущего запроса) после возврата каждого запроса вновь выданные запросы в течение 500 мс добавляются в массив Request.
  
  Метод запроса данных некоторых страниц последовательный, и данные первого экрана могут быть загружены после двух последовательных запросов.
  
  Запросы, которые затрагивают выше сгиба, также могут быть сделаны в этой форме.
3. Запросы, учитываемые в массиве Запрос, в основном включают все запросы данных, которые влияют на первый экран, а также некоторые запросы данных, которые не влияют на первый экран.
4. Для вышеуказанных запросов найдите время T1, когда будут возвращены все данные, а затемT1 = T1 + 300ms, чтобы обеспечить отрисовку страницы после получения данных (достаточно 300 мс для одной отрисовки).
5. В это время считается, что первый экран страницы находится в устойчивом состоянии.
Вопрос: Через какие промежутки ставятся точки?
- MutationObserver
  
  Мы все знаем, что объект MutationObserver используется для захвата изменений страницы dom, поэтому в скрипте мы используем MutationObserver для отслеживания изменений dom и запускаем точку каждый раз при изменении dom (для подсчета информации о первом изображении экрана в этот момент).
- setInterval
  
  setInterval также может реализовать управление временем
- Комбинация MutationObserver и setInterval
  
  Однако время срабатывания функции обратного вызова MutationObserver не может контролироваться разработчиком.Возможно несколько ситуаций:
  - Расстояние между двумя обратными вызовами может составлять сотни миллисекунд или даже больше 1 секунды, что приводит к большим статистическим ошибкам.
  - В некоторых случаях меняется уже не дом, а элементы страницы,imgизsrcизменения или элементыbackground-imageПроизошло изменение, и обратный вызов в MutationObserver не будет запущен, что приведет к статистической ошибке
  Поэтому наше текущее решение состоит в том, чтобы объединить MutationObserver и setInterval и запустить setInterval с интервалом обратного вызова MutationObserver, чтобы гарантировать, что интервал между точками не будет слишком длинным во время загрузки страницы и улучшить статистическую точность.

статистическая ошибка

Даже если используется упомянутое выше сложное управление и суждение, ошибка все равно существует, тогда где ошибка?

Как показано ниже:

不稳定状态（1 images）   稳定状态2（2 images）      稳定状态1（2 images）
    |                        |                       |
    |________________________|_______________________|
    t1                       t2                      t3

Согласно изложенной теории возьмемt2Момент — это момент, когда можно считать первый экран, а момент загрузки двух изображений — это момент завершения первого экрана.

t2а такжеt1Время на расстоянии 1 фото.

Согласно нашей теории, время завершения первого экрана должно быть через некоторое время после t2.t2.n.

Мы не знаем, когда загрузится картинка с фактической разницей, она может быть вt2Он уже был загружен раньше или, возможно, сделал запрос, но еще не загружен.

Ошибка здесь, она всегда будет там.

Но что нам нужно считать, так это данные первого экрана в допустимом диапазоне ошибок.Согласно отзывам из деловой практики компании, надежность данных очень высока.

Talk is cheap, show me the code

Мы также открыли исходный код этого гаджета:

github: auto-compute-first-screen-time

npm: auto-compute-first-screen-time

Друзья могут использовать, жаловаться и улучшать.