Тестирование производительности клиентсайда: приквел

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

Алексей Баранцев, Software-Testing.Ru

Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru [email protected] skype:barancev g+ AlexeiBarantsev

Кто здесь?

Алексей Баранцев

Software-Testing.Ru

[email protected]

skype: barancev

g+ AlexeiBarantsev


Что такое «браузер»?


Что такое «браузер»?

Это просто HTTP-клиент


Это. Просто. HTTP. Клиент.


Согласны?


Как устроен браузер?


Как устроен браузер?

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/


Что тут тестировать?


Загрузка «страницы»


Инструменты

• Браузеры (Dev Tools - F12)

• YSlow

• PageSpeed

• http://gtmetrix.com/

• http://www.webpagetest.org/


Демо!


Загрузка «страницы»


Объём данных

jQuery 2.0.3

• 242,142 - original

• 83,612 - minified

• 71,726 - gzipped

• 29,246 - minified & gzipped


Демо!


Количество запросов


Что делать?


Кэш браузера


Демо!


Кэш браузера

Это как вообще?


Демо!



• Параллельные запросы!но не слишком много на один домен!

• На разные домены!



• Параллельные запросы!но не слишком много на один домен

• На разные домены!увеличивается DNS resolution

не используется Keep-alive

• Надо найти баланс…


Демо!


Резюме 1: сеть

• Объём передаваемых данныхсклеивание, сжатие и минификация

кешируемость и ETag

• Количество запросовна один домен или на разные

кешируемость и спрайты


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


• небоскрёб


Большой DOM: что делать?

• Пересмотреть дизайноно вам таки надо?

• «Покрошить» страницы

• Подгружать постепеннопо клику

по скроллу


Демо!


CSS Selectors

div#header

.content p

.content *

.menu ul li

#menu > li

#header

.content

.content

.menu-item

.menu-item


«Место для фото»


Резюме 2: рендеринг

• DOMплохо, если большой и глубокий

• Стилиселекторы должны быть точными

• Картинкиуказывайте размеры заранее


«Скрипт не отвечает»


Инструменты

• Браузеры (Dev Tools - F12)

• ySlow

• PageSpeed

• dynaTraceCompuware AJAX Edition


Демо!


Reflow• Обновления DOM• Изменение стилей


Общие правила

• Минификация

• Стили в head

• JavaScript в конце

• Эффективные локаторы

• Долой «велосипеды»!


Вопросы?

Алексей Баранцев

Software-Testing.Ru

[email protected]

skype: barancev

g+ AlexeiBarantsev

Тестирование производительности клиентсайда: приквел

Education

Transcript of Тестирование производительности клиентсайда: приквел