WebCamp: Developer Day: Оптимизации сайтов/приложений для...

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

Что общего у мобильных сайтов и приложений (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● сообщения и прозрачная связанность рулят