Тестирование клиентской производительности Алексей Баранцев, Software-Testing.Ru
Тестирование клиентской производительности
Алексей Баранцев, Software-Testing.Ru
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Кто здесь?
Алексей Баранцев
Software-Testing.Ru
skype: barancev
g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Что такое «браузер»?
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Что такое «браузер»?
Это просто HTTP-клиент
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Это. Просто. HTTP. Клиент.
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Согласны?
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Как устроен браузер?
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Как устроен браузер?
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Что тут тестировать?
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Загрузка «страницы»
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Инструменты
• Браузеры (Dev Tools - F12)
• YSlow
• PageSpeed
• http://gtmetrix.com/
• http://www.webpagetest.org/
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Демо!
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Загрузка «страницы»
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Объём данных
jQuery 2.0.3
• 242,142 - original
• 83,612 - minified
• 71,726 - gzipped
• 29,246 - minified & gzipped
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Демо!
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Количество запросов
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Что делать?
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Кэш браузера
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Кэш браузера
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Демо!
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Кэш браузера
Это как вообще?
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Демо!
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Демо!
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Количество запросов
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Что делать?
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Что делать?
• Параллельные запросы!но не слишком много на один домен!
• На разные домены!
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Количество запросов
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Что делать?
• Параллельные запросы!но не слишком много на один домен
• На разные домены!увеличивается DNS resolution
не используется Keep-alive
• Надо найти баланс…
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Демо!
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Резюме 1: сеть
• Объём передаваемых данныхсклеивание, сжатие и минификация
кешируемость и ETag
• Количество запросовна один домен или на разные
кешируемость и спрайты
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Что тут тестировать?
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
DOM tree<html><head><title>Hello, World!</title>
</head><body><div><p>Превед, медвед!</p>
</div><div><img src="…"></div>
</body></html>
html
bodyhead
title div
p#text
#text
div
img
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
• небоскрёб
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Большой DOM: что делать?
• Пересмотреть дизайноно вам таки надо?
• «Покрошить» страницы
• Подгружать постепеннопо клику
по скроллу
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Демо!
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
CSS Selectors
div#header
.content p
.content *
.menu ul li
#menu > li
#header
.content
.content
.menu-item
.menu-item
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
«Место для фото»
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Резюме 2: рендеринг
• DOMплохо, если большой и глубокий
• Стилиселекторы должны быть точными
• Картинкиуказывайте размеры заранее
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Что тут тестировать?
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
«Скрипт не отвечает»
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Инструменты
• Браузеры (Dev Tools - F12)
• ySlow
• PageSpeed
• dynaTraceCompuware AJAX Edition
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Демо!
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Reflow• Обновления DOM• Изменение стилей
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Общие правила
• Минификация
• Стили в head
• JavaScript в конце
• Эффективные локаторы
• Долой «велосипеды»!
Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev
Вопросы?
Алексей Баранцев
Software-Testing.Ru
skype: barancev
g+ AlexeiBarantsev