html - 浏览器重绘和性能

Question

我有一个使用大量 CSS3 阴影的单页应用程序。该应用程序由代表页面的 8 个面板组成。一次只有 1 个面板可见，而其他 7 个面板是隐藏的(样式显示:无；)。用户单击菜单以从一个面板移动到另一个面板。

Google 的 Speed Tracer，大约 75% 的资源花在了重绘上。我的问题是:浏览器重绘会影响 A) 仅页面的可见元素还是 B) 每个元素，无论是否可见？

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

让我知道。

Answer 1

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

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

测试 2:修改页面，完全删除 display:none 元素，加载此页面，并测量重绘速度。

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