調查瀏覽器的渲染是如何作業的，我注意到在啟用標志的 chrome 開發工具中會觸發更改屬性的paint flashing繪制步驟。transform/opacity
查看這些帶有代碼的螢屏截圖：
示例 1（transform/opacity屬性）
let elem = document.querySelector(".newLayer");
let count = 0;
function anim(){
elem.style.transform = `translate(${count}px,0)`;
/// interchangeable
/// elem.style.opacity = `${count/500}`;
if(count < 500)
requestAnimationFrame(anim);
}
anim();.newLayer{
position:relative;
width:150px;
height:150px;
background-color: red;
}<div class="newLayer">I am a new Layer</div>
示例 2（transform/opacity帶有 的屬性will-change）
let elem = document.querySelector(".newLayer");
let count = 0;
function anim(){
elem.style.transform = `translate(${count}px,0)`;
/// interchangeable
/// elem.style.opacity = `${count/500}`;
if(count < 500)
requestAnimationFrame(anim);
}
anim();.newLayer{
will-change: transform;
position:relative;
width:150px;
height:150px;
background-color: red;
}<div class="newLayer">I am a new Layer</div>
這讓我很困惑，因為我看過
是的，使用了定位屬性，但是看一下繪制操作，一大一小，例如沒有will-change. 這是什么意思（我說的是條紋長度很小的油漆）？
小油漆塊是否與光柵執行緒有關，大的呢？
uj5u.com熱心網友回復：
這兩個例子都沒有說謊。
瀏覽器最大限度地減少了需要合成在一起的層數。只有當它有理由相信會有好處時，它才會創建一個層。
如果您使用 CSS 過渡、CSS 影片或 Web 影片對變換或不透明度進行影片處理，瀏覽器會提前知道元素正在以一種可以通過創建圖層來優化的方式進行影片處理，因此 Chrome 會在影片期間創建一個.
如果您使用 rAF 制作影片，瀏覽器就沒有這種先見之明。will-change存在作為向瀏覽器提示它應該為這個元素創建一個層的一種方式，這取決于不斷變化的屬性。
這些是提示，瀏覽器不能保證創建圖層。還有其他一些瀏覽器創建圖層的情況，例如當另一個元素需要在圖層頂部繪制時，以及在其他一些 CSS（如transform: translateZ(…).
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/428348.html