1. Оптимизация производительности
мобильных веб-приложений

2. О себе:
 В IT с 2001 года
 Мобильной разработкой увлекаюсь с 2009 года
 Участвовал в разработке:
- более полутора десятков программ под
андроид (от 4 до 1 700 000 инсталляций)
- около двух десятков кроссплатформенных
приложений (JavaScript/HTML)

3. О чем сегодня поговорим:
Оптимизация работы с сетью
- file loading (JS, CSS), data API optimization
Оптимизация визуальной части
- render tree optimization (reflow, repaint)
Оптимизация невидимых механизмов браузера
- DOM optimization (excess DOM, custom events, DOM manipulation)
Оптимизация кода
- JS Optimization (GC, Object Pools)

4. Что такое «веб-приложение»?
Веб-приложение: клиент-серверное приложение,
в котором клиентом выступает браузер,
а сервером — веб-сервер?
 веб-сайты: предоставляют информацию пользователю
(http://cnn.com и http://php.net)
 веб-приложения: позволяют пользователю совершать
какие либо действия (Google Analytics, Gmail и JSLint)

5. интерактивность
Проектирование
архитектуры:
разделение логики между
серверной и клиентской
частью
Оптимизация
Как получить
Готовых решений нет!

6. Грузим файл
 данные загружаются по медленным сотовым сетям
Времени на парсинг уходит гораздо больше, чем на десктопе, не только в связи
с меньшей процессорной производительностью, но и в связи с «оптимизацией».
 данные передаются пакетами
Размер пакета: ≈1160 байт. В сотовых сетях высокий уровень помех.
Как следствие, пакет повреждается и перезапрашивается.

7. Особенности работы
сетевых передатчиков
в мобильном устройстве (3G)
 Потребляет много энергии (второе место после экрана)
 3 основных состояния:
DCH - полная мощность
FACH - половина мощности
IDLE
 Переход IDLE→DCH занимает примерно 2 секунды

8. Стратегия использования сети
в мобильных устройствах
 Посылаем реже и больше
 Используем ключевые события
(например, onunload или applicationDidEnterBackground)
 A Call for More Energy-Efficient Apps
http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient
 Используем асинхронную загрузку с умом

10. Основные компоненты браузера

11. Схема работыWebKit

12. Схема работы модуля отображения

13.  Reflow — пересчёт геометрии объектов
 Repaint — перерисовка объектов
Очень дорогие операции
Reflow может срабатывать несколько
раз в ходе выполнения скрипта

14. Repaint:
 visibility
 colour
 outline and other visual style properties
Reflow:
 insert, remove or update an element in the DOM
 modify content on the page, e.g. text in an input box
 move a DOM element
 animate a DOM element
 take measurements of an element such as offsetHeight or getComputedStyle
 change a CSS style
 change the className of an element
 add or remove a stylesheet
 resize the window
 scroll

15. Element
clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(),
GetClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth,
outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(),
scrollIntoViewIfNeeded(), scrollLeft, scrollTop, ScrollWidth
window
getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY,
webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

16. Что происходит
в браузере

17. Компоновка
Система "грязных битов":
 Dirty
 Children are dirty
Глобальная (синхронная):
 Глобальное изменение стиля, который используется во всех объектах отображения,
например, изменение шрифта
 Изменение размеров экрана
Инкрементная компоновка (асинхронная):
 Остальное

18. 1. Родительский объект отображения определяет собственную ширину.
position — выносит в один проход, float — выносит в несколько проходов.
2. Родительский объект отображения обрабатывает дочерние элементы:
определяет положение дочернего объекта отображения (задает его координаты x и y);
вызывает компоновку дочернего элемента (если он помечен как "грязный",
если выполняется глобальная перекомпоновка и т. д.);
в результате чего рассчитывается его высота.
3. На основе суммарной высоты дочерних элементов, а также высоты полей и отступов
рассчитывается высота родительского объекта отображения:
она требуется его собственному родительскому объекту.
4. Биты больше не помечаются как "грязные".
Процесс компоновки

20.  transform: translateZ(0)
 transform: translate3d(0, 0, 0)
 CSSTransitions + CSSTransform/opacity
 CSS Animations + CSSTransform/opacity
 JS + CSSTransform3D
 JS + opacity (если слой на GPU)
GPU

21.  На CPU оперируем DOM-объектами, на GPU — текстурами
 Переход CPU→GPU занимает время
 Переход на GPU - всегда отдельный repaint
 Увеличивается потребление памяти
 Можно «случайно» перенести на GPU ненужные элементы
 * { transform: translateZ(0) } - зло!
Проблемы

22.  Анимируем элементы с position: absolute|fixed
 Используем GPU-анимации
 Заранее переносим анимируемые слои на GPU
 Стараемся использовать CSSTransitions/Animations
Стратегии для правильной анимации

23.  excess DOM
 custom events
 DOM manipulation
DOM

24. Время манипуляции с DOM
зависит от его объема
3 elements = 0.003 ms
1000 elements = 0.03 ms
10000 elements = 0.36 ms
+ JQuery = 2.46 ms

26.  В JavaScript нет ручного управления памятью
 Этим занимается GC
 GC работает в основном потоке
 Требуется несколько проходов GC для очистки памяти
GC в JavaScript

28. Object Pool

29. http://www.ozon.ru/context/detail/id/18421547/
http://www.ibm.com/developerworks/ru/library/wa-websiteapp/
http://www.html5rocks.com/ru/tutorials/internals/howbrowserswork/
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
http://habrahabr.ru/post/124203/
http://web-standards.ru/articles/front-end-performance/
http://www.igvita.com/2013/01/15/faster-websites-crash-course-on-web-
performance/
http://kellegous.com/j/2013/01/26/layout-performance/
http://cheeaun.com/blog/2012/03/how-i-built-hacker-news-mobile-web-app
http://aerotwist.com/blog/making-a-60fps-mobile-app
http://stackoverflow.com/questions/8599227/javascript-disable-second-
onclickhttps://github.com/dave1010/jquery-fast-
click/blob/master/jQuery.fastClick.js
http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/
http://cubiq.org/remove-onclick-delay-on-webkit-for-iphone
https://github.com/mozilla/pointer.js/blob/master/pointer.js
https://developers.google.com/mobile/articles/fast_buttons?hl=ru-RU
Windows Touch Guidance.pdf
http://jsfiddle.net/2mKmW/
http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
http://android.amberfog.com/?p=296
http://cubiq.org/infiniwall
http://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Records
http://love-media.net/articles/ipad-animation
http://www.tricedesigns.com/2012/01/17/mobile-web-phonegap-html-dev-tips/
http://developer.android.com/guide/webapps/targeting.html
https://developers.google.com/mobile/articles/webapp_fixed_ui

30. Спасибо за внимание!
Буду рад ответить на Ваши вопросы.
y.luchaninov@mobidev.biz
mobidev.biz