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

Question

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

但是，减少 DOM 元素的最佳位置在哪里？你们遇到的常见罪魁祸首是什么，可以轻松解决这个数字？

Answer 1

使用：

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

代替：

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

...如果可能的话，就是这样。有时您需要额外的div 来进行布局。但没必要的时候不要用。

Answer 2

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

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

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

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

Answer 3

不要使用<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> 标签，单击时会拉入所需的 150 个节点通过 XMLHTTPRequest。

Answer 4

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