Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения

Август 30, 2022

Главная
Технология
Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения

Содержание

2. Про что мы говорим? Страница И множество связанных с ней ресурсов
3. Зачем городить огород?
4. Насколько терпеливы пользователи? * Why Web Performance Matters (Richard Campbell)
5. Три числа терпения 0.1 секунды После этой границы человек начинает замечать задержку 1 секунда На этой
6. Изменение показателей при увеличении времени ожидания * Why Web Performance Matters (Richard Campbell)
7. На что тратится время? Networking HTML CSS Collections JavaScript Marshalling DOM Formatting Block Building Layout Rendering
8. На что тратится время? 50 Performance Tricks to Make Your HTML5 Web Sites Faster (Jason Weber)
9. На что тратится время? 50 Performance Tricks to Make Your HTML5 Web Sites Faster (Jason Weber)
10. Кто же побеждает? Побеждают не лучшие в чем-то одном Побеждают те, кто последовательно хороши во всём:
11. Начинается всё с Сети… Несмотря на рост пропускной способности каналов, она все равно остаётся ограниченной Особенно
12. Чем меньше нужно скачать – тем лучше Минимизируйте количество используемых ресурсов Не следует множить сущее без
13. Избегайте перенаправлений Request GET / HTTP/1.1 Host: getdev.net Response HTTP/1.1 303 See Other Location: http://www.getdev.net/
14. Демо Request? Response? Headers?
15. Сжатие на сервере Response details HTTP/1.1 200 OK Content-Encoding: gzip Server: Microsoft-IIS/7.5 Все современные браузеры поддерживают
16. Кэширование Response details HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Sat, 31 Oct 2020 00:00:00 GMT Last-Modified:
17. Демо Кэширование и сжатие на IIS
18. Вынесение ресурсов на несколько доменов Большинство современных браузеров загружают с одного домена одновременно 6-10 ресурсов Распределив
19. Использование Content Delivery Network (CDN) Может быть использовано для статического контента (логотипы, картинки), и при некотором
20. Использование спрайтов ImageSprite – одна большая картинка, которая содержит в себе множество маленьких И множество CSS-правил,
21. Демо Использование спрайтов Использование нескольких доменов
22. Скачали данные – рендерим страницу Что тоже нужно делать быстро И иногда достаточно казаться, а не
23. CSS-файлы – в начале страницы Сразу же по получении CSS файла браузер начинает рендерить красивую картинку
24. Не делайте вложенных и встроенных CSS-стилей Test .item { color:#009900;} MyItem MyItem 2 Это очень просто
25. Используйте PNG, JPEG и JPEG-XR JPEG – для фотографий PNG – для всего остального GIF –
26. … и показывайте их в реальном размере Скачиваем больше, чем нужно Тратим процессорное время на изменение
27. Используйте CSS 3 и HTML5 -ms-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333)) -webkit-gradient(linear, 50% 50%,
28. И теперь можно запускать скрипты Запускать их лучше всего в тот момент, когда DOM уже полностью
29. JS-файлы – в конце страницы Пока загружается и исполняется JavaScript файл – не производится ни скачивание,
30. Кэшируйте обращение к DOM $(“.class1”).show(); $(“.class1”).hide(); - два раза проходит по всему (возможно, очень большому!) дереву
31. Изменение DOM Если нужно внести изменения в страницу – сначала всё подготовьте, а потом уже один
32. Минимизируйте JavaScript /* this function is used to calculate sum of two numbers */ Function sumFunction
33. Используйте Web Workers var worker = new Worker("worker_script.js"); worker.postMessage("Hello World!"); Могут быть использованы для долговременных расчетов
34. Демо Минифицированный ЯваСкрипт Cassette for ASP.NET MVC by Andrew Davey https://github.com/andrewdavey
35. А можно как-то вот это всё автоматизировать? Есть инструменты. Встроенные средства разработчика во всех браузерах Плагины
36. Вопросы? Внимательно слушаю! ☺ Андрей Кулешов «Деловые решения» Директор akuleshov@solforbiz.com http://www.solforbiz.com Специально для http://GetDev.NET
37. Интересное чтение Best Practices for Speeding Up Your Web Site – Yahoo http://developer.yahoo.com/performance/rules.html Steve Souders –
39. Скачать презентацию

Слайд 2

Про что мы говорим?
Страница
И множество связанных с ней ресурсов

Слайд 3

Зачем городить огород?

Слайд 4

Насколько терпеливы пользователи?
* Why Web Performance Matters (Richard Campbell)

Слайд 5

Три числа терпения
0.1 секунды После этой границы человек начинает замечать задержку
1 секунда На

этой границе человек начинает подозревать, что с системой что-то не так. Теряется чувство прямого взаимодействия с компьютером
10 секунд «Время смерти» – человек начинает подозревать, что система не работает. Перезагружает страницу второй раз, переключается на другие задачи, идёт делать чай

http://www.useit.com/papers/responsetime.html

Слайд 6

Изменение показателей при увеличении времени ожидания
* Why Web Performance Matters (Richard Campbell)

Слайд 7

На что тратится время?
Networking
HTML
CSS
Collections
JavaScript
Marshalling
DOM
Formatting
Block Building
Layout
Rendering
50 Performance Tricks to Make Your HTML5

Web Sites Faster (Jason Weber)

Подсистемы Internet Explorer

Слайд 8

На что тратится время?
50 Performance Tricks to Make Your HTML5 Web

Sites Faster (Jason Weber)

Средние значения для пяти новостных сайтов

Слайд 9

На что тратится время?
50 Performance Tricks to Make Your HTML5 Web

Sites Faster (Jason Weber)

Средние значения для нескольких AJAX-сайтов

Слайд 10

Кто же побеждает?
Побеждают не лучшие в чем-то одном
Побеждают те, кто последовательно

хороши во всём: - объём информации для скачивания; - количество DOM-элементов; - количество CSS-правил - количество изображений; - количество блоков JavaScript-кода; - количество строк JavaScript-кода; - и те, кто всё это правильно использует.

Слайд 11

Начинается всё с Сети…
Несмотря на рост пропускной способности каналов, она все

равно остаётся ограниченной
Особенно если учесть стремительно растущий рынок мобильных устройств
Поэтому два основных принципа: - уменьшаем количество ресурсов - уменьшаем размер ресурсов

Слайд 12

Чем меньше нужно скачать – тем лучше
Минимизируйте количество используемых ресурсов
Не следует

множить сущее без необходимости

Уильям Оккам

Слайд 13

Избегайте перенаправлений
Request
GET / HTTP/1.1
Host: getdev.net
Response
HTTP/1.1 303 See Other
Location: http://www.getdev.net/

Слайд 14

Демо Request? Response? Headers?

Слайд 15

Сжатие на сервере
Response details
HTTP/1.1 200 OK
Content-Encoding: gzip
Server: Microsoft-IIS/7.5
Все современные браузеры

поддерживают приём сжатого содержимого (gzip, deflate)
Резко уменьшается объем передаваемых по сети данных
Поддерживается всеми основными серверами (IIS, Apache, nginx)
Единственный минус – процессорное время. Но он с лихвой перевешивается выигрышем в траффике.

Слайд 16

Кэширование
Response details
HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Sat, 31 Oct 2020 00:00:00

GMT
Last-Modified: Mon, 10 Oct 2011 18:55:14 GMT
ETag: "1fc57257e871:0“
Response details
HTTP/1.1 304 Not Modified
Last-Modified: Mon, 10 Oct 2011 18:55:14 GMT

Все ваши ресурсы с меняющимся содержим не должны быть закэшированы
Все ваши ресурсы с постоянным содержим должны быть закэшированы навсегда
ETag и Last-Modified
Регистр в названиях ресурсов icon.png и Icon.png – один файл, но два скачивания…

Слайд 17

Демо Кэширование и сжатие на IIS

Слайд 18

Вынесение ресурсов на несколько доменов
Большинство современных браузеров загружают с одного домена

одновременно 6-10 ресурсов
Распределив ресурсы по нескольким доменам – получим больше одновременных загрузок
Маленькая прибавка к производительности – на эти домены не будут пересылаться cookies при каждом запросу

Браузер

Домен

50 Performance Tricks to Make Your HTML5 Web Sites Faster (Jason Weber)

getdev.net

img1.getdev.net

Слайд 19

Использование Content Delivery Network (CDN)
Может быть использовано для статического контента (логотипы,

картинки), и при некотором усердии – для динамического
Пользователь скачивает ресурс с сервера, наиболее близкого к нему
Если это популярная JS-библиотека – есть шанс, что у пользователя она уже скачана, и её не придётся качать заново

Слайд 20

Использование спрайтов
ImageSprite – одна большая картинка, которая содержит в себе множество

маленьких
И множество CSS-правил, которые хранят координаты и размер каждой из них
Общий размер для скачивания уменьшается
Нужно скачать только один файл

http://css-tricks.com/158-css-sprites/

http://www.google.ru/intl/ru/options/
http://www.google.ru/options/i12.png

Слайд 21

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

Слайд 22

Скачали данные – рендерим страницу
Что тоже нужно делать быстро
И иногда достаточно

казаться, а не быть

Слайд 23

CSS-файлы – в начале страницы
Сразу же по получении CSS файла браузер

начинает рендерить красивую картинку
Пользователь быстрее получает сайт, приближенный по виду и разметке к финальному состоянию
Загрузка других ресурсов при этом не блокируется

Слайд 24

Не делайте вложенных и встроенных CSS-стилей

Test

MyItem

MyItem 2

Это очень просто и быстро – сделать стиль для одного-единственного элемента встроенным в страницу
Но на этапе рендеринга это ухудшает производительность

Слайд 25

Используйте PNG, JPEG и JPEG-XR
JPEG – для фотографий
PNG – для всего

остального
GIF – устаревший формат – занимает больше места, потребляет больше CPU
JPEG-XR – для фотографий высокого разрешения. Действительно высокого ☺

Слайд 26

… и показывайте их в реальном размере

height=“60px” src=“wallpaper.jpg” />

Скачиваем больше, чем нужно
Тратим процессорное время на изменение размера
А ведь достаточно всего один раз изменить размер

Слайд 27

Используйте CSS 3 и HTML5
-ms-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666),

color-stop(.3,#333333))
-webkit-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))
-moz-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666), color-stop(.3,#333333))

Для градиентов

border-radius:18px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;

Для скругления углов

Для рисования на канве

Поддерживается большинством современных браузеров

Слайд 28

И теперь можно запускать скрипты
Запускать их лучше всего в тот момент,

когда DOM уже полностью скачан. Внешние ресурсы в это время, скорее всего, ещё грузятся, но ждать их не имеет смысла

Слайд 29

JS-файлы – в конце страницы
Пока загружается и исполняется JavaScript файл –

не производится ни скачивание, ни выполнение никаких других ресурсов (по стандарту. На практике, большинство браузеров скачивают ресурсы, но не выполняют их)
Поэтому сначала лучше дать загрузиться всему остальному, чтобы пользователь увидел страницу, и лишь затем лезть со своим программированием
Если очень-очень надо в начале – то помечаем аттрибутом defer (откладывающем выполнение)

Слайд 30

Кэшируйте обращение к DOM
$(“.class1”).show(); $(“.class1”).hide(); - два раза проходит по всему (возможно, очень

большому!) дереву var x = $(“.class1”); x.show(); x.hide(); - почти в два раза эффективнее

Слайд 31

Изменение DOM
Если нужно внести изменения в страницу – сначала всё подготовьте,

а потом уже один раз меняйте var content = getTitle() + getBody() + getFooter(); myControl.innerHtml = content;
innerHtml – самый быстрый способ сделать изменение

Слайд 32

Минимизируйте JavaScript
/* this function is used to calculate sum of two

numbers */
Function sumFunction (value1, value2)
{
var sum = value1 + value2;
Return sum; }

function sum(a, b){return a + b;}

Минимизированный скрипт:

можно делать вручную (удачи)
можно делать в момент выкладывания приложения
можно делать во время исполнения приложения

Слайд 33

Используйте Web Workers
var worker = new Worker("worker_script.js"); worker.postMessage("Hello World!");
Могут быть использованы для

долговременных расчетов или для фоновых операций
Не замедляют пользовательский интерфейс

Слайд 34

Демо Минифицированный ЯваСкрипт
Cassette for ASP.NET MVC by Andrew Davey https://github.com/andrewdavey

Слайд 35

А можно как-то вот это всё автоматизировать?
Есть инструменты.
Встроенные средства разработчика во

всех браузерах
Плагины от Гугла и Яху http://veerasundar.com/blog/2009/06/google-page-speed-firefox-plugin-for-improving-website-performance/ YSlow - https://addons.mozilla.org/ru/firefox/addon/yslow/
Инструменты минимизации AjaxMin - http://ajaxmin.codeplex.com/ YUI Compressor - http://developer.yahoo.com/yui/compressor/ JSMin … и многие другие

Слайд 36

Вопросы? Внимательно слушаю! ☺
Андрей Кулешов
«Деловые решения»
Директор
akuleshov@solforbiz.com
http://www.solforbiz.com
Специально для http://GetDev.NET

Слайд 37

Интересное чтение
Best Practices for Speeding Up Your Web Site – Yahoo http://developer.yahoo.com/performance/rules.html
Steve

Souders – эксперт из Google http://www.stevesouders.com/
Top 10 Client-Side Performance Problems in Web 2.0 http://blog.dynatrace.com/2010/08/25/top-10-client-side-performance-problems-in-web-2-0/

Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения

Содержание

Про что мы говорим?СтраницаИ множество связанных с ней ресурсов

Зачем городить огород?

Насколько терпеливы пользователи?* Why Web Performance Matters (Richard Campbell)

Три числа терпения0.1 секунды После этой границы человек начинает замечать задержку1 секунда На

Изменение показателей при увеличении времени ожидания* Why Web Performance Matters (Richard Campbell)

На что тратится время?NetworkingHTMLCSSCollectionsJavaScriptMarshallingDOMFormattingBlock BuildingLayoutRendering50 Performance Tricks to Make Your HTML5

На что тратится время?50 Performance Tricks to Make Your HTML5 Web

На что тратится время?50 Performance Tricks to Make Your HTML5 Web

Кто же побеждает?Побеждают не лучшие в чем-то одномПобеждают те, кто последовательно

Начинается всё с Сети…Несмотря на рост пропускной способности каналов, она все

Чем меньше нужно скачать – тем лучшеМинимизируйте количество используемых ресурсовНе следует

Избегайте перенаправленийRequestGET / HTTP/1.1Host: getdev.netResponseHTTP/1.1 303 See OtherLocation: http://www.getdev.net/

Демо Request? Response? Headers?

Сжатие на сервереResponse detailsHTTP/1.1 200 OK Content-Encoding: gzipServer: Microsoft-IIS/7.5Все современные браузеры

КэшированиеResponse detailsHTTP/1.1 200 OK Content-Type: image/jpegExpires: Sat, 31 Oct 2020 00:00:00

Демо Кэширование и сжатие на IIS

Вынесение ресурсов на несколько доменовБольшинство современных браузеров загружают с одного домена

Использование Content Delivery Network (CDN)Может быть использовано для статического контента (логотипы,

Использование спрайтовImageSprite – одна большая картинка, которая содержит в себе множество

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

Скачали данные – рендерим страницуЧто тоже нужно делать быстроИ иногда достаточно

CSS-файлы – в начале страницы Сразу же по получении CSS файла браузер

Используйте PNG, JPEG и JPEG-XRJPEG – для фотографийPNG – для всего

… и показывайте их в реальном размере

Используйте CSS 3 и HTML5-ms-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666),

И теперь можно запускать скриптыЗапускать их лучше всего в тот момент,

JS-файлы – в конце страницы Пока загружается и исполняется JavaScript файл –

Кэшируйте обращение к DOM $(“.class1”).show(); $(“.class1”).hide(); - два раза проходит по всему (возможно, очень

Изменение DOMЕсли нужно внести изменения в страницу – сначала всё подготовьте,

Минимизируйте JavaScript/* this function is used to calculate sum of two

Используйте Web Workersvar worker = new Worker("worker_script.js"); worker.postMessage("Hello World!");Могут быть использованы для

Демо Минифицированный ЯваСкриптCassette for ASP.NET MVC by Andrew Davey https://github.com/andrewdavey

А можно как-то вот это всё автоматизировать?Есть инструменты.Встроенные средства разработчика во

Вопросы? Внимательно слушаю! ☺Андрей Кулешов«Деловые решения»Директор akuleshov@solforbiz.comhttp://www.solforbiz.comСпециально для http://GetDev.NET

Интересное чтениеBest Practices for Speeding Up Your Web Site – Yahoo http://developer.yahoo.com/performance/rules.htmlSteve

Похожие презентации

Про что мы говорим?
Страница
И множество связанных с ней ресурсов

Насколько терпеливы пользователи?
* Why Web Performance Matters (Richard Campbell)

Три числа терпения
0.1 секунды После этой границы человек начинает замечать задержку
1 секунда На

Изменение показателей при увеличении времени ожидания
* Why Web Performance Matters (Richard Campbell)

На что тратится время?
Networking
HTML
CSS
Collections
JavaScript
Marshalling
DOM
Formatting
Block Building
Layout
Rendering
50 Performance Tricks to Make Your HTML5

На что тратится время?
50 Performance Tricks to Make Your HTML5 Web

На что тратится время?
50 Performance Tricks to Make Your HTML5 Web

Кто же побеждает?
Побеждают не лучшие в чем-то одном
Побеждают те, кто последовательно

Начинается всё с Сети…
Несмотря на рост пропускной способности каналов, она все

Чем меньше нужно скачать – тем лучше
Минимизируйте количество используемых ресурсов
Не следует

Избегайте перенаправлений
Request
GET / HTTP/1.1
Host: getdev.net
Response
HTTP/1.1 303 See Other
Location: http://www.getdev.net/

Сжатие на сервере
Response details
HTTP/1.1 200 OK
Content-Encoding: gzip
Server: Microsoft-IIS/7.5
Все современные браузеры

Кэширование
Response details
HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Sat, 31 Oct 2020 00:00:00

Вынесение ресурсов на несколько доменов
Большинство современных браузеров загружают с одного домена

Использование Content Delivery Network (CDN)
Может быть использовано для статического контента (логотипы,

Использование спрайтов
ImageSprite – одна большая картинка, которая содержит в себе множество

Скачали данные – рендерим страницу
Что тоже нужно делать быстро
И иногда достаточно

CSS-файлы – в начале страницы
Сразу же по получении CSS файла браузер

Используйте PNG, JPEG и JPEG-XR
JPEG – для фотографий
PNG – для всего

Используйте CSS 3 и HTML5
-ms-gradient(linear, 50% 50%, 0% 34%, from(#666666), to(#666666),

И теперь можно запускать скрипты
Запускать их лучше всего в тот момент,

JS-файлы – в конце страницы
Пока загружается и исполняется JavaScript файл –

Кэшируйте обращение к DOM
$(“.class1”).show(); $(“.class1”).hide(); - два раза проходит по всему (возможно, очень

Изменение DOM
Если нужно внести изменения в страницу – сначала всё подготовьте,

Минимизируйте JavaScript
/* this function is used to calculate sum of two

Используйте Web Workers
var worker = new Worker("worker_script.js"); worker.postMessage("Hello World!");
Могут быть использованы для

Демо Минифицированный ЯваСкрипт
Cassette for ASP.NET MVC by Andrew Davey https://github.com/andrewdavey

А можно как-то вот это всё автоматизировать?
Есть инструменты.
Встроенные средства разработчика во

Вопросы? Внимательно слушаю! ☺
Андрей Кулешов
«Деловые решения»
Директор
akuleshov@solforbiz.com
http://www.solforbiz.com
Специально для http://GetDev.NET

Интересное чтение
Best Practices for Speeding Up Your Web Site – Yahoo http://developer.yahoo.com/performance/rules.html
Steve