Автор: Линдси Саймон, UX-разработчик
Рекомендуемые знания: базовый HTML, базовый JavaScript, практическое знание CSS.
Перекомпоновка — это название процесса веб-браузера, предназначенного для пересчета положения и геометрии элементов в документе с целью повторной визуализации части или всего документа. Поскольку перекомпоновка — это операция блокировки пользователя в браузере, разработчикам полезно понять, как сократить время перекомпоновки, а также понять влияние различных свойств документа (глубина DOM, эффективность правил CSS, различные типы изменений стиля) на перекомпоновку. время. Иногда для перекомпоновки одного элемента в документе может потребоваться перекомпоновка его родительских элементов, а также любых элементов, следующих за ним.
Существует множество действий пользователя и возможных изменений DHTML, которые могут вызвать перекомпоновку. Изменение размера окна браузера, использование методов JavaScript, включающих вычисляемые стили , добавление или удаление элементов из DOM, а также изменение классов элементов — это лишь некоторые из вещей, которые могут вызвать перекомпоновку. Также стоит отметить, что некоторые операции могут потребовать больше времени на перекомпоновку, чем вы могли себе представить — рассмотрите следующую диаграмму из выступления Стива Соудерса « Еще более быстрые веб-сайты »:
Из приведенной выше таблицы видно, что не все изменения стиля в JavaScript вызывают перекомпоновку во всех браузерах, и что время, необходимое для перекомпоновки, различается. Также очевидно, что современные браузеры становятся лучше во время перекомпоновки.
В Google мы тестируем скорость наших веб-страниц и приложений различными способами, и перекомпоновка является ключевым фактором, который мы учитываем при добавлении функций в наши пользовательские интерфейсы. Мы стремимся обеспечить живой, интерактивный и восхитительный пользовательский опыт.
Методические рекомендации
Вот несколько простых рекомендаций, которые помогут свести к минимуму перекомпоновку на веб-страницах:
- Уменьшите ненужную глубину DOM. Изменения на одном уровне в дереве DOM могут вызвать изменения на всех уровнях дерева — вплоть до корня и вплоть до дочерних элементов измененного узла. Это приводит к тому, что на перекомпоновку тратится больше времени.
- Сведите к минимуму правила CSS и удалите неиспользуемые правила CSS.
- Если вы вносите сложные изменения в рендеринг, например анимацию, делайте это вне потока. Для этого используйте абсолютную позицию или фиксированную позицию.
- Избегайте ненужных сложных селекторов CSS, в частности селекторов-потомков, которые требуют больше мощности процессора для сопоставления селекторов.
В этом видео Линдси объясняет несколько простых способов минимизировать перекомпоновку страниц:
Дополнительные ресурсы
- Перерисовка и перекомпоновка Opera
- Демонстрации отладки и перекомпоновки Firefox от Сатоши Уэямы:
- Николь Салливан о перекомпоновке и перерисовке
Обратная связь
Была ли эта страница полезной?