3.0 KiB
| title | localeTitle |
|---|---|
| Will Change | Изменится |
Изменится
Свойство will-change позволяет вам сообщить браузеру, какие манипуляции будут происходить с элементом, чтобы его оптимизировать.
.container {
will-change: transform;
}
Вышеуказанное свойство будет изменено для класса .container , в этом случае преобразование элемента может или не может произойти.
Однако, используя это свойство, есть интересный побочный эффект.
Если мы применим к элементу transform: translateZ (0) , элемент создаст новый контекст оверлея, а в некоторых браузерах он также добавит слой к собственному потоку рендеринга, что даст нам повышение производительности, которое мы достигаем ,
Следовательно, использование will-change: transform , браузер создаст новый оверлейный контекст, независимо от того, применяем ли мы преобразование к элементу или нет.
Главное отметить, что will-change создаст новый оверлейный контекст, только если свойство также создаст новый оверлейный контекст. Поскольку свойство transform создает новый оверлейный контекст, will-change: transform также создаст новый оверлейный контекст.
Если вы используете will-change: display , то новый контекст оверлея не будет создан, так как никакое значение свойства display не создает новый оверлейный контекст.
Давайте посмотрим на другой пример: opacity . Непрозрачность со значением 1 не создает новый оверлейный контекст, но с более низким значением (например, 0,9). Хотя будет изменяться: непрозрачность в любом случае создаст новый оверлейный контекст.