Question

我正在创建一个如下所示的按钮：

<!-- Container -->
<div>

<!-- Top -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

<!-- Middle -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

<!-- Bottom -->
<div>
    <div></div>
    <div></div>
    <div></div>
</div>

</div>

它有很多元素，因为我希望它可以在不限制skinners能力的情况下进行换肤。但是，我担心表现。有很多DOM元素会改变糟糕的性能吗？显然会有影响，但那有多大？

更新

容器div为整个按钮设置投影和边框等属性。然后我们有一个类似网格的3x3，每个角都可以有自己的图像，边框和其他CSS属性。最后我们有中间部分包含文本和可能的其他样式，如填充。

假设我想要一个带box-shadow的按钮，4个角落图像，4个边缘图像和中心图像，其中所有图像都是SVG，中心需要填充。如何用更少的DIV实现这一目标？我的目标浏览器是HTML5浏览器。

Answer 1

这很难回答，因为很明显，影响会因浏览器而异。

但是，对于单个按钮，这是 lot 元素。是否有可能削减一些？

我也觉得困难的是，“div汤”使代码极难阅读，并且需要每个元素来获得样式的类。尝试找到更合适的元素，如

<h1> <h2> ...用于字幕和标题
<ul> <li> ...用于导航和其他列表

尽可能尝试使用border和background-image属性，它们几乎肯定会减少对所用元素数量的需求。我想不出一个需要这么多元素才能工作的按钮。

Answer 2

回复你的评论：所有现代HTML5浏览器都支持CSS 3，这应该足以让你的设计师制作一些漂亮的按钮。

如果其中任何一个人抱怨这个，你可以使用jQuery脚本在按钮周围添加一些标记。

我根本不会将这些垃圾扔进我的页面并使代码难以阅读，因此难以设计风格。

Answer 3

最好切断元素，并使用语义代码（ul，li，span等）

但简单的代码不会影响任何浏览器的性能。当然，当它变得更复杂时，依赖于浏览器。一般来说javascript代码的性能要大得多（像jquery这样的简单库有几十万行），所以你不必过于担心2或3个额外的html标签......只需将脚本限制在所需的最小值：）

对于现代浏览器，不幸地使用现代HTML / CSS意味着你将放弃IE6,7,8用户...或者网站对他们来说会很糟糕。

是否有很多DOM元素对性能有害？

3 个答案: