Процесс, при котором браузер пересчитывает положение и геометрию элементов страницы для повторной визуализации части или всей страницы, называется перекомпоновкой. Поскольку перекомпоновка — это операция блокировки пользователя в браузере, важно понимать, как уменьшить количество перекомпоновок и как различные атрибуты документа (глубина DOM, эффективность CSS, изменения стиля без типа) влияют на количество перекомпоновок. очень нужен разработчикам. Иногда элемент на странице перекомпоновки переформатирует свой родительский элемент (Аннотация: здесь множественное число) и все дочерние элементы.
Существуют различные пользовательские операции и изменения DHTML, которые могут вызвать перекомпоновку. Настройка размера окна браузера, использование JavaScript для расчета стилей ( вычисленные стили ), создание и удаление элементов в DOM, а также изменение класса элементов вызовут перекомпоновку. Стоит отметить, что некоторые операции будут вызывать перекомпоновку несколько раз, что выходит за рамки вашего воображения. Следующая картинка взята из речи Стива Содерса « Еще более быстрые веб-сайты »:
Из приведенной выше таблицы очевидно, что не все стили, управляемые JavaScript, вызывают перекомпоновку во всех браузерах, и даже если они и срабатывают, количество раз неодинаково. В то же время видно, что современные браузеры все лучше и лучше контролируют количество перекомпоновок.
В Google мы измеряем скорость наших страниц и веб-приложений различными способами, и перекомпоновка является ключевым фактором, который мы учитываем при добавлении пользовательского интерфейса. Мы стремимся обеспечить живой, интерактивный и восхитительный пользовательский опыт.
в принципе
Вот несколько принципов уменьшения перекомпоновки:
В видео ниже (Аннотация: цитата с YouTube, просмотр невозможен, перейдите к исходному тексту, чтобы обойти стену) Линдси представляет некоторые методы уменьшения перекомпоновки.
Дальнейшее чтение
Оригинальный перевод: http://www.99css.com/2009/06/minimizing-browser-reflow.html.