Как лучше всего измерить время загрузки страницы на стороне клиента? - PullRequest
Новая
       27

Как лучше всего измерить время загрузки страницы на стороне клиента?

17 голосов
/ 13 февраля 2009

Я хочу отслеживать взаимодействие конечного пользователя с нашим веб-сайтом и связывать его с информацией о времени, уже зарегистрированной на стороне сервера. Я предполагаю, что для этого потребуется javascript для захвата меток времени в начале запроса (window.onbeforeunload) и в конце загрузки (window.onload). В основном это - " Измерение времени отклика веб-приложения: встреча с клиентом "

  1. Есть ли лучший подход?
  2. Каких потерь производительности я должен ожидать (на порядок)?
  3. Насколько хороши результаты?

Ответы [ 8 ]

13 голосов
/ 13 декабря 2010

Существует также Бумеранг от Yahoo.

Имеет некоторые расширенные функции, отсутствующие в Jiffy и Episodes. Также поддерживается Timing Navigation API в браузерах, которые его поддерживают (Chrome 6, IE 9)

8 голосов
/ 04 сентября 2012

Для полноты картины теперь вы можете использовать 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)

7 голосов
/ 27 апреля 2009

EDIT (2013): вместо этого попробуйте Бумеранг , как подсказывает @ yasei-no-umi. Это активно поддерживается.

- старый ответ -

Мы используем Jiffy .

Это очень просто для использования и изменения - мы написали наш собственный код на стороне сервера (вместо Apache Jiffy + Perl) и использовали JS Jiffy.

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

3 голосов
/ 13 февраля 2009

Как насчет использования чего-то вроде yslow (расширение Firefox)?

2 голосов
/ 07 мая 2009

Альтернативой Jiffy является Эпизоды .

И то, и другое включает в себя инструментарий Javascript для отслеживания различных временных параметров и регистрации этих временных параметров на центральном сервере.

1 голос
/ 13 февраля 2009

У нас есть «обратный вызов» (прозрачное GIF-изображение 1x1 с параметром, представляющим идентификатор для рендеринга страницы) на странице, которая регистрирует «просмотренную страницу» в нашей базе данных. Это записи с тем же идентификатором, что и сама страница, и у нас есть запись в журнале по окончании рендеринга.

Итак, у нас есть время:

  • Начата подготовка страницы
  • Подготовка страницы / Ответ закончен
  • Клиент звонил домой, когда рендеринг завершен

Помогает понять "медленных" клиентов (процессор или провайдер / пропускная способность)

P.S. Представления страницы, которые не вызывают дом, также представляют интерес - пользователь отключился (при условии, что другие страницы, отображающие в этом сеансе, записали Phone Home)

0 голосов
/ 27 апреля 2009

Мы склонны использовать комбинацию:

Firefox: Панель инструментов веб-разработчика Firebug YSlow

IE: Скрипач

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

0 голосов
/ 13 февраля 2009

Я довольно сомнительный из этих методов. Некоторые из этих методов более сложны, чем необходимо, и я подвергаю сомнению точность этих данных. Я бы сделал так, чтобы тестеры ходили в разные сети и использовали что-то вроде Firebug или что-то еще:

http://getfirebug.com/

Черт возьми; Вот интересная статья, недавно представленная в SOSP с помощью инструмента AjaxScope. Интересно, что это научная статья, представленная MS Research, в которой показано, что реализация Javascript в Firefox во многих случаях работает намного лучше, чем Internet Explorer. :)

http://research.microsoft.com/en-us/groups/rad/sosp07.pdf

...