Сегодня я представлю алгоритм получения конкретного индикатора во фронтенд-мониторинге, некоторые спросят, а зачем говорить только об одном индикаторе? Это связано с тем, что большинство текущих показателей, таких как время белого экрана, время загрузки DOM и т. д., можно получить более точно с помощью различных API, предоставляемых современными браузерами, а обсуждаемый сегодня показатель был получен в прошлом. чтобы получить его значение через логические точки захоронения.Поэтому при выполнении некоторого мониторинга внешнего интерфейса необходимо изменить способ, которым точки захоронения страницы для этого значения в соответствии с потребностями бизнеса, что будет громоздко.Для связанных проектов, когда я столкнулся с этой проблемой, я думал, можно ли получить это значение таким образом, чтобы его не нужно было закапывать? Через некоторое время я, наконец, разобрался с алгоритмом, и сегодня я познакомлю вас с интеллектуальным алгоритмом сбора данных для индикаторов FMP (первое значение — краска).
Что такое ФМП
Прежде чем ответить на этот вопрос, давайте сначала разберемся в основных статистических методах показателей современной производительности внешнего мониторинга.После 2013 года организация по стандартизации запустилаperformance timing api,Как показано ниже
Этот API подсчитывает переход браузера от URL-адреса кwindow.onloadМомент времени, когда событие инициируется, например момент времени, когда начинается запрос——requestStart, момент времени, в который заканчивается ответ —responseEnd, По этим временным точкам мы можем рассчитать некоторые длительности, которые имеют рекомендации по качеству загрузки страницы, например следующие:
TTFB : ResponseStart - RequestStart (время первого пакета, обратите внимание на время сетевого соединения)
FPT: ResponseEnd - FetchStart (время первого рендеринга/время белого экрана)
TTI: DomInteractive – FetchStart (время до первого результата)
Готово : DomContentLoadEventEnd - FetchStart (время завершения загрузки)
Загрузка: LoadEventStart - FetchStart (время полной загрузки страницы)
С помощью этих индикаторов мы можем получить много полезной информации о загрузке веб-страницы и составить обзор производительности веб-страницы.
Приведенные выше показатели можно использовать для количественного измерения веб-страницы, но на самом деле это измерение может отражать производительность только с одной точки зрения, например, если TTFB быстрый, это означает, что пользователи могут быстро увидеть содержимое страницы. ? Это не обязательно верно, поэтому люди начали анализировать производительность загрузки веб-страницы с точки зрения пользователя и разделять взгляд пользователя на процесс загрузки на следующие этапы:
Загружается ли страница нормально (происходит)
Является ли содержимое загрузки страницы достаточным (полезным)
Является ли страница уже рабочей (пригодной для использования)
Является ли страница интерактивной, а анимация плавной (приятной)
И о чем мы говорим сегодняFMP（first meaningful paint）, собственно, ответis it useful, Достаточно ли загруженного контента — понятие, которое трудно определить. Каждая веб-страница имеет свои характеристики, и только разработчики и продукты могут сравнивать и определять, какой элемент загружается в тот момент времени, который принадлежитFMP, Сегодня мы обсудим, как грамотно узнать главный элемент страницы и определитьFMP
Условия для того, чтобы стать элементом FMP
Сначала мы можем посмотреть на картинку ниже:
Мы можем найти на странице сравненияusefulСодержимое страницы богато информацией, такой как изображения, видео, анимация и содержимое, занимающее большую область просмотра. На странице есть две формы содержимого, которые можно рассматривать какusefulБлок A представляет собой отдельный элемент, другой представляет собой комбинацию множества элементов, состоящих из крупных элементов, таких как видеоэлементы, баннер FIG, элементы, которые принадлежат одному блоку, но в виде списка изображений комбинация нескольких изображений , эта комбинация элементов, принадлежащих
Подводя итог ставшим состоянием элементов ФМП:
Относительно большой объем
Большая часть видимого на экране
Доля элементов загрузки ресурсов выше (img, svg, video, object, embed, canvas)
Основной элемент может состоять из нескольких
Как разрабатываются алгоритмы
ранее представленныйFMPПонятие также становитсяFMPусловия, давайте посмотрим, как спроектироватьFMPПолученный алгоритм, согласно приведенному выше введению, мы знаем, что алгоритм делится на следующие две части:
ПолучатьFMP元素
рассчитатьFMP元素время загрузки
Если вы поняли принцип загрузки браузера, то знаете, что браузер будет постепенно анализировать html-документ после получения html-страницы, при встрече с javascript он остановит синтаксический анализ html-документа, выполнит javascript и продолжит синтаксический анализ html-документа. html после выполнения. , пока вся страница не будет проанализирована. Помимо загрузки элемента в html-документ, страница может генерировать динамическую загрузку фрагмента элемента при выполнении javascript, вообще говоря, в этот период будет загружен первый элемент экрана. Таким образом, нам нужно только отслеживать загрузку элементов и моменты времени загрузки, а затем выполнять расчет.
Конкретный алгоритм выглядит следующим образом
Я поместил соответствующие ссылки на код в конце, и я объясню весь процесс алгоритма шаг за шагом ниже.
Я разделил весь процесс на две следующие две части:
Отслеживайте загрузку элементов, в основном для определения момента времени, когда загружаются обычные элементы.
Вы можете видеть, что сначала мы выполнилиfirstSnapshotметод для записи момента времени, когда элемент был загружен до выполнения кода
Следующая инициализацияMutationObserver, начать слушатьdocumentСитуация загрузки, когда происходит обратный вызов, записывает текущий вperformance.timing.fetchStartвременной интервал, а затем глубоко пройтись по элементам тела, сделать точки и записать, когда будет записан обратный вызов, как показано на следующем рисунке.
Последний мы будем вwindow.onloadПри срабатывании условия для проверки прекращения прослушивания, как показано ниже
Если время наблюдения превышаетLIMIT, либо интервал времени между обратными вызовами превысил 1с, считаем, что страница стабильна, останавливаем мониторинг загрузки элемента dom и запускаем процесс расчета
Полный мониторинг, выполнение расчета оценки элемента
Во-первых, как мы уже говорили ранее, вклад наших элементов на страницу разный, и элементы, загруженные ресурсами, будут оказывать большее влияние на зрительные ощущения пользователя, такие как изображения, элементы с фоном, видео и т. д., поэтому я разработал систему весов следующим образом:
можно увидетьsvg,imgВес 2,canvas,object,embed,videoВес равен 4, остальные элементы равны 1,
То есть, если площадь изображения составляет 1/2 площади первого экрана, его влияние будет таким же, как и у обычных элементов, занимающих первый экран.
Затем мы возвращаемся к коду, мы сначала выполняем поиск в глубину по всей странице, а затем выполняем расчет оценки для каждого элемента, как показано ниже.
Вы можете видеть, что мы проходимelement.getBoundingClientRectПолучите положение и размер элемента, а затем вычислите"width * height * weight * 元素在viewport的面积占比"Произведение , определите окончательную оценку элемента, затем сравните сумму оценок подэлементов элемента с его оценкой, перейдите к большему значению и запишите набор элементов оценки.
Определяется расчетным путемFMPэлементы, вычислить окончательныйFMPвремя
С помощью вышеуказанных шагов мы получили набор, который представляет собой «набор элементов с наивысшим баллом в видимой области», мы возьмем среднее значение баллов этого набора, а затем отфильтруем набор элементов выше среднего. оценка, а затем провести расчет времени
Как видно, есть два случая, с которыми нужно иметь дело:
weightЕсли это обычный элемент 1, то мы запросим ранее сохраненную коллекцию времени через метку на элементе, чтобы получить момент времени загрузки этого элемента.
weightЕсли элемент не 1, то на самом деле имеет место ситуация загрузки ресурса.Время загрузки элемента фактически является временем загрузки ресурса.Проходимperformance.getEntriesЧтобы получить время загрузки соответствующего ресурса, получите скорость загрузки элемента
Наконец, перейдите к максимальному значению времени загрузки всех элементов, так как загрузка страницыFMPвремя
наконец
Вышеизложенное является более конкретным процессом всего алгоритма.Некоторые люди могут сказать, является ли расчет этой вещи точным? Этот алгоритм на самом деле является алгоритмом, основанным на анализе признаков и определенных правилах.В целом, он будет относительно точным.Конечно, если макет веб-страницы своеобразен, могут быть некоторые отклонения. Я также надеюсь, что все смогут работать вместе, чтобы обогатить эту вещь.FMPЭтот метод расчета дает свои рекомендации
прикрепленный кодСвязь