Вебинар "Оптимизация производительности мобильных...

Оптимизация производительности

мобильных веб-приложений

О себе:

В IT с 2001 года Мобильной разработкой увлекаюсь с 2009 года Участвовал в разработке:

- более полутора десятков программ подандроид (от 4 до 1 700 000 инсталляций)

- около двух десятков кроссплатформенныхприложений (JavaScript/HTML)

О чем сегодня поговорим:

Оптимизация работы с сетью- 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)

Что такое «веб-приложение»?

Веб-приложение: клиент-серверное приложение,в котором клиентом выступает браузер,а сервером — веб-сервер?

веб-сайты: предоставляют информацию пользователю(http://cnn.com и http://php.net)

веб-приложения: позволяют пользователю совершатькакие либо действия (Google Analytics, Gmail и JSLint)

интерактивность

Проектирование архитектуры:

разделение логики между серверной и клиентской

частью

Оптимизация

Как получить

Готовых решений нет!

Грузим файл

данные загружаются по медленным сотовым сетямВремени на парсинг уходит гораздо больше, чем на десктопе, не только в связис меньшей процессорной производительностью, но и в связи с «оптимизацией».

данные передаются пакетами Размер пакета: ≈1160 байт. В сотовых сетях высокий уровень помех. Как следствие, пакет повреждается и перезапрашивается.

Особенности работысетевых передатчиков

в мобильном устройстве (3G)

Потребляет много энергии (второе место после экрана) 3 основных состояния:

DCH - полная мощностьFACH - половина мощностиIDLE

Переход IDLE→DCH занимает примерно 2 секунды

Стратегия использования сетив мобильных устройствах

Посылаем реже и больше Используем ключевые события

(например, onunload или applicationDidEnterBackground)

A Call for More Energy-Efficient Appshttp://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient

Используем асинхронную загрузку с умом

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

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

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

Reflow — пересчет геометрии объектов Repaint — перерисовка объектов

Очень дорогие операцииReflow может срабатывать несколькораз в ходе выполнения скрипта

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

ElementclientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(),GetClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth,outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(),scrollIntoViewIfNeeded(), scrollLeft, scrollTop, ScrollWidth

windowgetComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY,webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

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

Компоновка

Система "грязных битов":

Dirty

Children are dirty

Глобальная (синхронная): Глобальное изменение стиля, который используется во всех объектах отображения,

например, изменение шрифта

Изменение размеров экрана

Инкрементная компоновка (асинхронная): Остальное

1. Родительский объект отображения определяет собственную ширину.

position — выносит в один проход, float — выносит в несколько проходов.

2. Родительский объект отображения обрабатывает дочерние элементы:

определяет положение дочернего объекта отображения (задает его координаты x и y);

вызывает компоновку дочернего элемента (если он помечен как "грязный",

если выполняется глобальная перекомпоновка и т. д.);

в результате чего рассчитывается его высота.

3. На основе суммарной высоты дочерних элементов, а также высоты полей и отступов

рассчитывается высота родительского объекта отображения:

она требуется его собственному родительскому объекту.

4. Биты больше не помечаются как "грязные".

Процесс компоновки

transform: translateZ(0) transform: translate3d(0, 0, 0) CSS Transitions + CSS Transform/opacity CSS Animations + CSS Transform/opacity JS + CSS Transform3D JS + opacity (если слой на GPU)

GPU

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

Проблемы

Анимируем элементы с position: absolute|fixed

Используем GPU-анимации

Заранее переносим анимируемые слои на GPU

Стараемся использовать CSS Transitions/Animations

Стратегии для правильной анимации

excess DOM custom events DOM manipulation

DOM

Время манипуляции с DOMзависит от его объема

3 elements = 0.003 ms

1000 elements = 0.03 ms

10000 elements = 0.36 ms

+ JQuery = 2.46 ms

В JavaScript нет ручного управления памятью

Этим занимается GC

GC работает в основном потоке

Требуется несколько проходов GC для очистки памяти

GC в JavaScript

Object Pool

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.htmlhttp://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-apphttp://aerotwist.com/blog/making-a-60fps-mobile-apphttp://stackoverflow.com/questions/8599227/javascript-disable-second-onclickhttps://github.com/dave1010/jquery-fast-click/blob/master/jQuery.fastClick.jshttp://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/http://cubiq.org/remove-onclick-delay-on-webkit-for-iphonehttps://github.com/mozilla/pointer.js/blob/master/pointer.jshttps://developers.google.com/mobile/articles/fast_buttons?hl=ru-RUWindows Touch Guidance.pdfhttp://jsfiddle.net/2mKmW/http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/http://android.amberfog.com/?p=296http://cubiq.org/infiniwallhttp://w2ui.com/web/blog/7/JavaScript-Grid-with-One-Million-Recordshttp://love-media.net/articles/ipad-animationhttp://www.tricedesigns.com/2012/01/17/mobile-web-phonegap-html-dev-tips/http://developer.android.com/guide/webapps/targeting.htmlhttps://developers.google.com/mobile/articles/webapp_fixed_ui

Спасибо за внимание!Буду рад ответить на Ваши вопросы.

y.luchaninov@mobidev.bizmobidev.biz