Список оптимизаций рендеринга DOM, реализуемых на уровне Javascript фреймворка
13 мин
С октября 2009 года я занимаюсь разработкой приложения для поиска и прослушивания музыки. Я стремлюсь организовать возможность быстрого взаимодействия пользователя с интерфейсом, и в качестве одного из средств ускорения взаимодействия использую различные способы для быстрой отрисовки страниц.
Предлагаю ознакомиться со способами, реализованными мной в приложении на системном уровне:
изображения из части с заголовком «Прикрепление частей изменяющихся коллекций единовременно...»
Предлагаю ознакомиться со способами, реализованными мной в приложении на системном уровне:
- Использование CSS и переключение классов вместо перестроения DOM дерева
- Повсемнестное кеширование выборок элементов ($('div.active_part span.highlighter')), атомарные операции по изменению (вместо всеобщей перерисовки, вместо переделывания больших участков DOM дерева)
- Минимизации чтений DOM во время записи изменений состояний
- Кеширование размеров и расположения элементов (это спасает от излишнего вычисления при считывании этих значений при наличии других изменений: чтение во время изменения множества частей дерева крайне негативно сказывается на производительности)
- Аккуратное, не затягивающееся накопление изменений, необходимых произвести в DOM
- Прикрепление частей изменяющихся коллекций единовременно (когда, например, в середину списка вставляется 3 новых элемента; createDocumentFragment) в конкретное место (after, before) вместо открепления всей коллекции от DOM и повторного прикрепления (и вместо того, чтобы перерисовывать весь список)
- Прогрессивный асинхронный рендеринг: картина прорисовывается сразу с небольшим количеством деталей, затем деталей появляется всё больше
- Клонирование нодов (как часть шаблонизации)
- Кеширование и использование кеша результатов парсинга DOM шаблонов
изображения из части с заголовком «Прикрепление частей изменяющихся коллекций единовременно...»
Внутри у среднего банкомата лежит от 1 до 3 миллионов рублей. Они разложены по 4 кассетам, в каждой из которых – купюры своего номинала. Замена кассет похожа на замену картриджей в принтере: модуль вынимается (и неважно, сколько там осталось денег — инкассаторы этого даже не знают по правилам безопасности), а на его место вставляется другой модуль точно по стрелке, указывающей, какой стороной и как это делать. 
— 1.png
— 2.gif
— dot.png
— phoney.gif
— tw.gif
Сегодня, при разработке приложений в интернете, вопрос клиентской оптимизации встает все чаще. Если раньше, страница отправленная клиенту содержала только информацию, то сегодня очень часто такая страница содержит много JavaScript-кода. Для достижения наилучшей производительности и снижения нагрузки на сервер применяются правила клиентской оптимизации.