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

1. Тестирование клиентской производительности Алексей Баранцев, Software-Testing.Ru

2. Кто здесь? Алексей Баранцев Software-Testing.Ru barancev@gmail.com skype: barancev g+ AlexeiBarantsev Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

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

5. Что такое «браузер»? Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

6. Что такое «браузер»? Это просто HTTP-клиент Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

7. Это. Просто. HTTP. Клиент. Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

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

10. Как устроен браузер? Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

11. Как устроен браузер? http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

12. Что тут тестировать? Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

13. Загрузка «страницы» Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

14. Инструменты • Браузеры (Dev Tools - F12) • YSlow • PageSpeed • http://gtmetrix.com/ • http://www.webpagetest.org/ Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

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

21. Загрузка «страницы» Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

22. Объём данных jQuery 2.0.3 • 242,142 - original • 83,612 - minified • 71,726 - gzipped • 29,246 - minified & gzipped Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

26. Количество запросов Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

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

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

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

33. Кэш браузера Это как вообще? Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

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

38. Что делать? • Параллельные запросы! но не слишком много на один домен! • На разные домены! Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

40. Что делать? • Параллельные запросы! но не слишком много на один домен • На разные домены! увеличивается DNS resolution не используется Keep-alive • Надо найти баланс… Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

47. Резюме 1: сеть • Объём передаваемых данных склеивание, сжатие и минификация кешируемость и ETag • Количество запросов на один домен или на разные кешируемость и спрайты Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

49. DOM tree <html> <head> <title>Hello, World!</title> </head> <body> <div> <p>Превед, медвед!</p> </div> <div><img src="…"></div> </body> </html> Алексей Баранцев Software-Testing.Ru html head body title div div #text p img #text Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

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

51. Большой DOM: что делать? • Пересмотреть дизайн оно вам таки надо? • «Покрошить» страницы • Подгружать постепенно по клику по скроллу Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

56. CSS Selectors div#header .content p .content * .menu ul li #menu > li Алексей Баранцев Software-Testing.Ru #header .content .content .menu-item .menu-item Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

57. «Место для фото» Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

58. Резюме 2: рендеринг • DOM плохо, если большой и глубокий • Стили селекторы должны быть точными • Картинки указывайте размеры заранее Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

60. «Скрипт не отвечает» Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

61. Инструменты • Браузеры (Dev Tools - F12) • ySlow • PageSpeed • dynaTrace Compuware AJAX Edition Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

64. Reflow Алексей Баранцев • Обновления DOM • Изменение стилей Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

66. Общие правила • Минификация • Стили в head • JavaScript в конце • Эффективные локаторы • Долой «велосипеды»! Алексей Баранцев Software-Testing.Ru Selenium2.Ru Confetqa.Ru barancev@gmail.com skype:barancev g+ AlexeiBarantsev

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

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

Recommended

Recommended

More Related Content

More from SQALab

More from SQALab (20)

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