Download to read offline
![Время инициализации приложения
var pages = [];
document.addEventListener('DOMContentLoaded',
function(){
var begin = Date.now();
for (var i=0; i < pages; i++){
pages[i].init();
}
var js_init = Date.now() - begin;
}, false);](https://image.slidesharecdn.com/toster-final2-120618041839-phpapp02/75/Pavel-Dovbush-Toster-18-2048.jpg)
![Общая информация по всем
пользователям
- Как послать результаты измерений на
сервер?
* Ajax или hidden-image
<script>
var img = new Image();
img.src = ".../log.php?stats=" +
[ js_load, dom_ready, js_init, on_load ].join
(',');
</script>](https://image.slidesharecdn.com/toster-final2-120618041839-phpapp02/75/Pavel-Dovbush-Toster-20-2048.jpg)
![Общая информация по всем
пользователям
* Внедрение в следующие запросы отчета
о предыдущих: Cookies
<script>
document.cookie = "stats=" +
[ js_load, dom_ready, js_init, on_load ].join
(',');
</script>](https://image.slidesharecdn.com/toster-final2-120618041839-phpapp02/75/Pavel-Dovbush-Toster-21-2048.jpg)
![Детальные измерения
var pages = [];
document.addEventListener('DOMContentLoaded',
function(){
for (var i=0; i < pages; i++){
var begin = Date.now();
pages[i].init();
var cmp_init = Date.now() - begin;
console.log( pages[i].name + ' - ' + cmp_init );
}
}, false);](https://image.slidesharecdn.com/toster-final2-120618041839-phpapp02/75/Pavel-Dovbush-Toster-33-2048.jpg)
Uploaded byPavel Dovbush
Pavel Dovbush Toster
Документ обсуждает методы измерения и оптимизации производительности клиентской части веб-сайта с акцентом на важность скорости загрузки для пользователей и разработчиков. Он описывает различные инструменты и техники для мониторинга, такие как Google PageSpeed и waterfall отчеты, а также предлагает рекомендации по снижению количества HTTP-запросов и кэшированию. Кроме того, документ затрагивает архитектурные аспекты приложений для более эффективного сбора и анализа данных о производительности.
Pavel Dovbush Toster
- 1. Измерение и мониторинг клиентскойчасти сайта у 150М пользователей Павел Довбуш @ Badoo Development http://badoo.com/
- 2. Скорость сайта ==деньги - Известные рекомендации по оптимизации - Много статей, книг - Утилита Google Page Speed
- 3. Waterfall отчеты Знакомая картинка? DOMContentLoaded onLoad time Загрузка документа и статики
- 4. Рекомендации - меньше HTTPзапросов - меньше DNS запросов - кэширование - CDN - сжатие: minify, gzip - оптимизация картинок, спрайты
- 5. Старт приложения - оптимизировализагрузку статики - Page Speed 100/100 - Достаточно ли этого?
- 6. Скорость сайта ==деньги DOMContentLoaded JS init onLoad time инициализация приложения Загрузка документа и статики
- 7. Что важно пользователю -явно не рейтинг в Page Speed :) - Время до "рабочей страницы" - Время полной загрузки ("часики" пропали)
- 8. Что важно разработчику Общеевремя инициализации: - Сколько секунд? - Как найти узкое место? - Переписывание какой страницы (компонента) даст наибольший выигрыш?
- 9. Как увидеть реальноевлияние изменений? - На глазок - Перегрев гаджета :)
- 10. Как увидеть реальноевлияние изменений? - Искусcтвенные тесты компонент http://jsperf.com/
- 11. Как увидеть реальноевлияние изменений? - Waterfall отчеты по запросу http://www.webpagetest.org/
- 12. Как увидеть реальноевлияние изменений? - Регулярный мониторинг http://www.gomeznetworks.com/
- 13. Как увидеть реальноевлияние изменений? - Измерения внутри приложения, работающего у реальных пользователей - Мы сами расставляем таймеры
- 14. Что измерять? Самый простойнабор: - JavaScript/CSS download time (cкорость скачивания) - DOMContentLoaded - JavaScript init time (первичная инициализация) - OnLoad
- 15. Что измерять? <!DOCTYPE html> <html><head> <script>varstart = Date.now();</script> <script src=".../page.js"></script> <script>var js_load = Date.now() - start;</script>
- 16. Что измерять? <script> document.addEventListener('DOMContentLoaded', function(){ var dom_ready = Date.now() - start; }, false); window.addEventListener('load', function(){ var on_load = Date.now() - start; }, false); </script>
- 17. Время инициализации приложения -Архитектура приложения должна содержать точки для замера - У нас - одна точка входа обертка вокруг DOMContentLoaded - Асинхронная инициализация, подгрузка компонентов - отдельно
- 18. Время инициализации приложения varpages = []; document.addEventListener('DOMContentLoaded', function(){ var begin = Date.now(); for (var i=0; i < pages; i++){ pages[i].init(); } var js_init = Date.now() - begin; }, false);
- 19. Время инициализации приложения functionPage(){ pages.push(this); } function Example(){ Page.apply(this); } Example.prototype.init = function(){ // document is ready };
- 20. Общая информация повсем пользователям - Как послать результаты измерений на сервер? * Ajax или hidden-image <script> var img = new Image(); img.src = ".../log.php?stats=" + [ js_load, dom_ready, js_init, on_load ].join (','); </script>
- 21. Общая информация повсем пользователям * Внедрение в следующие запросы отчета о предыдущих: Cookies <script> document.cookie = "stats=" + [ js_load, dom_ready, js_init, on_load ].join (','); </script>
- 22. Данные в cookiesследующего хита - негарантированная доставка - последний хит теряется - нет лишних запросов - сборщик удаляет сохраненную куку
- 23. Сбор данных насервере - Сбор и агрегация на стороне сервера - отдельная задача для миллиардов хитов в сутки Scribe, агрегация в MySQL, графики в RRD
- 24. Сбор данных насервере users www cluster www1 scribe aggregation www2 scribe www3 Scribe scribe php central MySQL wwwN scribe
- 25. Сбор данных насервере Несмотря на агрегацию, данных очень много mysql> select TABLE_NAME,TABLE_ROWS,DATA_LENGTH,INDEX_LENGTH from information_schema.TABLES where TABLE_NAME='CookieStatsGrouped'; +--------------------+------------+-------------+--------------+ | TABLE_NAME | TABLE_ROWS | DATA_LENGTH | INDEX_LENGTH | +--------------------+------------+-------------+--------------+ | CookieStatsGrouped | 55866578 | 3519037440 | 2808102912 | +--------------------+------------+-------------+--------------+ 6Tb агрегированные за неделю!
- 26. Описание графиков время время выполнения выполнения в разных браузерах 2s 1s логирифмическая 250 ms шкала 200 ms 100 ms время час, день, неделя Легенда: браузер, время выполнения ie - Internet Explorer 6-9 ff - Firefox 2-4+ cr - Google Chrome wk - Safari op - Opera
- 27. Что можно увидетьна графиках - Результаты оптимизации
- 28. Что можно увидетьна графиках - Результаты оптимизации
- 29. Что можно увидетьна графиках - ошибки в части браузеров
- 30. Что можно увидетьна графиках - последствия редизайна
- 31. Детальные измерения - тестовыепользователи - отчет с точностью до компонент - детальная статистика внутри компонент - любые замеры подозрительных мест
- 32. Детальные измерения DOMContentLoaded JS init onLoad time инициализация приложения Загрузка документа и статики
- 33. Детальные измерения var pages= []; document.addEventListener('DOMContentLoaded', function(){ for (var i=0; i < pages; i++){ var begin = Date.now(); pages[i].init(); var cmp_init = Date.now() - begin; console.log( pages[i].name + ' - ' + cmp_init ); } }, false);
- 34. Профайлинг - Список компонентс их "весами" - Высоко-уровневый профайлинг - Обоснованный выбор компонента для оптимизации/рефакторинга
- 35. Детальная информация на тестовых пользователях IE6 FF2 список компонентов и их времен 4 секунды! 0.5 сек
- 36.
- 37. Графики сутки, неделя, месяц,год Разбиение: - по страницам - по браузерам - по странам
- 38.
- 39. Графики Франция на пражскомДЦ Бразилия на майамском ДЦ
- 40. Планы развития - ResourceTiming - W3C (больше сетевой информации) - Более детальная аналитика
- 41. Спасибо! Вопросы? Павел Довбуш Head ofFrontend department dpp@corp.badoo.com http://badoo.com/