Презентация Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения абсолютно бесплатно. Урок-презентация на эту тему содержит всего 38 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:38 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:564.02 kB
- Просмотров:44
- Скачиваний:1
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: Производительность
Web-приложения
на клиентской стороне
Андрей Кулешов
Деловые решения
№2 слайд
Содержание слайда: Про что мы говорим?
Страница
И множество связанных с ней ресурсов
№3 слайд
Содержание слайда: Зачем городить огород?
№4 слайд
Содержание слайда: Насколько терпеливы пользователи?
№5 слайд
Содержание слайда: Три числа терпения
0.1 секунды
После этой границы человек начинает замечать задержку
1 секунда
На этой границе человек начинает подозревать, что с системой что-то не так. Теряется чувство прямого взаимодействия с компьютером
10 секунд
«Время смерти» – человек начинает подозревать, что система не работает. Перезагружает страницу второй раз, переключается на другие задачи, идёт делать чай
№6 слайд
Содержание слайда: Изменение показателей
при увеличении времени ожидания
№7 слайд
Содержание слайда: На что тратится время?
№8 слайд
Содержание слайда: На что тратится время?
№9 слайд
Содержание слайда: На что тратится время?
№10 слайд
Содержание слайда: Кто же побеждает?
Побеждают не лучшие в чем-то одном
Побеждают те, кто последовательно хороши во всём:
- объём информации для скачивания;
- количество DOM-элементов;
- количество CSS-правил
- количество изображений;
- количество блоков JavaScript-кода;
- количество строк JavaScript-кода;
- и те, кто всё это правильно использует.
№11 слайд
Содержание слайда: Начинается всё с Сети…
Несмотря на рост пропускной способности каналов, она все равно остаётся ограниченной
Особенно если учесть стремительно растущий рынок мобильных устройств
Поэтому два основных принципа:
- уменьшаем количество ресурсов
- уменьшаем размер ресурсов
№12 слайд
Содержание слайда: Чем меньше нужно скачать –
тем лучше
Минимизируйте количество используемых ресурсов
№13 слайд
Содержание слайда: Избегайте перенаправлений
Request
GET / HTTP/1.1
Host: 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: 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
№18 слайд
Содержание слайда: Вынесение ресурсов
на несколько доменов
Большинство современных браузеров загружают с одного домена одновременно 6-10 ресурсов
Распределив ресурсы по нескольким доменам – получим больше одновременных загрузок
Маленькая прибавка к производительности – на эти домены не будут пересылаться cookies при каждом запросу
№19 слайд
Содержание слайда: Использование
Content Delivery Network (CDN)
Может быть использовано для статического контента (логотипы, картинки), и при некотором усердии – для динамического
Пользователь скачивает ресурс с сервера, наиболее близкого к нему
Если это популярная JS-библиотека – есть шанс, что у пользователя она уже скачана, и её не придётся качать заново
№20 слайд
Содержание слайда: Использование спрайтов
ImageSprite – одна большая картинка, которая содержит в себе множество маленьких
И множество CSS-правил, которые хранят координаты и размер каждой из них
Общий размер для скачивания уменьшается
Нужно скачать только один файл
№21 слайд
Содержание слайда: Демо
Использование спрайтов
Использование нескольких доменов
№22 слайд
Содержание слайда: Скачали данные – рендерим страницу
Что тоже нужно делать быстро
И иногда достаточно казаться, а не быть
№23 слайд
Содержание слайда: 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>
№25 слайд
Содержание слайда: Используйте PNG, JPEG и JPEG-XR
JPEG – для фотографий
PNG – для всего остального
GIF – устаревший формат – занимает больше места, потребляет больше CPU
JPEG-XR – для фотографий высокого разрешения. Действительно высокого
№26 слайд
Содержание слайда: … и показывайте их
в реальном размере
<!–- 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))
№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;
}
№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 слайд
Содержание слайда: Вопросы?
Внимательно слушаю!
№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/
№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
Скачать все slide презентации Производительность Web-приложения на клиентской стороне Андрей Кулешов Деловые решения одним архивом:
