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