Анализ производительности вашего веб-приложения в Internet Explorer 11 и в других браузерах в реальных условиях
Совместно с Google, Mozilla и другими лидерами сообщества рабочая группа консорциума W3C по стандарту Web Performance довела до уровня стандартов интерфейсы Navigation Timing, Resource Timing, User Timing и Performance Timeline, чтобы помочь вам анализировать производительность навигации, загрузки ресурсов и выполнения скриптов в вашем веб-приложении в реальных условиях. Вы можете использовать эти интерфейсы для получения и анализа данных о том, как ваши клиенты взаимодействуют с вашим веб-приложением в реальных условиях, не полагаясь на результаты искусственного тестирования, при котором проверяется производительность приложения в искусственной среде. С помощью этих данных о времени вы можете определять возможности улучшения производительности ваших веб-приложений в реальных условиях. Все эти интерфейсы поддерживаются в Internet Explorer 11. Ознакомьтесь с тестовой демонстрацией Performance Timing, чтобы увидеть эти интерфейсы в действии.
Тестовая демонстрация Performance Timing позволяет опробовать API-интерфейсы Timing.
Performance Timeline
Спецификация Performance Timeline была опубликована как рекомендация (Recommendation) консорциума W3C и полностью поддерживается браузерами Internet Explorer 11 и Chrome 30. С помощью этого интерфейса вы можете получить исчерпывающую информацию о времени, потраченном на навигацию, загрузку ресурсов и выполнение скриптов в вашем приложении. В этой спецификации определены как минимальные атрибуты, которые должны быть реализованы во всех метриках производительности, так и интерфейсы, которые могут использоваться разработчиками для получения метрики производительности любого типа.
Все метрики производительности должны поддерживать следующие четыре атрибута:
- name. В этом атрибуте хранится уникальный идентификатор метрики производительности. Например, для ресурса это будет его разрешенный URL-адрес.
- entryType. В этом атрибуте хранится тип метрики производительности. Например, метрика для ресурса будет храниться как "resource".
- startTime. В этом атрибуте хранится первая зарегистрированная метка времени для данной метрики производительности.
- duration. В этом атрибуте хранится полная длительность события, зарегистрированного данной метрикой.
Все данные о времени регистрируются в формате высокоточного времени с использованием типа DOMHighResTimeStamps, определенного в спецификации High Resolution Time. В отличие от DOMTimeStamps, где значения времени измеряются в миллисекундах с 1 января 1970 г. в формате UTC, высокоточное значение времени измеряется по крайней мере с микросекундным разрешением и отсчитывается от начала просмотра документа. Например, если я проверяю текущее время с помощью performance.now() (высокоточное время, аналогичное Date.now()), я получу следующую интерпретацию текущего времени:
> performance.now();
4038.2319370044793
> Date.now()
1386797626201
Это значение времени обладает также преимуществом независимости от расфазировки или настройки синхронизирующих импульсов. Чтобы разобраться в использовании высокоточного времени, ознакомьтесь с тестовой демонстрацией What Time Is It.
Для получения списка метрик производительности, зарегистрированных во время вызова, можно использовать следующие интерфейсы. Используя атрибуты startTime и duration, а также любые другие атрибуты, предоставляемые метрикой, вы можете получить исчерпывающую картину производительности вашей страницы при ее просмотре вашими клиентами.
PerformanceEntryList getEntries();
PerformanceEntryList getEntriesByType(DOMString entryType);
PerformanceEntryList getEntriesByName(DOMString name, optional DOMString entryType);
Метод getEntriesвозвращает список всех метрик производительности на странице, а остальные методы возвращают особые элементы в зависимости от имени или типа. Мы предполагаем, что большинство разработчиков будут просто использовать метод JSON stringify для всего списка метрик и отправлять результаты на свой сервер (а не на клиент) для анализа.
Давайте подробнее рассмотрим каждую из различных метрик производительности: навигацию, ресурс, метки и измерения.
Navigation Timing
Интерфейсы Navigation Timing предоставляют точные измерения времени для каждого этапа перехода в ваше веб-приложение. Спецификация Navigation Timing L1 была опубликована как рекомендация (Recommendation) консорциума W3C и полностью поддерживается в браузерах начиная с Internet Explorer 9, Chrome 28 и Firefox 23. Спецификация Navigation Timing L2 является первым общедоступным рабочим черновиком (First Public Working Draft) и поддерживается Internet Explorer 11.
C помощью Navigation Timing разработчики могут узнать не только точное время загрузки страниц, включая время получения страницы с сервера, но и то, на что было потрачено это время на каждом этапе работы с сетью и обработки DOM: на выгрузку, перенаправление, кэш приложения, DNS, TCP, запрос, ответ, обработку DOM и событие загрузки. В следующем скрипте для получения такой подробной информации используется Navigation Timing L2. Тип записи для этой метрики — "navigation", а имя — "document". Ознакомьтесь с демонстрацией Navigation Timing на сайте тестирования Internet Explorer.
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
function sendNavigationTiming() {
var nt = performance.getEntriesByType('navigation')[0];
var navigation = ' Start Time: ' + nt.startTime + 'ms';
navigation += ' Duration: ' + nt.duration + 'ms';
navigation += ' Unload: ' + (nt.unloadEventEnd - nt.unloadEventStart) + 'ms';
navigation += ' Redirect: ' + (nt.redirectEnd - nt.redirectStart) + 'ms';
navigation += ' App Cache: ' + (nt. domainLookupStart - nt.fetchStart) + 'ms';
navigation += ' DNS: ' + (nt.domainLookupEnd - nt.domainLookupStart) + 'ms';
navigation += ' TCP: ' + (nt.connectEnd - nt.connectStart) + 'ms';
navigation += ' Request: ' + (nt.responseStart - nt.requestStart) + 'ms';
navigation += ' Response: ' + (nt.responseEnd - nt.responseStart) + 'ms';
navigation += ' Processing: ' + (nt.domComplete - nt.domLoading) + 'ms';
navigation += ' Load Event: ' + (nt.loadEventEnd - nt.loadEventStart) + 'ms';
sendAnalytics(navigation);
}
</script>
</body>
</html>
Тщательно изучив время, потраченное на каждом этапе использования сети, вы можете лучше диагностировать и исправлять неполадки, связанные с производительностью. Например, вы можете отказаться от использования перенаправления, если оно занимает много времени, можете использовать службу кэша, если много времени тратится на DNS, использовать сеть доставки контента, находящуюся ближе к вашим пользователям, если много времени уходит на выполнение запроса, или сжать контент с помощью GZip, если много времени тратится на ответ. Посмотрите это видео, в котором вы найдете советы и рекомендации по улучшению производительности использования сети.
Основное отличие между этими двумя версиями спецификации Navigation Timing заключается в способе доступа к данным о времени и способе измерения времени. В интерфейсе L1 эти атрибуты определяются в объекте performance.timing в миллисекундах с 1 января 1970 г. Интерфейс L2 позволяет извлекать те же атрибуты с помощью методов Performance Timeline и более удобно размещать их в представлении временной шкалы, причем они записываются с помощью высокоточных таймеров.
До появления Navigation Timing разработчики обычно пытались измерить время загрузки страницы посредством написания кода JavaScript в заголовке документа, как в следующем примере кода. Ознакомьтесь с демонстрацией этого способа на сайте тестирования Internet Explorer.
<!DOCTYPE html>
<html>
<head>
<script>
var start = Date.now();
function sendPageLoad() {
var now = Date.now();
var latency = now - start;
sendAnalytics('Page Load Time: ' + latency);
}
</script>
</head>
<body onload='sendPageLoad()'>
</body>
</html>
Однако этот способ не позволяет точно измерить производительность загрузки страницы, поскольку в нем не учитывается время получения страницы с сервера. Кроме того, выполнение JavaScript в заголовке документа обычно приводит к снижению производительности.
Resource Timing
Интерфейс Resource Timing предоставляет точную информацию о времени загрузки ресурсов на странице. Аналогично Navigation Timing интерфейс Resource Timing предоставляет подробные данные о времени выполнения таких этапов, как перенаправление, DNS, TCP, запрос и ответ, для загружаемых ресурсов. Спецификация Resource Timing была опубликована как кандидат к рекомендации (Candidate Recommendation) консорциума W3C и поддерживается начиная с версий Internet Explorer 10 и Chrome 30.
В следующем примере кода используется метод getEntriesByType для получения всех ресурсов, инициированных элементом <img>. Тип записи для ресурсов — "resource", а имя — разрешенный URL-адрес ресурса. Ознакомьтесь с демонстрацией Resource Timing на сайте тестирования Internet Explorer.
<!DOCTYPE html>
<html>
<head>
</head>
<body onload='sendResourceTiming()'>
<img src='http://some-server/image1.png'>
<img src='http://some-server/image2.png'>
<script>
function sendResourceTiming()
{
var resourceList = window.performance.getEntriesByType('resource');
for (i = 0; i < resourceList.length; i++)
{
if (resourceList[i].initiatorType == 'img')
{
sendAnalytics('Image Fetch Time: ' + resourceList[i].duration);
}
}
}
</script>
</body>
</html>
В целях безопасности для ресурсов из других источников отображается только время начала загрузки и ее длительность; подробные атрибуты времени имеют нулевое значение. Это помогает избежать проблем, связанных со статистическим отслеживанием ("фингерпринтингом"), когда некто может попытаться определить ваше участие в организации путем проверки того, находится ли ресурс в вашем кэше, посредством изучения подробных данных о времени использования сети. Сервер из другого источника может отправить HTTP-заголовок timing-allow-origin, если "хочет" обмениваться с вами данными о времени.
User Timing
Интерфейс User Timing предоставляет подробную информацию о времени выполнения скриптов в вашем приложении, дополняя интерфейсы Navigation Timing и Resource Timing, предоставляющие подробную информацию о времени использования сети. User Timing позволяет отображать данные о времени выполнения скриптов в том же представлении временной шкалы, что и данные о времени использования сети, для всестороннего анализа производительности вашего приложения. Спецификация User Timing была опубликована как кандидат к рекомендации (Candidate Recommendation) консорциума W3C и поддерживается начиная с версий Internet Explorer 10 и Chrome 30.
Интерфейс User Timing определяет две метрики, используемые для измерения времени выполнения скриптов: метки (mark) и измерения (measure). Метка представляет собой высокоточную метку времени в заданный момент времени в процессе выполнения скрипта. Измерение представляет собой разность между двумя метками.
Для создания меток и измерений могут использоваться следующие методы:
void mark(DOMString markName);
void measure(DOMString measureName, optional DOMString startMark, optional DOMString endMark);
После добавления меток и измерений в ваш скрипт вы можете извлекать данные о времени с помощью методов getEntry, getEntryByType или getEntryByName. Тип записи метки — "mark", а тип записи измерения — "measure".
В следующем примере кода методы меток и измерений используются для определения времени, потраченного на выполнение методов doTask1() и doTask2(). Ознакомьтесь с демонстрацией User Timing на сайте тестирования Internet Explorer.
<!DOCTYPE html>
<html>
<head>
</head>
<body onload='doWork()'>
<script>
function doWork()
{
performance.mark('markStartTask1');
doTask1();
performance.mark('markEndTask1');
performance.mark('markStartTask2');
doTask2();
performance.mark('markEndTask2');
performance.measure('measureTask1', 'markStartTask1', 'markEndTask1');
performance.measure('measureTask2', 'markStartTask2', 'markEndTask2');
sendUserTiming(performance.getEntries());
}
</script>
</body>
</html>
Мы хотим поблагодарить всех участников рабочей группы консорциума W3C по стандарту Web Performance за помощь в проектировании этих интерфейсов и поставщиков браузеров за работу над реализацией этих интерфейсов для обеспечения совместимости. С помощью этих интерфейсов веб-разработчики могут по-настоящему начать измерять различные показатели и анализировать их, чтобы понять, что можно сделать для повышения производительности приложений.
Рекомендуем вам опробовать интерфейсы измерения производительности для ваших веб-приложений в Internet Explorer 11 и с нетерпением ждем ваших отзывов на сайте Connect.
Спасибо за внимание!
Джатиндер Манн (Jatinder Mann), руководитель программы, Internet Explorer