Html 浏览器重绘与性能

我有一个单页应用程序，它使用了很多CSS3阴影。该应用程序由8个代表页面的面板组成。一次仅显示一个面板，而隐藏其他7个面板（样式显示：无；）。用户单击菜单以从一个面板移动到另一个面板

谷歌的速度追踪显示，大约75%的资源用于重新绘制。我的问题是：浏览器重绘会影响A）页面的可见元素还是B）每个元素，无论是否可见？

如果是B，我就无能为力了。如果是A，那么我可以清除隐藏面板的html，并且只有可见面板有内部DOM元素，目的是减少重新绘制时间

---

让我知道。

隐藏元素不应重新绘制。您正在设置面板的动画吗？为有阴影的元素设置动画（特别是平移）确实会增加重新绘制的工作量。此外，阴影越大，重新绘制所需的时间就越长。我没有做过精确的测量，只是根据个人的经验；“jank”很快变得非常明显，至少在旧机器中是这样。也许可以尝试使用背景、数据uri图像。

隐藏元素不应重新绘制。您正在设置面板的动画吗？为有阴影的元素设置动画（特别是平移）确实会增加重新绘制的工作量。此外，阴影越大，重新绘制所需的时间就越长。我没有做过精确的测量，只是根据个人的经验；“jank”很快变得非常明显，至少在旧机器中是这样。也许可以尝试使用背景、数据uri图像。

回答性能问题的方法是执行基准测试。如果您想知道显示：none元素需要多少性能开销，请执行以下操作：

测试1：加载包含所有display:none元素的页面，测量重绘速度

测试2：修改页面，以便显示：无元素被完全删除，加载此页面，并测量重绘速度

---

这两个测试之间的区别在于display:none元素的重新绘制开销。希望它是最小的。

回答性能问题的方法是执行基准测试。如果您想知道显示：none元素需要多少性能开销，请执行以下操作：

测试1：加载包含所有display:none元素的页面，测量重绘速度

测试2：修改页面，以便显示：无元素被完全删除，加载此页面，并测量重绘速度

---

这两个测试之间的区别在于display:none元素的重新绘制开销。希望它是最小的。

这取决于浏览器的实现。但是，不需要渲染任何隐藏内容，因此智能浏览器设计不应该在这些内容上花费太多时间。作为一个实验，试着去掉所有的

display:none

属性，看看它是如何影响性能的。@Barmar：如果我把所有的内容都放在display:none上，那么就不会触发任何UI事件，所以当然不会重新绘制。但这并不意味着隐藏元素不会重新绘制。这取决于浏览器的实现。但是，不需要渲染任何隐藏内容，因此智能浏览器设计不应该在这些内容上花费太多时间。作为一个实验，试着去掉所有的

display:none

属性，看看它是如何影响性能的。@Barmar：如果我把所有的内容都放在display:none上，那么就不会触发任何UI事件，所以当然不会重新绘制。但这并不意味着隐藏元素不会重新绘制。