Мониторинг производительности на стороне клиента для сайтов

Question

Я хочу отслеживать производительность страницы на стороне клиента, и я могу получить время загрузки страницы, запустив таймер в начале раздела, а также узнав время, когда происходит событие загрузки. Однако это не учитывает время, необходимое для запроса страницы с сервера. Итак, после поиска я обнаружил, что я должен использовать веб-интерфейс синхронизации времени. Моя проблема в том, что, хотя "window.performance" работает для chrome, ничего не работает для firefox, включая "window.mozPerformance". Так кто-нибудь знает, как я могу найти время, когда мой браузер инициирует запрос на получение страницы и заканчивает получение последнего байта страницы?

Answer 1

Вы можете использовать что-то вроде:

var timing = performance.timing;
var loadtime = timing.loadEventEnd – timing.navigationStart;

Это будет работать для вас на: Chrome 6+, IE9+, Firefox 7+, Android 4+

И вы можете прочитать больше в этом старом (но хорошем) посте: http://blog.chromium.org/2010/07/do-you-know-how-slow-your-web-page-is.html

Кстати, я бы использовал Chrome DevTools (или Firebug в Firefox) для измерения изменений моего кода на вкладке "Аудит". Вы можете увидеть, сколько стоит каждое изменение в вашем коде JS, и измерить его без добавления кода. Более того, если вы хотите узнать, какова производительность вашего сайта (или веб-приложения) с течением времени, у вас есть возможность проверить показатели в Google Analytics.