CSS中的Will-Crange屬性向瀏覽器發(fā)出了元素即將更改的信號，從而使其可以優(yōu)化渲染。 1。它告知瀏覽器屬性將會更改的瀏覽器，例如變換，不透明度，滾動位置或內(nèi)容。 2。然後，瀏覽器可以將元素提升到其自己的層，預先分配資源，並避免昂貴的重新挑選。 3。選擇性地使用它（例如，懸停在懸停）之前（例如，然後將其刪除），以避免不必要的資源消耗。 4。與Translatez（0）或不透明度（0.99）等較舊的黑客不同，Will-Change提供了一種更有意識，更有效的方法來準備視覺變化，而不會不必要地強迫圖層。

CSS中的will-change屬性是瀏覽器預期會更改元素的暗示，這可以通過允許瀏覽器在實際更改發(fā)生之前優(yōu)化其處理渲染和合成方式來幫助提高性能。

will-change實際做什麼？

瀏覽器非常擅長優(yōu)化渲染。但是，有時他們不提前知道會發(fā)生什麼變化，尤其是當這些更改是由用戶互動或JavaScript觸發(fā)的時。那就是will-change地方。

通過使用will-change ，您可以告訴瀏覽器：“嘿，我將要以某種方式進行動畫或修改此元素 - 準備好?！弊鳛榛貞瑸g覽器可能會採取諸如將元素推廣到自己的層，預先分配資源或避免某些優(yōu)化的步驟，這些優(yōu)化以後會撤消會很昂貴。

共同值包括：

• will-change: transform;
• will-change: opacity;
• will-change: scroll-position;
• will-change: contents;

每個人都告訴瀏覽器即將發(fā)生什麼樣的變化，因此可以相應地準備。

您什麼時候應該使用will-change ？

當您知道某些事情很快會發(fā)生變化時，這是最有用的，例如，在懸停效果，過渡或動畫期間。常見用例可能是：

 .button：懸停{
  威爾改變：變換；
}

這有助於瀏覽器為基於轉(zhuǎn)換的動畫做準備（例如懸停在懸停的縮放）。

但是，不要過度使用它。如果您將will-change應用於太多元素或很少發(fā)生變化的屬性，則最終可能會傷害性能而不是幫助它。創(chuàng)建層和準備更改的準備使用內(nèi)存和處理能力，因此最好保留為真正受益於優(yōu)化的元素。

一些一般指南：

• 僅當您在動畫中註意到Jank或滯後時才使用它。
• 在更改發(fā)生之前（例如，懸停或聚焦）之前應用它，而不是為時過早。
• 如果元素不會很快再次更改，則將其刪除。

它與translateZ(0)或opacity: 0.99 ？

您可能已經(jīng)看到人們使用諸如transform: translateZ(0)或opacity: 0.99迫使硬件加速。這些工作是通過觸發(fā)新的合成層的創(chuàng)建，類似於will-change可能會做的事情，但是有一個關(guān)鍵區(qū)別：這些黑客是鈍器。

它們迫使層創(chuàng)建不管是否需要，並且由於太多的層而導致過多的內(nèi)存使用情況或呈現(xiàn)較慢。另一方面， will-change給瀏覽器發(fā)出了更有意的信號，使其可以做出更明智的決定。

儘管如此，這兩種方法都是為了為即將進行的視覺變化準備瀏覽器。不同之處在於， will-change是專門為此目的而設(shè)計的，並且隨著瀏覽器的發(fā)展而更具未來的方式。

明智地使用的是， will-change可以不用付出太大的努力來平滑動畫和互動。但是，像任何性能工具一樣，當選擇性地和周到地應用時，它最有效。

以上是CSS Will-Change屬性如何幫助績效？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！