Определение производительности веб-страницы — производительность

JavaScript
Определение производительности веб-страницы — производительность

В предыдущей статье я говорил о пониманииМониторинг производительности, который поставляется с браузером Chrome, но во многих случаях нам нужно активно собирать данные на стороне клиента, а инструментов отладки браузера недостаточно.

Рекомендуемое использованиеwindow.performanceобъект.

1. Что такое производительность

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

источник:MDN

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

Примечание. Все API объекта производительности доступны только для чтения.

Например:

  • С момента ввода URL и нажатия Enter до определенного времени
  • Трудоемкий разбор дерева dom
  • время белого экрана
  • время готовности
  • время загрузки
  • Требуется много времени для перенаправления
  • время запроса запроса

а также:

  • Вся статистика объекта для текущей веб-страницы
  • Информация о поведении пользователя

2. Совместимость производительности

performanceЗапуск мониторинга производительности фронтенда сделал практически все браузеры удобными. (IE9За исключением следующих) И основные браузеры делают все возможное, чтобы быть обратно совместимыми.

Не будьте слепым оптимистом:

  1. performanceРезультат, возвращаемый встроенным методом .

  2. performanceМногие встроенные API основаны на браузере и поэтому ограничены мобильными устройствами или клиентской частью. (Такие какgetEntries()Ждать)

3. API производительности

performanceСуществует множество API, но некоторые из них особенно полезны.

1. метод performance.now()

performance.now()вернутьperformance.navigationStartк текущему числу миллисекунд.performance.navigationStartМожно сказать, что это начальная точка измерения времени доступа браузера, о чем будет рассказано ниже.

Стоит отметить два момента:

  • Начальная точка измерения — это момент обращения браузера к начальной точке измерения, или под ним понимается момент нажатия Enter после ввода URL в адресной строке.
  • Возвращаемое значение — количество миллисекунд, но с точностью до нескольких знаков после запятой.

использоватьperformance.now()Определить время выполнения цикла for (миллисекунды)

    var st = performance.now();
    for (var o = 0; o < 10000; o ++)  console.log(o)
    var end = performance.now();

    console.log(`for时间${end - st}`); // for时间1155.9950000373647

2. свойство performance.navigation

performance.navigationЗа запись информации о поведении пользователя отвечают всего два атрибута.

console.log(performance.navigation);
// PerformanceNavigation {type: 1, redirectCount: 0}

  • тип: указывает источник загрузки веб-страницы, может быть 4 случая

    • 0: веб-страница загружается при нажатии на ссылку, вводе в адресной строке, отправке формы, выполнении скрипта и т. д., что эквивалентно константе
    • 1: веб-страница загружается через кнопку «Перезагрузку» или метод location.reload ()
    • 2: Веб-страница загружается с помощью кнопок «вперед» или «назад».
    • 255: Загрузка из любого другого источника

  • redirectCount: указывает, сколько раз текущая веб-страница была перенаправлена ​​и пропущена.

3. объект performance.timing

так какperformanceОдин из важнейших атрибутов,timingЕсть почти все временные узлы. (Прикрепленный 1)

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

window.onload = function() {
  var timing  = performance.timing;
  console.log('准备新页面时间耗时: ' + timing.fetchStart - timing.navigationStart);
  console.log('redirect 重定向耗时: ' + timing.redirectEnd  - timing.redirectStart);
  console.log('Appcache 耗时: ' + timing.domainLookupStart  - timing.fetchStart);
  console.log('unload 前文档耗时: ' + timing.unloadEventEnd - timing.unloadEventStart);
  console.log('DNS 查询耗时: ' + timing.domainLookupEnd - timing.domainLookupStart);
  console.log('TCP连接耗时: ' + timing.connectEnd - timing.connectStart);
  console.log('request请求耗时: ' + timing.responseEnd - timing.requestStart);
  console.log('白屏时间: ' + timing.responseStart - timing.navigationStart);
  console.log('请求完毕至DOM加载: ' + timing.domInteractive - timing.responseEnd);
  console.log('解释dom树耗时: ' + timing.domComplete - timing.domInteractive);
  console.log('从开始至load总耗时: ' + timing.loadEventEnd - timing.navigationStart);
}

Стоит отметить: поставитьwindow.onloadОсновная причина в том, что большую часть рендеринга можно получить после завершения рендеринга.timingсвойства, вы также можете поставить定时器中воплощать в жизнь.

4. метод performance.mark(markName)

Отмеченный в пользовательский момент времени, соответствующий методpeformance.clearMarks(markName) / performance.clearMarks();Измеренная совместимость не идеальна. . . (или, может быть, я использую это неправильно)

5. свойство performance.memory

performance.memoryИспользуется для отображения текущего использования памяти;

console.log(performance.memory);
/* MemoryInfo {
  totalJSHeapSize: 11735319,
  usedJSHeapSize: 9259919,
  jsHeapSizeLimit: 2197815296
} */
  • usedJSHeapSize указывает: объем памяти, занимаемый объектами JS (включая внутренние объекты движка V8).
  • totalJSHeapSize означает: доступная память
  • jsHeapSizeLimit означает: ограничение размера памяти

как правило,usedJSHeapSizeне может быть больше, чемtotalJSHeapSize, если больше , может иметь место утечка памяти.

6. метод performance.getEntries()

Когда браузер получает веб-страницу, он отправляет HTTP-запрос каждому объекту (файлу сценария, таблице стилей, файлу изображения и т. д.) на веб-странице. Метод performance.getEntries возвращает список PerformanceEntry в виде массива, временную статистику этих запросов, количество запросов и количество элементов в возвращаемом массиве.

name: имя ресурса, которое представляет собой абсолютный путь к ресурсу или имя, настроенное путем вызова метода mark.startTime:Время началаduration: время загрузкиentryType: Тип ресурса, структура объекта в массиве у разных типов entryType тоже разная! Подробнее см. нижеinitiatorType: Кто инициировал запрос, подробности см. ниже.

entryTypeЗначение:

стоимость объект этого типа описывать
mark PerformanceMark Объекты, добавленные в массив с помощью метода mark()
measure PerformanceMeasure Объекты, добавленные в массив с помощью метода Measure()
paint PerformancePaintTiming Значение: first-paint — первая краска, first-contentful-paint — первая краска содержимого.
resource PerformanceResourceTiming Время загрузки всех ресурсов, наиболее полезных
navigation PerformanceNavigationTiming Теперь он не поддерживается, кроме хрома и оперы, информации, связанной с навигацией.
frame PerformanceFrameTiming Браузеры в настоящее время не поддерживаются

Смотрите также:MDN

initiatorTypeЗначение:

Инициирующий объект стоимость описывать
a Element link/script/img/iframeЖдать Ресурс загружается по тегу, значением является строчная версия имени узла.
a CSS resourc css Ресурсы, загруженные с помощью стилей CSS, например, фоновые URL-адреса для загрузки ресурсов.
a XMLHttpRequest object xmlhttprequest/fetch Ресурсы загружаются через xhr
a PerformanceNavigationTiming object navigation Возвращается, когда объект является PerformanceNavigationTiming.

1. Можно использовать только в браузере 2. Первый элемент массива, возвращаемый этим методом, — это информация о HTML-странице.

4. Как передавать информацию о производительности

  1. sendBeaconметод
  2. динамичный<img>Этикетка
  3. web wroker

Это все более поздние истории. . .

Цитировать:

  1. developer.Mozilla.org/this-cn/docs/…
  2. developer.Mozilla.org/en-US/docs/…
  3. JavaScript.Ruan Yifeng.com/film/perform…
  4. woo woo woo.cn blog on.com/маленькая прибыль, но быстрый оборот и/afraid/685…

Приложение 1:

Имя свойства имея в виду
navigationStart Отметка времени Unix, когда событие выгрузки происходит, когда предыдущая веб-страница окна браузера закрывается, что относится к первой точке времени измерения.
unloadEventStart Если предыдущая веб-страница и текущая веб-страница принадлежат одному и тому же имени домена, вернуть временную метку Unix, когда произошло событие выгрузки предыдущей веб-страницы.
unloadEventEnd Когда предыдущая веб-страница и текущая веб-страница принадлежат одному и тому же доменному имени, верните временную метку Unix в конце функции обратного вызова события выгрузки предыдущей веб-страницы.
redirectStart Возвращает временную метку Unix, когда начался первый переход по HTTP.
redirectEnd Возвращает отметку времени Unix в конце последнего перехода HTTP
fetchStart Возвращает временную метку Unix, когда браузер был готов прочитать ресурс, такой как документ, с помощью HTTP-запроса, что происходит до того, как веб-страница запрашивает локальный кеш.
domainLookupStart Возвращает временную метку Unix, когда начался поиск доменного имени. Если используется постоянное соединение или информация извлекается из локального кеша, возвращаемое значение равно значению свойства fetchStart.
domainLookupEnd Возвращает отметку времени Unix в миллисекундах, когда завершился запрос имени домена. Если используется постоянное соединение или информация извлекается из локального кеша, возвращаемое значение равно значению свойства fetchStart.
connectStart Возвращает отметку времени Unix в миллисекундах, когда HTTP-запрос начал отправляться на сервер. Если используется постоянное соединение, возвращаемое значение равно значению свойства fetchStart.
connectEnd Возвращает отметку времени Unix в миллисекундах, когда соединение между браузером и сервером было установлено. Если установлено постоянное соединение, возвращаемое значение равно значению свойства fetchStart. Установление соединения означает завершение всех процессов рукопожатия и аутентификации.
secureConnectionStart Возвращает метку времени Unix в миллисекундах, когда началось рукопожатие браузер-сервер для безопасного соединения. Возвращает 0, если текущая веб-страница не требует безопасного соединения.
requestStart Возвращает метку времени Unix в миллисекундах, когда браузер сделал HTTP-запрос к серверу (или когда он начал читать локальный кеш)
responseStart Возвращает метку времени Unix в миллисекундах, когда браузер получил (или прочитал из локального кеша) первый байт с сервера.
responseEnd Возвращает метку времени Unix в миллисекундах, когда браузер получил (или прочитал из локального кеша) последний байт с сервера (или когда HTTP-соединение было закрыто, если оно было закрыто до этого)
domLoading Возвращает отметку времени Unix в миллисекундах, когда структура DOM текущей веб-страницы начинает анализироваться (то есть, когда свойство Document.readyState становится «загружаемым» и запускается соответствующее событие readystatechange).
domInteractive Возвращает отметку времени Unix в миллисекундах, когда текущая структура DOM веб-страницы завершает синтаксический анализ и начинает загрузку встроенных ресурсов (то есть, когда свойство Document.readyState становится «интерактивным» и запускается соответствующее событие readystatechange).
domContentLoadedEventStart Возвращает метку времени Unix в миллисекундах, когда происходит событие DOMContentLoaded текущей веб-страницы (то есть, когда структура DOM анализируется и все сценарии начинают выполняться)
domContentLoadedEventEnd Возвращает отметку времени Unix в миллисекундах завершения выполнения всех скриптов, которые необходимо выполнить на текущей странице.
domComplete Возвращает отметку времени Unix в миллисекундах, когда была сгенерирована структура DOM текущей веб-страницы (то есть, когда свойство Document.readyState стало «завершенным» и произошло соответствующее событие readystatechange)
loadEventStart Возвращает временную метку Unix в миллисекундах, когда функция обратного вызова для текущего события загрузки страницы запускалась. Возвращает 0, если событие не произошло
loadEventEnd Возвращает отметку времени Unix в миллисекундах, когда функция обратного вызова для текущего события загрузки страницы завершилась. Возвращает 0, если событие не произошло
Категории