减少DOM元素数量的最佳方法

Question

每个人都认为较少的DOM元素意味着更好的页面性能。这意味着更好的javascript性能，尤其是在旧版浏览器中。

但是，减少DOM元素的最佳位置在哪里？你们遇到的常见罪魁祸首是如何轻松修复这个数字？

Answer 1

使用：

<ul id="navigation-main">
    etc..
</ul>

代替：

<div id="navigation-main">
    <ul>
        etc..
    </ul>
</div>

......如果可能，那就是。有时您需要额外的div来进行布局。但如果没有必要，请不要使用它。

Answer 2

您使用元素影响布局的任何地方通常都是您可以考虑的事情。通常，您实际上可以使用较少的元素与CSS结合来实现相同的结果。硬规则很难，因为它在很大程度上取决于具体情况。

Answer 3

如果您使用的是ASP.NET服务器控件，那么这可能是一个很好的起点。一些服务器端控件虽然非常适合快速开发，但它们会使用过多的标记。我不是在提倡你不要使用服务器端控件，但是你可能会发现你网站的某些模块适合用于DOM减少

1）自己重写标记或 2）使用System.Web.UI.HtmlControls命名空间构建标记。

此方法的优秀候选者是经常出现在您网站上的组件（页眉，页脚，导航菜单）。除非您愿意保持这种风格，否则候选人也不会经常更改或修改。

另一种ASP.NET特定技术是使用System.Web.UI.WebControls.PlaceHolder动态处理，而不是使用runat="server"属性的div或面板。占位符控件不会呈现任何其他元素，只会呈现您添加到其中的元素。

Answer 4

使用常规的<ul>标签，而不是使用<a>标签，并将样式应用于自定义类。

也删除所有<br>标签，它们被视为一个节点，再次使用样式代替间距。

尤其是在页脚中放置的导航菜单中：

<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>

可以替换为：

<a href="/" class="well-spaced">Home</a>
<a href="/blog.html" class="well-spaced">Health Blog</a>

这会将节点数从5个减少到2个。

最后，我们在标题中使用了大量代码，用于帐户登录，UPI，购物篮等。其中一些可以替换为单个<div>或<a>标签，单击该标签即可拉入通过XMLHTTPRequest获得所需的150个节点。