Вызывает ли аккордеон перерисовку всей страницы?

Question

Я просматриваю дизайн для мобильного сайта с аккордеонами сверху и многими элементами ниже, когда аккордеон открывается, все элементы нажимаются вниз. Мне интересно, если действие открытия аккордеона заставит мобильный браузер перерисовать всю страницу и замедлить ее. Это правильно? есть ли лучший способ взглянуть на это?

Answer 1

Мне интересно, если действие открытия аккордеона заставит мобильный браузер перерисовать всю страницу и замедлить ее. Правильно ли это ?

Трудно сказать: ответ зависит от:

1. браузер вы используете, и алгоритм рендеринга он реализует
2. фактическую структуру вашей страницы

Но да , в соответствии со следующими ресурсами, открытие аккордеона в верхней части страницы, скорее всего, приведет к переплавке (*), который будет содержать остальную часть страницы.

(*) обратите внимание на статьи для объяснения относительно того, что перекрашивать и оплавления означает

Александр Скутин, What Every Frontend Developer Should Know About Webpage Rendering (2014, 26 мая)

Браузеры прилагали чтобы ограничить перекраску/оплату в область , которая охватывает только измененные элементы. Например, изменение размера в элемента с абсолютной/фиксированной позицией влияет только на сам элемент и его потомки, тогда как аналогичное изменение в статичном позиционном элементе триггера инициирует оплату для всех последующих элементов.

(жирный шрифт мой)

Итак, в соответствии с этим, поставив аккордеон в верхней части страницы будет влиять также всех последующие элементы.

Эта другая старше статья, кажется, усиливают ту же гипотезу:

Nicole Sullivan, Reflows & Repaints: CSS Performance making your JavaScript slow? (2009, 27 марта)

оплавления элемента вызывает последующее оплавление всех дочерних и предка элементов , а также любые элементы, следующие за ним в DOM.

(полужирный мой)

---

есть лучший способ смотреть на это?

Я понимаю, что вы можете управлять своим дизайном с самого начала в правильном направлении, но я бы предложил вам не беспокоиться об этом преждевременно.

Возможно, вам захочется быстро реализовать прототип, чтобы убедиться, что характеристики приемлемы для устройств, которые вы хотите поддерживать, и в качестве последнего ресурса вы все равно можете отключить анимацию на основе пользовательского агента для устройств, которые их не поддерживают.

Вы можете хотите, чтобы ваши разработчики взглянуть на эту другую статью, которая имеет некоторые твердые принципы, чтобы ограничить браузер перекомпоновки:

Lindsey Саймон, Minimizing browser reflow

1. Уменьшение ненужного глубины DOM. Изменения на одном уровне в дереве DOM могут приводить к изменениям на каждом уровне дерева - вплоть до корня , а также вплоть до детей модифицированного узла. Это приводит к увеличению времени, затрачиваемого на оплату.
2. Минимизировать правила CSS и удалить неиспользуемые правила CSS.
3. Если вы выполняете сложные изменения рендеринга, такие как анимации, делайте это из потока. Используйте положение - абсолютное или фиксированное положение для выполнения .
4. Избегайте ненужных сложных селекторов CSS - селекторов-потомков, в частности, которые требуют больше мощности процессора для выбора селектора.