Html 减少 DOM 元素数量的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2120953/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best ways to reduce number of DOM elements
提问by macca1
Everyone agrees that less DOM elements means better page performance. It means better javascript performance, especially in older browsers.
每个人都同意更少的 DOM 元素意味着更好的页面性能。这意味着更好的 javascript 性能，尤其是在旧浏览器中。
But where are the best places to look to reduce DOM elements? What are the common culprits that you guys have come across that are easy fixes to get that number down?
但是减少 DOM 元素的最佳位置在哪里？你们遇到的常见罪魁祸首是什么，可以轻松修复以降低该数字？
回答by Decent Dabbler
use:
用：
<ul id="navigation-main">
etc..
</ul>
in stead of:
代替：
<div id="navigation-main">
<ul>
etc..
</ul>
</div>
... when possible, that is. Sometimes you need the additional divfor layout purposes. But when not necessary, don't use it.
...在可能的情况下，就是这样。有时您需要额外div的布局目的。但是在没有必要的时候，不要使用它。
回答by Jani Hartikainen
Anywhere where you are using an element to affect layout is usually something you can think about. Often times you can actually use less elements combined with CSS to achieve the same result. Hard rules are difficult as it depends a lot on the specific case.
您在任何使用元素影响布局的地方通常都是您可以考虑的。通常，您实际上可以使用较少的元素与 CSS 结合来达到相同的效果。硬性规则很困难，因为它在很大程度上取决于具体情况。
回答by BOS
If you are using ASP.NET server controls then that might be a good place to start. Some of the server side controls, while great for fast development, will render themselves with excessive markup. I'm not advocating you don't use server side controls, but you might find some modules of your site that are good candidates for DOM reduction by
如果您使用的是 ASP.NET 服务器控件，那么这可能是一个不错的起点。一些服务器端控件虽然非常适合快速开发，但会呈现过多的标记。我不是在提倡您不要使用服务器端控件，但是您可能会发现您网站的某些模块非常适合通过以下方式减少 DOM
1) rewriting the markup yourself or
2) building the markup with the System.Web.UI.HtmlControlsnamespace.
1) 自己重写标记或 2) 使用System.Web.UI.HtmlControls命名空间构建标记。
Good candidates for this approach are components appearing on your site frequently (header, footer, navigation menus). Candidates are also not frequently changed or modified unless you are comfortable maintaining this style.
这种方法的良好候选者是经常出现在您网站上的组件（页眉、页脚、导航菜单）。除非您愿意保持这种风格，否则候选人也不会经常更改或修改。
Another ASP.NET specific technique is to use a System.Web.UI.WebControls.PlaceHolderto work with dynamically instead of a div or panel with the runat="server"attribute. The placeholder control won't render any additional elements, only what you've added to it.
另一种 ASP.NET 特定技术是使用 aSystem.Web.UI.WebControls.PlaceHolder来动态处理，而不是使用具有runat="server"属性的 div 或面板。占位符控件不会呈现任何其他元素，只会呈现您添加到其中的元素。
回答by Y.K.
Rather than using <ul>tags, use regular <a>tags and apply styling to a custom class.
不要使用<ul>标签，而是使用常规<a>标签并将样式应用于自定义类。
Remove all <br>tags also, they count as a node, again, use styling for spacing instead.
也删除所有<br>标签，它们算作一个节点，再次使用样式作为间距。
Especially in nav menus placed in footers:
特别是在放置在页脚中的导航菜单中：
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
Could be replaced with:
可以替换为：
<a href="/" class="well-spaced">Home</a>
<a href="/blog.html" class="well-spaced">Health Blog</a>
Which would reduce number of nodes from 5 to 2.
这会将节点数量从 5 个减少到 2 个。
And finally, we use heavy code in our header, for account login, UPI, basket etc. Some of these could be replaced with a single <div>or <a>tag, which when clicked pulls in the required 150 nodes via XMLHTTPRequest.
最后，我们在标题中使用大量代码，用于帐户登录、UPI、购物篮等。其中一些可以替换为单个<div>或<a>标签，单击时通过 XMLHTTPRequest 拉入所需的 150 个节点。
