Увеличение производительности HTML5 приложений
Библиотеки:
https://github.com/ftlabs/fastclick - убирает задержку 300мс в мобильных браузерах
http://greensock.com/jquery-gsap-plugin - jQuery плагин для увеличения производительности jQuery.animate() По тестам в 20 раз быстрее родного jQuery.animate().
Статьи:
http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
http://css-tricks.com/myth-busting-css-animations-vs-javascript/
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
http://blog.alexmaccaw.com/css-transitions
Сократить количество DOM элементов.
Минимизировать операции с DOM. Особенно на изменение. Вставлять сразу несколько элементов за раз.
Убрать таблицы или установить table-layout:fixed;
Для анимированных элементов использовать position: absolute или fixed;
Анимации с left, right, width, height и прочие вызывающие reflow заменить на аналоги -webkit-translate
Минимизировать reflow (процесс рекурсивного обхода ветви дерева DOM, вычисляющий геометрию элементов и их положение относительно родителя):
Reflow вызывают:
- Изменение css свойства: width, height, padding, margin, display, border-width,border, top, position, font-size, float, text-align, overflow-y, font-weight, overflow, left, font-family, line-height, vertical-align, right, clear, white-space, bottom, min-height.
- Для всех DOM элементов: clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth
- Для Frame, Image: height, width
- ДляRange: getBoundingClientRect(), getClientRects()
- ДляSVGLocatable: computeCTM(), getBBox()
- ДляSVGTextContent: getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString()
- ДляSVGUse: instanceRoot
- Дляwindow: getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode() - Изменение контента, в вставка дом элементов, даже набор текста инпуты.
- Вычисление offsetWidth и offsetHeight (это тот же jQuery.offset(), position(), селектор ":hidden" )
Избегать изменение display (вызовет layout). Например для отображения окна можно использовать transform:
.hide{
-webkit-transform: translateX(-99999px);
}
.show{
-webkit-transform: translateX(0px);
}