will-change
Proprietatea în CSS optimizează animații, permițându - know browser - ul care proprietățile și elemente sunt doar pe cale de a fi manipulate, putând crește performanța acestei operațiuni special.
Această proprietate are patru valori:
auto
: se vor aplica optimizări standard ale browserului.scroll-position
: indică faptul că poziția de derulare a elementului va fi animată cândva în viitorul apropiat, astfel încât browserul să se pregătească pentru conținut care nu este vizibil în fereastra de derulare a unui element.contents
: conținutul unui element este de așteptat să se schimbe, astfel încât browserul nu va memora în cache conținutul acestui element.: orice proprietate definită de utilizator, cum ar fi
transform
sauopacity
căreia dorimwill-change
să i se aplice.
Putem informa browserul că o schimbare este pe cale să aibă loc la transform
proprietate astfel:
.element ( will-change: transform; )
Sau dacă dorim să declarăm mai multe valori, putem folosi o listă separată prin virgule, cum ar fi:
.element ( will-change: transform, opacity; )
Cu toate acestea, este important să nu folosiți în exces will-change
proprietatea, deoarece, de fapt, ar putea determina ca pagina să fie mai puțin performantă (rețineți că nu există o all
valoare pentru această proprietate dintr-un motiv întemeiat). Ca urmare, MDN recomandă ca proprietatea să fie folosită ca ultimă soluție pentru problemele de performanță existente, mai degrabă decât pentru cele pe care le anticipați că ar putea apărea. Și, atunci când îl utilizați, este recomandat să comutați will-change
chiar înainte ca un element sau o proprietate să se schimbe și apoi să îl comutați din nou la scurt timp după terminarea procesului.
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
Crom | Firefox | IE | Margine | Safari |
---|---|---|---|---|
36 | 36 | Nu | 79 | 9.1 |
Mobil / Tabletă
Android Chrome | Android Firefox | Android | Safari iOS |
---|---|---|---|
88 | 85 | 81 | 9.3 |