z-index, как это влияет на производительность?

Question

Как значение z-index css влияет на производительность?

Если у меня есть несколько изображений на странице, имеет ли значение, если я использую высокие значения z-index, например, 10000?

ДляНапример, страница содержит 15 изображений с z-индексами в диапазоне от 500 до 10 000, и если изображения являются подвижными (перетаскиваемые jQuery), влияет ли это на производительность, если используются высокие значения, если страница перерисовывается так часто?

Answer 1

Количество слоев имеет значение, но фактическое значение z-index не имеет значения. При отображении страницы браузер просто сортирует все абсолютно позиционированные элементы по их z-индексу (по возрастанию) и рисует их в этом порядке.

EDIT: Кроме того, снижение производительности при сортировке происходит только тогда, когда вы меняете z-индекс слоев. Если z-индексы меняются не часто, снижение производительности, вероятно, не будет заметно вообще. Даже если вы сильно меняете z-индексы, сортировка списка из 15 элементов выполняется практически мгновенно.

Answer 2

Хотя это и не прямой ответ на вопрос о производительности, важно еще учесть, когда речь идет об использовании очень высоких чисел z-index:

2147483647 - это максимальный z-индекс в большинстве веб-браузеров, поскольку это максимально возможное 32-битное целочисленное значение. Любое число выше чем 2147483647 автоматически вернется к 2147483647.

С https://wordpress.org/support/topic/css-reference-to-the-tinymce-absolute-position-handle

Answer 3

Да.В какой степени трудно ответить, не видя всей страницы, однако некоторые проблемы с производительностью находятся в игре.С манипулированием индексами Z и с jQuery и другими библиотеками, которые динамически выбирают и управляют DOM, вы в основном перестраиваете компоновку фрагментов HTML.Важно отметить, что браузер понятия не имеет, что означает MODAL.Любой запрос на изменение макета, по сути, просит браузер пересчитать DOM.Это ваш успех производительности.