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

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

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

Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

Кто здесь?

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

Software-Testing.Ru

barancev@gmail.com

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>

bodyhead

title div

p#text

• небоскрёб

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

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

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

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

по скроллу

Демо!

CSS Selectors

div#header

.content p

.content *

.menu ul li

#menu > li

#header

.content

.menu-item

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

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

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

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

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

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

Инструменты

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

• ySlow

• PageSpeed

• dynaTraceCompuware AJAX Edition

Демо!

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

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

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

• Стили в head

• JavaScript в конце

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

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

Вопросы?

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

Software-Testing.Ru

barancev@gmail.com

skype: barancev

g+ AlexeiBarantsev

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

Education

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

Проблемы производительности open source библиотек

Оценка производительности hadoop кластера.

мониторинг производительности Web приложений на python

Тренировочное тестирование по курсу перед ...net.academy.lv/exam/NET_TS_00_TrainingTest.pdfТренировочное тестирование

Тестирование технологий и протоколов L2-L3 ......2 Тестирование технологий и протоколов L2-L3 Тестирование

Андрей Козлов (Altoros): Оптимизация производительности Cassandra

Leader Team_Повышение производительности труда на предприятии

Вебинар "Оптимизация производительности мобильных веб-приложений"

Распространённые ошибки оценки производительности .NET-приложений

Оптимизация производительности Python

Профилирование и оптимизация производительности Ruby-кода

Организация тестирования производительности по SWEAT

Введение в отладку производительности MySQL приложений

Гибкое тестирование

Контроль производительности приложений

Добавление метрик производительности в интернет-счетчик

Введение в тестирование (что такое тестирование, основные принципы тестирования)

мониторинг производительности приложения на PINBA

ETERNUS DX S3 – новые рекорды производительности

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