О своем опыте системного подхода к производительности рендеринга DOM
С октября 2009 года я занимаюсь разработкой приложения для поиска и прослушивания музыки. Я стремлюсь организовать возможность быстрого взаимодействия пользователя с интерфейсом, и в качестве одного из средств ускорения взаимодействия использую различные способы для быстрой отрисовки страниц. Предлагаю ознакомиться со способами, реализованными мной в приложении на системном уровне: Использование CSS и переключение классов вместо перестроения DOM дерева Повсемнестное кеширование выборок элементов ($('div.active_part span.highlighter')), атомарные операции по изменению (вместо всеобщей перерисовки, вместо переделывания больших участков DOM дерева) Минимизации чтений DOM во время записи изменений состояний Кеширование размеров и расположения элементов (это спасает от излишнего вычисления при считывании этих значений при наличии других изменений: чтение во время изменения множества частей дерева крайне негативно сказывается на производительности) Аккуратное, не затягивающееся накопление изменений, необходимых произвести в DOM Прикрепление частей изменяющихся коллекций единовременно (когда, например, в середину списка вставляется 3 новых элемента; createDocumentFragment) в конкретное место (after, before) вместо открепления всей коллекции от DOM и повторного прикрепления (и вместо того, чтобы перерисовывать весь список) Прогрессивный асинхронный рендеринг: картина прорисовывается сразу с небольшим количеством деталей, затем деталей появляется всё больше Клонирование нодов (как часть шаблонизации) Кеширование и использование кеша результатов парсинга DOM шаблонов Читать дальше →
