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

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

задний план

Оптимизация производительности — это цель всех фронтендеров, и на этом пути есть разные методы. В этой статье рассказывается о том, как определить показатели эффективности и сообщить о них.

показатель

FP

имея в виду

ФП, полное имяFirst Paint, что переводится как首次绘制, является первым на временной шкале时间点, которое представляет собой время, необходимое для отображения первого пикселя веб-страницы на экране, то есть время, когда страница впервые визуально изменяется на экране.

статистическая логика

Через performance.getEntriesByType('paint') определите время первой отрисовки. Такие как:

function getFPTime(){
    const timings = performance.getEntriesByType('paint')[0];
    return timings ? Math.round(timings.startTime) : null
}

FCP

имея в виду

ФКП, полное имяFirst Contentful Paint, что переводится как首次内容绘制, как следует из названия, представляет собой первый раз, когда браузер рисует на экране.内容.

Примечание. Только первый раз, когда текст, изображение (включая фоновое изображение), небелый холст или SVG отрисовываются, считается FCP.

статистическая логика

Через performance.getEntriesByType('paint') возьмите время второй боли или пронаблюдайте время изменения первого узла через Mutation Observer. Такие как:

const domEntries = []
const observer = new MutationObserver((mutationsList)=>{
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        if (mutation.type == 'addedNodes') {
            //TODO新增了节点，做处理，计算此时的可见性/位置/出现时间等信息，然后 push 进数组
            ...
            domEntries.push(mutation) 
        }
    }
});

function getFPTime(){
    const timings = performance.getEntriesByType('paint');
    if(timings.length > 1)return timings[1]
    return timings ? Math.round(timings.startTime) : null
    //伪代码,算 DOM 变化时的最小那个时间，即节点首次变动的时间
    return Math.round(domEntries.length ? Math.min(...domEntries.map(entry => entry.time)) : 0);
}

MutationObserverПонимание и использование добавок:

Уведомление

Основное различие между двумя индикаторами FP и FCP заключается в следующем: FP — это когда браузер начинает отображать контент на экране, пока он начинает визуально меняться, независимо от того, какой контент вызывает визуальное изменение, в этот момент, это время точка называется FP.

Напротив, FCP относится к первому разу, когда браузер извлекает содержимое из DOM. Например: текст, изображения, SVG, элементы холста и т. д. Этот момент времени называется FCP.

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

FMP

имея в виду

ФМП, полное имяFirst Meaningful Paint, что переводится как首次有意义的绘制, это время, когда основной контент страницы появляется на экране, что является основным показателем воспринимаемого пользователем опыта загрузки. В настоящее время не существует стандартизированного определения, поскольку трудно определить ключевое содержание различных типов страниц обычным способом.

статистическая логика

В настоящее время нет единой логики.У Ali есть стандарт для самого высокого видимого инкрементного элемента, который использует метод обхода в глубину.Подробности можно увидеть:zhuanlan.zhihu.com/p/44933789

Во-вторых, его можно настроить, например, наблюдение за изменениями узлов страницы в течение определенного периода времени (например, первых 20 секунд) загрузки страницы через Mutation Observer, то есть такие изменения, как добавление/удаление/скрытие элементов, записываются, чтобы можно было получить видимую временную точку элементов страницы, а также информацию о пересечении элемента и видимой области и т. д.

Затем настройте формулу расчета, например, возьмите значение веса в соответствии с типом элемента (вес div 1, вес img 2 и т. д.), а затем возьмите произведение площади пересечения, видимости и значения веса элемента. и видимая область как оценка элемента.

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

FID

имея в виду

ФИД, полное имяFirst Input Delay, что переводится как首次输入延迟, который измеряет время с момента, когда пользователь впервые взаимодействует с вашим сайтом (т. е. когда он щелкает ссылку/нажимает кнопку/использует настраиваемый элемент управления на основе JavaScript), до момента, когда браузер фактически может реагировать на это взаимодействие.

статистическая логика

В одну сторону, черезperformanceObserver(В настоящее время поддерживается на уровне 88,78%). Тип наблюдения:first-inputзапись, получить ее startTime/duration и другие числа

Способ 2: привязать события общей статистической логики к определенному типу событий (щелчок/касание/нажатие клавиши) во время инициализации и начать вызов сevent.timeStampВыделите время для начала обработки (это время является первым временем задержки ввода) и зарегистрируйте его в обработке событий.requestIdleCallbackОбратный вызов события onIdleCallback, когда выполняется onIdleCallback, текущее время минус время началаevent.timeStampэто продолжительность времени

Код ссылки:

// 方式一
function getFIDTime(){
    const timings = performance.getEntriesByType('first-input')[0];
    return timings ? timings : null
}
// 方式二，以下代码仅代表思路

['click','touch','keydown'].forEach(eventType => {
    window.addEventListener(eventType, eventHandle);
});

function eventHandle(e) {
    const eventTime = e.timeStamp;
    window.requestIdleCallback(onIdleCallback.bind(this, eventTime, e));
}

function onIdleCallback(eventTime, e) {
    const now = window.performance.now();
    const duration = now - eventTime;

    return {
        duration: Math.round(duration),
        timestamp: Math.round(eventTime)
    }

    ['click','touch','keydown'].forEach(eventType => {
        window.removeEventListener(eventType, eventHandle);
    });
}

Больше понимания объектов событий:developer.Mozilla.org/this-cn/docs/…

TTI

имея в виду

ТТИ, полное имяTime To Interactive, что переводится как可交互时间, что означает, что приложение визуализировалось визуально и может полностью реагировать на действия пользователя. это показатель того, сколько времени требуется приложению для загрузки и быстрого реагирования на действия пользователя.

статистическая логика

Как и в случае с FMP, трудно нормализовать определение показателя TTI, применимого ко всем страницам.

Статистический метод 1: пакет npm, написанный Google Labs, tti-polyfill

import ttiPolyfill from 'tti-polyfill';

ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
  ga('send', 'event', {
    eventCategory:'Performance Metrics',
    eventAction:'TTI',
    eventValue: tti,
    nonInteraction: true,
  });
});

Статистический метод 2: в течение определенного периода времени, когда страница загружается (например, в течение первых 50 секунд), с (domContentLoadedEventStart-navigationStart)+5 в качестве начальной точки, поиск в цикле, чтобы найти 5-секундное окно с не более чем 2 сетевых запроса и никаких длинных задач (> 50 мс), а затем найти последнюю длинную задачу перед 5-секундным окном Момент времени, когда длинная задача заканчивается, является временем стабильного взаимодействия. Среди них длинные задачи можно настроить на время или пройтиperformance.getEntriesByType('long-task')Получать

// 以下代码仅代表思路
const basicTime = 5000;

function getTTITime(startTime,longTaskEntries, resourceEntries,domContentLoadedTime) {

  let busyNetworkInWindow = [];
  let tti = startTime;

  while (startTime + basicTime <= 50000) { //从前50s 中去找
    tti = startTime;
    longTasksInWindow = longTaskEntries.filter(task => {
      return task.startTime < startTime + basicTime && task.startTime + task.duration > startTime;
    });
    if (longTasksInWindow.length) {
      const lastLongTask = longTasksInWindow[longTasksInWindow.length - 1];
      startTime = lastLongTask.startTime + lastLongTask.duration;
      continue;
    }
    busyNetworkInWindow = resourceEntries.filter(request => {
      return !(request.startTime >= startTime + basicTime || request.startTime + request.duration <= startTime);
    });
    if (busyNetworkInWindow.length > 2) {
      const firstRequest = busyNetworkInWindow[0];
      startTime = firstRequest.startTime + firstRequest.duration;
      continue;
    }
    return Math.max(tti, domContentLoadedTime);
  }
  return Math.max(tti, domContentLoadedTime);
}

FCI

имея в виду

ФЦИ, полное названиеFirst CPU Idle, что переводится как首次CPU空闲时间Представляет момент, когда веб-страница достигла минимального уровня взаимодействия с пользователем. Когда мы открываем веб-страницу, нам не нужно ждать, пока веб-страница полностью загрузится и каждый элемент будет отрисован, прежде чем взаимодействовать с веб-страницей. Момент времени, когда веб-страница удовлетворяет нашему базовому взаимодействию, является важным показателем для измерения производительности веб-страницы.

статистическая логика

FCI — это момент, когда в течение определенного времени окна в первый раз после FMP нет длинной задачи, и если этот момент времени раньше, чем время DOMContentLoaded, то время FCI — это время DOMContentLoaded, а функция расчета окна время может быть основано на расчете, предоставленном Lighthouse Формула N = f(t) = 4 * e^(-0,045 * t) + 1 для индивидуального дизайна

FPS

имея в виду

ФПС, полное имяFrames Per Second, что переводится как每秒帧率, что представляет собой количество обновлений экрана в секунду, а частота обновления экрана большинства устройств сегодня составляет 60 раз в секунду.

Руководство:

  • Анимации с частотой кадров от 50 до 60 FPS будут достаточно плавными и комфортными;
  • Для анимаций с частотой кадров от 30 до 50 кадров в секунду уровень комфорта варьируется от человека к человеку из-за их разных уровней чувствительности;
  • Анимации с частотой кадров ниже 30 кадров в секунду заставляют людей чувствовать явные заикания и дискомфорт;
  • Анимации с большими колебаниями частоты кадров также могут заставить людей чувствовать себя застрявшими.

статистическая логика

использоватьrequestAnimationFrame, Циклический вызов, когда значение now больше, чем lastTime+1S, вычислить FPS. Если она меньше определенного порога, можно считать, что текущая частота кадров плохая, если меньше нескольких порогов подряд, статистика будет остановлена, текущая страница находится в зависшем состоянии, а зависшая будет введена логика обработки.

Более конкретные ссылки:

Информация об устройстве

отwindow.navigator.userAgentИнформацию об оборудовании пользователя можно получить в , как показано на рисунке:

Github

отwindow.navigator.connectionИнформацию о сети устройства можно получить в , например:

Github

отwindow.devicePixelRatioМожно получить соотношение пикселей устройства.

Политика эскалации

pv/uv

Мониторинг различных ситуаций переключения страниц; SPA-страницы могут отслеживать hashChange

Данные о производительности/информация об устройстве/статус сети

  • Отчет до того, как страница покинет, beforeUnload/visibilitychange/pagehide...+sendBeancon/Ajax
  • тег img + фрагмент + сжатие

Суммировать

Говоря о картинках, содержание этой статьи организовано в виде картинки.

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

Сопутствующая статья

использованная литература

наконец

  • Добро пожаловать, чтобы добавить меня в WeChat (winty230), привлечь вас в техническую группу, долгосрочный обмен и обучение...
  • Добро пожаловать, чтобы обратить внимание на «Front-end Q», серьезно изучить интерфейс и быть профессиональным техническим специалистом...

GitHub

Категории