div容器贵吗？

Question

我有一个用数百个div容器构建的页面（不要问为什么:)。我知道它不是太优雅，但渲染资源是否昂贵？我应该担心优化吗？

Answer 1

这不是div本身的昂贵，而是它们的内容推动了布局。你有什么？

另外，你实际上体验慢吗？先测量，然后担心。

Answer 2

自己测试一下。在Chrome中，您可以在开发工具中查看渲染时间轴。尝试使用一半的div，看看有什么区别。

正如另一个回答所提到的那样，它将更多地与它们内部的内容有关。文字很简单;图像不是那么多。如果你有浮动div，渲染引擎会变得更复杂。但是如果你看一下像Reddit这样的网站上的评论主题的html，你就会谈论成千上万的div，但它会很快呈现。只需下载内容的时间可能会延长10倍。

Answer 3

取决于设备和div的内容。创建了12个div深度嵌套，阴影，圆角，css3变换等等，以便在iPad 1上进行测试，它在导航时非常流畅。总计超过70 divs没有导致任何减速。拥有多达200个div并且没有过于复杂的规则，内容等不应该在现代浏览器/设备中引起真正的问题。还必须使用超过40 MB的图像，复杂的结构等页面，至少几代旧的Mac Mini处理完美。

总而言之，我不会过分担心它。但是，根据你的精确解决方案，这可能不是真的，但如果你不尝试在div中做太多HTML / CSS / JS / Flash魔术，你应该没问题。不过，有些移动浏览器可能也有所不同。例如，较慢的机器人可能无法顺利处理它。