Вебинар "Оптимизация производительности мобильных...
TRANSCRIPT
Оптимизация производительности
мобильных веб-приложений
О себе:
В 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
Спасибо за внимание!Буду рад ответить на Ваши вопросы.