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

Категория: Технологии
Нажмите для полного просмотра!
Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №1Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №2Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №3Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №4Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №5Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №6Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №7Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №8Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №9Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №10Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №11Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №12Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №13Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №14Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №15Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №16Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №17Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №18Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №19Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №20Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №21Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №22Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №23Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №24Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №25Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №26Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №27Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №28Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №29Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №30Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №31Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №32Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №33Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №34Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №35Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №36Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №37Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения, слайд №38
Скачать

Содержание ▲

Вы можете ознакомиться и скачать Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения. Презентация содержит 38 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


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

Слайд 2


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

Слайд 3


Зачем городить огород?
Описание слайда:
Зачем городить огород?

Слайд 4


Насколько терпеливы пользователи?
Описание слайда:
Насколько терпеливы пользователи?

Слайд 5


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

Слайд 6


Изменение показателей при увеличении времени ожидания
Описание слайда:
Изменение показателей при увеличении времени ожидания

Слайд 7


На что тратится время?
Описание слайда:
На что тратится время?

Слайд 8


На что тратится время?
Описание слайда:
На что тратится время?

Слайд 9


На что тратится время?
Описание слайда:
На что тратится время?

Слайд 10


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

Слайд 11


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

Слайд 12


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

Слайд 13


Избегайте перенаправлений Request GET / HTTP/1.1 Host: getdev.net
Описание слайда:
Избегайте перенаправлений Request GET / HTTP/1.1 Host: getdev.net

Слайд 14


Демо Request? Response? Headers?
Описание слайда:
Демо Request? Response? Headers?

Слайд 15


Сжатие на сервере Response details HTTP/1.1 200 OK Content-Encoding: gzip Server: Microsoft-IIS/7.5
Описание слайда:
Сжатие на сервере 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: 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
Описание слайда:
Кэширование 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

Слайд 17


Демо Кэширование и сжатие на IIS
Описание слайда:
Демо Кэширование и сжатие на IIS

Слайд 18


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

Слайд 19


Использование Content Delivery Network (CDN) Может быть использовано для статического контента (логотипы, картинки), и при некотором усердии – для динамического Пользователь скачивает ресурс с сервера, наиболее близкого к нему Если это популярная JS-библиотека – есть шанс, что у пользователя она уже скачана, и её не придётся качать заново
Описание слайда:
Использование Content Delivery Network (CDN) Может быть использовано для статического контента (логотипы, картинки), и при некотором усердии – для динамического Пользователь скачивает ресурс с сервера, наиболее близкого к нему Если это популярная JS-библиотека – есть шанс, что у пользователя она уже скачана, и её не придётся качать заново

Слайд 20


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

Слайд 21


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

Слайд 22


Скачали данные – рендерим страницу Что тоже нужно делать быстро И иногда достаточно казаться, а не быть
Описание слайда:
Скачали данные – рендерим страницу Что тоже нужно делать быстро И иногда достаточно казаться, а не быть

Слайд 23


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

Слайд 24


Не делайте вложенных и встроенных CSS-стилей <html> <head> <title>Test</title> </head> <body> <style> .item { color:#009900;} </style> <div class=‘item’> MyItem </div> <div style=‘color:Red;’> MyItem 2 </div> </body> </html>
Описание слайда:
Не делайте вложенных и встроенных CSS-стилей <html> <head> <title>Test</title> </head> <body> <style> .item { color:#009900;} </style> <div class=‘item’> MyItem </div> <div style=‘color:Red;’> MyItem 2 </div> </body> </html>

Слайд 25


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

Слайд 26


… и показывайте их в реальном размере <!–- photo 800х600 --> <img width=“80px” height=“60px” src=“wallpaper.jpg” />
Описание слайда:
… и показывайте их в реальном размере <!–- photo 800х600 --> <img width=“80px” 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))
Описание слайда:
Используйте 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))

Слайд 28


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

Слайд 29


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

Слайд 30


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

Слайд 31


Изменение DOM Если нужно внести изменения в страницу – сначала всё подготовьте, а потом уже один раз меняйте var content = getTitle() + getBody() + getFooter(); myControl.innerHtml = content; innerHtml – самый быстрый способ сделать изменение
Описание слайда:
Изменение 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; }
Описание слайда:
Минимизируйте JavaScript /* this function is used to calculate sum of two numbers */ Function sumFunction (value1, value2) { var sum = value1 + value2; Return sum; }

Слайд 33


Используйте Web Workers var worker = new Worker("worker_script.js"); worker.postMessage("Hello World!");
Описание слайда:
Используйте 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
Описание слайда:
Демо Минифицированный ЯваСкрипт 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 … и многие другие
Описание слайда:
А можно как-то вот это всё автоматизировать? Есть инструменты. Встроенные средства разработчика во всех браузерах Плагины от Гугла и Яху 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


Вопросы? Внимательно слушаю! 
Описание слайда:
Вопросы? Внимательно слушаю! 

Слайд 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/
Описание слайда:
Интересное чтение 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/

Слайд 38


Интересное видео Why Web Performance Matters - Richard Campbell http://channel9.msdn.com/Events/TechEd/NorthAmerica/2011/DEV344 50 Performance Tricks to Make Your HTML5 Web Sites Faster - Jason Weber (Principal Program Manager Lead for Internet Explorer) http://channel9.msdn.com/events/MIX/MIX11/HTM01 Повышение производительности клиентской части сайта с высокой нагрузкой – Евгений Чигиринский http://www.techdays.ru/videos/3708.html
Описание слайда:
Интересное видео Why Web Performance Matters - Richard Campbell http://channel9.msdn.com/Events/TechEd/NorthAmerica/2011/DEV344 50 Performance Tricks to Make Your HTML5 Web Sites Faster - Jason Weber (Principal Program Manager Lead for Internet Explorer) http://channel9.msdn.com/events/MIX/MIX11/HTM01 Повышение производительности клиентской части сайта с высокой нагрузкой – Евгений Чигиринский http://www.techdays.ru/videos/3708.html

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию