Оптимизации сайтов\приложений для мобильных платформ
Что общего у мобильных сайтов и приложений (phonegap)?
● плохой интернет ● маленький экран● HTML / JS
HTML, который не смог
● заверни в div с position : relative;● backface-visibility : hidden;● translateZ(0);● rotateZ(360deg);● -webkit-font-smoothing: antialiased;● before/after-элемент у placeholder о_О
HTML is AWESOME
Короткая справка
● repaint – перерисовка области экрана, обычно обходится достаточно дешево
● reflow – пересчет стилей отображения, затрагивает не только изменяемый элемент, но и дерево родителей
Тривиальные методы борьбы с reflow
● Не усложнять DOM● Использовать классы вместо inline-стилей● Не анимировать элементы без
position:absolute или position:fixed● Use detached DOM elements, Luke!
(measuring containers, etc.)● no huge tables
Не самые тривиальные методы борьбы с 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;";
Немного о RAD.js;
● backbone хорош● достаточно хорош● мы сейчас не об enterprise● сообщения и прозрачная связанность рулят