为什么过渡框阴影会导致整页重绘？

Question

当我将鼠标悬停在带有动画 box-shadow 的元素上时，我注意到我的页面出现了延迟。使用 Chrome 的 Devtools，当我将鼠标悬停在元素上时，我注意到整个页面正在重新绘制。重绘需要 40 多毫秒，或大约 3 帧。 transition 持续大约半秒，因此在半秒内有明显的延迟。

如何将重绘限制在有框阴影的区域？

这是一个演示：http://jsfiddle.net/8sa41xfL/

html,body{
    height:100%;
}

#test{
    background:red;
    height:100px;
    width:200px;
    transition:box-shadow 0.5s;
}

#test:hover{
    box-shadow:0 0 3px 3px rgba(0,0,0,0.3);
}

<div id=test></div>

transform:translateZ(0) 在我的页面上不起作用，但它在小提琴中起作用。除了transform:translateZ(0)，还有其他解决方法吗？

Answer 1

正如皮埃尔的回答box-shadow 中链接的线程中提到的那样，油漆成本很高。解释为什么它很昂贵需要深入了解渲染的工作方式，而我没有足够的知识来完全解释它。但是这个答案试图解释为什么整个页面被重新绘制以及避免它的各种可能的方法。

---

根据CSS Triggers website：

改变 box-shadow 不会触发任何几何变化，这很好。但由于它是一种视觉属性，它会导致绘画发生。绘画通常是一项超级昂贵的操作，因此您应该小心。

一旦绘制了任何像素，页面将被合成在一起。

---

为什么每次都要重绘整个页面？

以下文章从高层次上解释了绘画的实际工作方式：

• HTML5 Rocks - How Browsers Work - Painting
• The Chromium Project - GPU accelerated rendering in Chrome

根据这些文章，我们可以看到 DOM 树中产生视觉输出的每个节点都被视为一个 RenderObject，每个 RenderObject 直接或间接地是 RenderLayer 的一部分。每当发生更改时，渲染器（或渲染对象）都会使其在屏幕上的矩形（或 RenderLayer）无效并触发重绘。

在这种情况下，似乎整个页面都在重新绘制，因为 #test 元素不保证创建单独的 RenderLayer（基于 Chromium 项目文章中提到的标准），因此成为根的一部分渲染层。因为它是根渲染层的一部分，所以每次需要重新绘制时都会重新绘制整个页面。

后面的sn-p证明了上面的断言是正确的。在这里，我添加了一个#cover 元素（带有定位）来包围#test 元素。现在，由于#cover 元素具有显式定位，它在根层之上创建了一个额外的层，#test 成为该中间层的一部分。现在，我们可以看到box-shadow 转换只重绘了这个中间层，而不是整个页面。

html,
body {
  height: 100%;
}
#cover {
  position: relative;
}
#test {
  background: red;
  height: 100px;
  width: 200px;
  transition: box-shadow 0.5s;
}
#test:hover {
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
}

<div id=cover>
  <div id=test></div>
</div>

---

解决办法是什么？

有多种 CSS 属性可用于解决此问题，但它们似乎都指向同一点，即为#test 元素创建单独的渲染层。

以下是为#test 元素创建单独渲染层的几个可能选项：

• 通过添加显式位置属性 - 这与 Pierre 的回答中描述的选项相同，但 absolute 定位不是唯一的选择。即使relative定位也能解决。

  html,
  body {
    height: 100%;
  }
  #test {
    position: relative;
    background: red;
    height: 100px;
    width: 200px;
    transition: box-shadow 0.5s;
  }
  #test:hover {
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
  }

  <div id=test></div>

• 通过添加透明度（不透明度） - 浏览器似乎甚至将opacity: 0.99 视为添加透明度，这非常有用，因为添加它不会导致任何视觉差异。

  html,
  body {
    height: 100%;
  }
  #test {
    background: red;
    height: 100px;
    width: 200px;
    opacity: 0.99;
    transition: box-shadow 0.5s;
  }
  #test:hover {
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
  }

  <div id=test></div>

• 通过添加一个虚拟 CSS 过滤器 - 我们可以添加一个 filter: blur(0px)，因为它什么都不做。

  html,
  body {
    height: 100%;
  }
  #test {
    background: red;
    height: 100px;
    width: 200px;
    -webkit-filter: blur(0px);
    filter: blur(0px);
    transition: box-shadow 0.5s;
  }
  #test:hover {
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
  }

  <div id=test></div>

Answer 2

CSS 盒子阴影的绘制成本很高。阅读更多关于 SO here。

如果您想避免整页重绘，请在您的元素上使用 position:absolute。这将重新绘制元素周围的区域，而不会影响整个页面。 Fiddle.