Оптимизации сайтов/приложений для мобильных платформ Игорь Шалимов О расстановке приоритетов в реализации архитектуры RAD.js; о оптимизации DOM и работы с ним; о ситуациях когда уже оптимизировано все: узкие места repaint\reflow и другие дорогие мелочи.

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

2. Что общего у мобильных сайтов и
приложений (phonegap)?
● плохой интернет
● маленький экран
● HTML / JS

3. HTML, который не смог
● заверни в div с position : relative;
● backface-visibility : hidden;
● translateZ(0);
● rotateZ(360deg);
● -webkit-font-smoothing: antialiased;
● before/after-элемент у placeholder о_О

4. HTML is AWESOME

5. Короткая справка
● repaint – перерисовка области экрана,
обычно обходится достаточно дешево
● reflow – пересчет стилей отображения,
затрагивает не только изменяемый элемент,
но и дерево родителей

6. Тривиальные методы борьбы с
reflow
● Не усложнять DOM
● Использовать классы вместо inline-стилей
● Не анимировать элементы без
position:absolute или position:fixed
● Use detached DOM elements, Luke!
(measuring containers, etc.)
● no huge tables

7. Не самые тривиальные методы
борьбы с reflow
● Не злоупотреблять offsetHeight/offsetWidth,
offsetTop/offsetLeft
● Минимизировать количество применяемых
стилей
var left = 10,
top = 10;
el.style.left = left + "px";
el.style.top = top + "px";
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

8. Немного о RAD.js;
● backbone хорош
● достаточно хорош
● мы сейчас не об enterprise
● сообщения и прозрачная связанность рулят