Как лучше всего измерить время загрузки страницы на стороне клиента?
Я рассчитываю на взаимодействие с конечным пользователем нашего веб-сайта и связываю его с информацией о времени, уже зарегистрированной на стороне сервера. Я предполагаю, что для этого потребуется javascript для захвата меток времени в начале запроса (window.onbeforeunload) и в конце загрузки (window.onload). В основном это - " Измерение времени отклика веб-приложения: встреча с клиентом"
- Есть ли лучший подход?
- Каких потерь производительности я должен ожидать (на порядок)?
- Насколько хороши результаты?
8 ответов
РЕДАКТИРОВАТЬ (2013): попробуйте вместо этого Бумеранг, как подсказывает @yasei-no-umi. Это активно поддерживается.
- старый ответ -
Мы используем Jiffy.
Его очень просто использовать и модифицировать - мы написали собственный серверный код (вместо Apache + Perl от Jiffy) и использовали JS Jiffy.
Что касается снижения производительности - на стороне клиента его нет. Сам JS является тривиально быстрым, и отправка отчетов на сервер может быть выполнена с помощью XHR после загрузки страницы, что никак не влияет на работу пользователя. На стороне сервера вы получите в два раза больше запросов. Если это узкое место, вы можете настроить другой сервер только для синхронизации ответов.
Существует также Бумеранг от Yahoo.
Имеет некоторые расширенные функции, отсутствующие в Jiffy и Episodes. Также поддержите интерфейс навигации по времени в браузерах, которые его поддерживают (Chrome 6, IE 9)
Для полноты картины теперь вы можете использовать API синхронизации навигации в некоторых современных браузерах: https://developer.mozilla.org/en-US/docs/Navigation_timing
function onLoad() {
var now = new Date().getTime();
var page_load_time = now - performance.timing.navigationStart;
console.log("User-perceived page loading time: " + page_load_time);
}
Стороннее редактирование
На основе caniuse.com навигация по времени широко поддерживается сегодня (10/2016)
Как насчет использования чего-то вроде yslow (расширение Firefox)?
У нас есть "обратный вызов" (прозрачное GIF-изображение 1x1 с параметром, представляющим идентификатор для рендеринга страницы) на странице, которая регистрирует "просмотренную страницу" в нашей базе данных. Это записи с тем же идентификатором, что и сама страница, и у нас есть запись в журнале по окончании рендеринга.
Итак, у нас есть время:
- Подготовка страницы началась
- Подготовка страницы / Ответ закончен
- Клиент звонил домой, когда рендеринг завершен
Помогает понять клиентов, которые "медленные" (процессор или провайдер / пропускная способность)
PS Представления страницы, которые не вызывают дом, также представляют интерес - пользователь отключился (при условии, что другие страницы, отображающие в этом сеансе, записали Phone Home)
Мы склонны использовать комбинацию из:
Firefox: Панель инструментов веб-разработчика Firebug YSlow
IE: Fiddler
из всего вышесказанного я обнаружил, что YSlow дает наилучшую информацию о том, что вы можете сделать, чтобы улучшить время загрузки, но Fiddler дает наилучшую общую информацию о том, что вы можете ожидать по сети, и может даже моделировать различные скорости сети.
Я довольно сомнительный из этих методов. Некоторые из этих методов более сложны, чем необходимо, и я подвергаю сомнению точность этих данных. Я бы сделал так, чтобы тестеры ходили в разные сети и использовали что-то вроде Firebug или что-то в этом роде:
Для черта этого; Вот интересная статья, недавно представленная в SOSP с помощью инструмента AjaxScope. Интересно, что это научная статья, представленная MS Research, в которой показано, что реализация Javascript в Firefox во многих случаях работает намного лучше, чем Internet Explorer.:)