Видео: http://getdev.net/Event/client-side-web-performance
Рассказывает о том, на что тратится время при выполнение HTML-based Web-приложений, и о том, как увеличить производительность таких приложений на стороне клиента
Материалы со встречи:
https://getdev.net/Event/docker
Docker: зачем нужен и почему выстрелил? Контейнеры против виртуальных машин - кто лучше? Docker на Windows: как и когда? А также демо: создание и deploy контейнера на ваших глазах
Высокопроизводительные приложения на базе Windows Azure. Пример реального про...UNETA
Презентация к докладу: «Высокопроизводительные приложения на базе Windows Azure. Пример реального проекта». Докладчик: Александр Фещенко – MVP (SQL Azure), .Net Team Lead в DCT.
В докладе будут рассмотрены методики поиска узких мест в веб-приложениях, их устранения, а также способы повышения производительности при помощи облачной инфраструктуры Windows Azure.
Presentation about a most powerfull HTML5 technologies such as WebSockets and WebWorkers. Presentation also covers a main principles about working with ASP.NET SignalR Library
Материалы со встречи:
https://getdev.net/Event/docker
Docker: зачем нужен и почему выстрелил? Контейнеры против виртуальных машин - кто лучше? Docker на Windows: как и когда? А также демо: создание и deploy контейнера на ваших глазах
Высокопроизводительные приложения на базе Windows Azure. Пример реального про...UNETA
Презентация к докладу: «Высокопроизводительные приложения на базе Windows Azure. Пример реального проекта». Докладчик: Александр Фещенко – MVP (SQL Azure), .Net Team Lead в DCT.
В докладе будут рассмотрены методики поиска узких мест в веб-приложениях, их устранения, а также способы повышения производительности при помощи облачной инфраструктуры Windows Azure.
Presentation about a most powerfull HTML5 technologies such as WebSockets and WebWorkers. Presentation also covers a main principles about working with ASP.NET SignalR Library
Speech about BEM and our fails at FailOver conference, 2015
by Kirill Lapenin, Alexej Yaroshevich
Materials and links: https://www.channelkit.com/yaroshevich/bem-for-corporate/
Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
Mihail Zachepilo - WebAssembly powered Machine LearningMaria Kuneva
Stop talking about WebAssembly specification, let's solve a problems using it! How to WebAssembly work and how we can use it to enhance Machine Learning in browser experience.
Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
Слайды доклада https://getdev.net/Event/go-language
Зачем придумали Go и что нам с этим делать
Доклад будет про историю возникновения, про основы синтаксиса, сферы применения и чуточку залезть под капот главной фишки языка - goroutines.
Leap Motion - игрушка с заделом на будущееGetDev.NET
Leap Motion - это контроллер ввода путем захвата движений с использованием одноименной технологии. На встрече мы рассмотрим аппаратную часть, готовые программные решения и некоторые смежные технологии.
Speech about BEM and our fails at FailOver conference, 2015
by Kirill Lapenin, Alexej Yaroshevich
Materials and links: https://www.channelkit.com/yaroshevich/bem-for-corporate/
Субъективная точка зрения на фронтенд разработку.
Площадка: IT-бар КЛЮЧ, https://vk.com/event69759919
Видео с доклада: https://www.youtube.com/watch?v=pyAYbbDJjPo
Mihail Zachepilo - WebAssembly powered Machine LearningMaria Kuneva
Stop talking about WebAssembly specification, let's solve a problems using it! How to WebAssembly work and how we can use it to enhance Machine Learning in browser experience.
Web Components usher in a new era of web development based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond.
Слайды доклада https://getdev.net/Event/go-language
Зачем придумали Go и что нам с этим делать
Доклад будет про историю возникновения, про основы синтаксиса, сферы применения и чуточку залезть под капот главной фишки языка - goroutines.
Leap Motion - игрушка с заделом на будущееGetDev.NET
Leap Motion - это контроллер ввода путем захвата движений с использованием одноименной технологии. На встрече мы рассмотрим аппаратную часть, готовые программные решения и некоторые смежные технологии.
Нескучная гирлянда на новогодние праздники и приятная подсветка в течение года. Программируем ардуино со смартфона по блютусу.
Материалы со встречи:
https://getdev.net/Event/arduino
Mind Mapping, или как заставить свой мозг работать лучшеGetDev.NET
Слайды со встречи https://getdev.net/Event/mind-mapping
На встрече пойдет речь о том, что же это за зверь такой - ментальная карта, почему эта техника визуализации так популярна, где и зачем ее использовать, и как с ее помощью познать Силу
По традиции приглашаем вас на встречу с кратким обзором новых функций обновленной версии среды разработки Visual Studio 2015. Мы также поговорим о кроссплатформенной разработке для мобильных платформ, изменениях в веб-стеке, новой версии языка C# и open source инициативах Microsoft
Windows 10 для пользователей и разработчиковGetDev.NET
Чего ждать от Windows 10, выходящей летом 2015 года? Рассказ про улучшения для разработчиков приложений для Магазина Windows и про исправления досадных недоразумений, к которым все давно привыкли.
PhoneGap для мобильного разработчика - глубокое погружение без ОЗКGetDev.NET
Видео со встречи: http://getdev.net/Event/phonegap
Кратко поговорим о том как появился, как развивался, что внутри. Рассмотрим явные косяки и неприкрытые плюсы PhoneGap пути. Обратим внимание на скрытые проблемы, которые вы непременно найдёте при активной разработке. Рассмотрим позитивные моменты, которые никто не замечает, но они то есть. Потыкаем существующий инструментарий и варианты интеграции. И решим, где стоит применять PhoneGap и стоит ли вообще.
Слайды со встречи http://getdev.net/Event/webapi
Платформа ASP.NET Web API позволяет с легкостью создавать службы HTTP для широкого диапазона клиентов, включая браузеры и мобильные устройства. ASP.NET Web API идеально подходит для разработки приложений RESTful на платформе .NET Framework. Будут упомянуты понятия REST и отличие REST-пути от RPC (WCF)-пути, рассмотрен стандарт OData, сказаны слова OWIN и Katana
Видеозапись со встречи:
http://getdev.net/Event/vs2013
Всего год прошел с выпуска Visual Studio 2012, а разработчики уже могут пользоваться новой версией. Так ли много изменений? Зачем обновленная IDE спрашивает логин и пароль? Можно ли отлаживать свой код по дороге в офис прямо с планшета?
Видеозапись встречи:
http://getdev.net/Event/angularjs
Стремительно набирающий популярность фреймворк, облегчающий создание клиентских приложений. SPA, MVC, MVVM и множество других облегчающих разработку акронимов.
В докладе предполагается общий обзор, показывающий отдельные части, из которых состоит фреймворк, то, как они живут вместе друг с другом и существуют в окружающем мире страниц, серверов и источников данных.
Видеозапись встречи:
http://getdev.net/Event/typescript
TypeScript - язык программирования от Microsoft, который является надмножеством JavaScript. Он поддерживает статическую типизацию, модули, определение классов и интерфейсов и транслируется в чистый JS. Спецификации языка открыты, а код компилятора распространяется под лицензией Apache.
Создание повторно используемых бизнес моделей с помощью технологии Domain Com...GetDev.NET
Материалы со встречи: http://getdev.net/Event/xaf-reuse
Задумывались ли вы когда-нибудь, что с переходом от SQL к DataSet, а затем и к ORM типа Entity Framework развитие технологий для доступа и управления данными приостановилось? Что еще нового можно придумать к уже привычному оперированию записями таблиц БД как объектами CRL и при этом поднять удобство разработчика на следующий уровень? На этот и другие вопросы попробует дать ответ доклад о технологии Domain Components (часть DevExpress eXpressApp Framework), которая облегчает создание повторно используемых бизнес моделей за счет легкого комбинирования путем использования интерфейсов вместо классов (это позволяет вам эмулировать "множественное наследование" в C# и VB.NET), а также свободы от особенностей конкретной ORM.
Видео со встречи:
http://getdev.net/Event/lego-mindstorms
Совместный доклад Сергея Шебанина и Дмитрия Филиппова. Конструктор для создания программируемого робота. Расширение возможностей программирования до физического контакта с предметами. Внутренности, комплектация, технические параметры сенсоров и приводов. Как программировать - графический вариант и обычный текстовый. Какие есть варианты креплений и подвижных соединений. Простейшие алгоритмы слежения за линией (с примером на NXC).
Особенности мобильной платформы Windows Phone 8GetDev.NET
Видеозапись и материалы доклада: http://getdev.net/Event/wp8
Можно ли писать приложения на C++? Правда ли, что у Windows 8 и Windows Phone 8 единое ядро? Будет ли аналог Siri в новых смартфонах? Вся правда о новой мобильной платформе от Microsoft только на GetDev.NET!
Материалы с доклада: http://getdev.net/Event/async-javascript
Рассказ о том, как работает асинхронность в JavaScript, кто стоит в очереди выполнения, почему в JavaScript никогда не будет процессорной гонки, как давать отсроченные обещания и что делать, если одна из ваших функций подхватила заразу асинхронности
Видео со встречи: http://getdev.net/Event/xaml
Доклад посвящен XAML — основанному на XML языку разметки для декларативного программирования приложений. Он является основой технологий WPF и Silverlight, a также используется в WinRT.
Видео и материалы со встречи:
http://getdev.net/Event/dynamic-language-runtime
В докладе рассмотрим скриптовые языки на платформе DLR, способы автоматизации рутинной работы с их помощью, а также интегрирование в конечное приложение.
Видео со встречи: http://getdev.net/Event/javascript-good-form
Рассказ о том, как в приличном обществе принято структурировать свой JavaScript, разбивать его на отдельные логические единицы, инкапсулировать его от внешней среды, подключать скрипты к своему веб-приложению, и организовывать процесс юнит-тестирования и как заменять им компилятор
Видео со встречи - http://getdev.net/Event/roslyn
Roslyn Project - это компилятор, который предоставляет разработчику API для доступа к его внутренним данным. Теперь можно анализировать код, проводить его модификацию и создавать дополнительную функциональность для .NET-языков.
Видеозапись доклада: http://getdev.net/Event/asp-net-mvc-4
Обзор возможностей новой версии платформы ASP.NET MVC 4. Web API, Bundling & Minification, разработка для мобильных устройств, Single-Page Web Applications, а также другие, не столь крупные, нововведения.
5. Три числа терпения
0.1 секунды
После этой границы человек начинает замечать
задержку
1 секунда
На этой границе человек начинает подозревать, что с
системой что-то не так. Теряется чувство прямого
взаимодействия с компьютером
10 секунд
«Время смерти» – человек начинает подозревать, что
система не работает. Перезагружает страницу второй
раз, переключается на другие задачи, идёт делать чай
http://www.useit.com/papers/responsetime.html
6. Изменение показателей
при увеличении времени
ожидания
0.00%
-1.00%
Percent change
-2.00%
-3.00%
-4.00%
-5.00%
50 200 500 1000 2000
Added delay
Queries per visitor Query refinement Revenue per visitor
Any clicks Satisfaction
* Why Web Performance Matters (Richard Campbell)
7. На что тратится время?
Подсистемы Internet Explorer
Marshalling
Networking
Formatting
Collections
Rendering
JavaScript
Building
Layout
HTML
DOM
Block
CSS
50 Performance Tricks to Make Your HTML5 Web Sites Faster (Jason Weber)
8. На что тратится время?
Средние значения для пяти новостных сайтов
HTML Parsing
CSS Parsing
Collections
JavaScript
Marshalling
Native OM
Formatting
BlockBuilding
Layout
Rendering
50 Performance Tricks to Make Your HTML5 Web Sites Faster (Jason Weber)
9. На что тратится время?
Средние значения для нескольких AJAX-сайтов
HTML Parsing
CSS Parsing
Collections
JavaScript
Marshalling
Native OM
Formatting
BlockBuilding
Layout
Rendering
50 Performance Tricks to Make Your HTML5 Web Sites Faster (Jason Weber)
10. Кто же побеждает?
Побеждают не лучшие в чем-то одном
Побеждают те, кто последовательно хороши во
всём:
- объём информации для скачивания;
- количество DOM-элементов;
- количество CSS-правил
- количество изображений;
- количество блоков JavaScript-кода;
- количество строк JavaScript-кода;
- и те, кто всё это правильно использует.
11. Начинается всё с Сети…
Несмотря на рост пропускной способности
каналов, она все равно остаётся ограниченной
Особенно если учесть стремительно растущий
рынок мобильных устройств
Поэтому два основных принципа:
- уменьшаем количество ресурсов
- уменьшаем размер ресурсов
12. Чем меньше нужно скачать –
тем лучше
Минимизируйте количество используемых
ресурсов
Не следует множить сущее без необходимости
Уильям Оккам
15. Сжатие на сервере
Response details Все современные браузеры
HTTP/1.1 200 OK поддерживают приём сжатого
Content-Encoding: содержимого (gzip, deflate)
gzip
Server: Microsoft- Резко уменьшается объем
IIS/7.5 передаваемых по сети данных
Поддерживается всеми
основными серверами
(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 ETag и Last-Modified
HTTP/1.1 304 Not
Modified Регистр в названиях ресурсов
Last-Modified: Mon, 10 icon.png и Icon.png – один
Oct 2011 18:55:14 GMT файл, но два скачивания…
18. Вынесение ресурсов
на несколько доменов
Большинство
getdev.netсовременных браузеров
загружают с одного
домена одновременно 6-
10 ресурсов
Распределив ресурсы по
нескольким доменам –
получим больше
одновременных загрузок
Маленькая прибавка к
img1.getdev.net производительности – на
эти домены не будут
пересылаться cookies при
каждом запросу
50 Performance Tricks to Make Your HTML5 Web Sites Faster (Jason Weber)
19. Использование
Content Delivery Network (CDN)
Может быть использовано для статического
контента (логотипы, картинки), и при некотором
усердии – для динамического
Пользователь скачивает ресурс с сервера, наиболее
близкого к нему
Если это популярная JS-библиотека – есть
шанс, что у пользователя она уже скачана, и её не
придётся качать заново
20. Использование спрайтов
ImageSprite – одна большая
картинка, которая содержит в
себе множество маленьких
И множество CSS-
правил, которые хранят
координаты и размер каждой из
них
Общий размер для скачивания
уменьшается
Нужно скачать только один файл
http://www.google.ru/intl/ru/options/
http://www.google.ru/options/i12.png
http://css-tricks.com/158-css-sprites/
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))
Для скругления углов
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!");
Могут быть использованы для
долговременных расчетов или для фоновых
операций
Не замедляют пользовательский интерфейс
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 akuleshov.tula
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/
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