оптимизация page reflow
Reflow — это процесс пересчёта положения разных элементов на странице, которым браузер занимается как при первоначальной загрузке урла, так и потом при некоторых изменениях содержимого яваскриптом. Можно считать, что он управляется CSS-стилями: именно они отвечают за отображение данных. Даже если вебмастер не подключил в html ни одного стиля, браузер использует встроенные в него описания внешнего вида по умолчанию.
CSS штука сложная, поэтому reflow работает не очень шустро. Считается, что он влияет на воспринимаемую скорость отображения страницы не менее, чем тормозной DOM access яваскрипта. А недавние измерения для эксплорера показали, что влияние намного больше, даже если речь идёт о веб-приложениях.
К несчастью, избежать reflow довольно трудно, практически любое изменение документа: добавление класса, создание/удаление элемента, изменение текста — всё будет вызывать этот пересчёт. Однако мы можем пытаться уменьшить их количество, например, производя необходимые действия в элементах, ещё не включенных в DOM. Или зайти с другой стороны — стремиться, чтобы reflow срабатывал только локально на абсолютно позиционированных элементах, не приводя к пересчёту всего документа.
Зато нам везёт, что производители браузеров тоже стремятся уменьшить такие потери времени. Например, опера не будет пересчитывать страницу на каждый чих, а только когда наберётся критическое количество измерений, или пройдёт критическое время, или же закончится начавшая всё это функция. Наверняка аналогичным образом действуют и другие браузеры, но ссылок на это у меня сейчас нет, буду раз, если поделитесь.
Самое неприятное в reflow — у нас нет инструментов для его профилирования. С отладкой вроде бы разобрались: developer tools теперь есть во всех крупных браузерах, а вот как следует измерить время отрисовки возможности нет. Мы даже спрашивали архитектора IE Алексея Могилевского, но он не смог ничего посоветовать.
Но теперь кое-что может измениться. Satoshi Ueyama написал к firefox патч, который логгирует все пересчёты по reflow, и эти данные потом можно даже визуализировать. Будем надеяться, что через какое-то время этот патч вырастет в сборку, позволяющую удобно находить узкие места в отрисовке страниц. Конечно, неизвестно, когда это произойдёт, и подтянутся ли производители других браузеров, но я смотрю в будущее с оптимизмом : )
А ещё хочется верить, что тогда хотя бы на крупных сайтах прекратится навешивание оформления яваскриптом, вызывающее при загрузке повторные пересчёты вроде того, что происходит на главной странице firefox. (Говорят, что здесь это из-за скроллбара, но в качестве иллюстрации тоже хорошо подходит.)