我有一个使用大量 CSS3 阴影的单页应用程序。该应用程序由代表页面的 8 个面板组成。一次只能看到 1 个面板，而其他 7 个面板是隐藏的（样式 display:none;）。用户单击菜单以在面板之间移动。
谷歌的 Speed Tracer 大约 75% 的资源用于重绘。我的问题是：浏览器重绘是否会影响 A）仅页面的可见元素或 B）每个元素，无论是否可见？
如果是B，那么我无能为力。如果它是 A，那么我可以清除隐藏面板的 html，并只为可见面板设置内部 DOM 元素，以减少重绘时间。
让我知道。
回答性能问题的方法是执行基准测试。如果您想知道 display:none 元素有多少性能开销，请执行以下操作：
测试 1：加载所有 display:none 元素的页面，测量重绘速度。
测试 2：修改页面，使 display:none 元素被完全删除，加载此页面，并测量重绘速度。
这两个测试之间的区别在于 display:none 元素的重绘开销。希望它将是最小的。
隐藏元素不应重绘。你在为面板制作动画吗？动画（尤其是翻译）具有阴影的元素确实会增加重绘的负担。此外，阴影越大，重绘所需的时间就越长。我没有做过精确的测量，只是根据个人经验得出的；'jank' 很快就变得非常明显，至少在旧机器上是这样。也许尝试使用背景数据 uri 图像。