Question

如果我在页面中有不必要的id个元素，就像HTML Helper在ASP.Net-MVC中所做的那样。它会降低我的id选择器的性能吗？（我有一个包含大量元素的页面）

示例：

// First DOM   
<HTML>
...
    <input type="text" value="first" id="useless" />
    <input type="text" value="second" id="useful" />
</HTML>

// Second  DOM  
<HTML>
...
    <input type="text" value="first"/>
    <input type="text" value="second" id="useful" />
</HTML>

脚本：

<script>
    alert($('#useful').val());
    // never select the first element (with the useless id)
</script>

Answer 1

简短回答，不。

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

几个月前，有一些关于低效CSS选择器的性能影响的帖子。我很感兴趣 - 这是我生活的那种浏览器特质行为。在进一步调查中，我不太确定是否值得花时间让CSS选择器更有效率。我会更进一步地说，如果我们明天醒来并且每个网页的CSS选择器都被神奇地优化，我认为没有人会注意到......

我按如下方式修改了测试：


2000个锚点和2000个规则（而不是20,000个） - 由于P，DIV，DIV，DIV中的所有嵌套，这实际上会产生~6,000个DOM元素

基线页面和标签选择器页面与所有其他页面一样有2000条规则，但这些是与页面中的任何类都不匹配的简单类规则


我在12个浏览器上运行了这些测试。页面渲染时间是使用页面顶部和底部的脚本块测量的。（我从本地磁盘加载页面以避免分块编码可能造成的影响。）...

基于这些测试，我有以下假设：对于大多数网站，优化CSS选择器可能带来的性能提升很小，并且不值得花费。有一些类型的CSS规则和与JavaScript的交互可以使页面明显变慢。这是重点应该......

Answer 2

选择id非常快，因为jQuery备份到本机

 document.getElementById

功能。不过，如果频繁使用它们，可以缓存选择器（将它们保存在变量中）。

Answer 3

虽然JavaScript性能不受影响，但数千个ID会使您的HTML变大，从而增加了加载时间和流量成本。它可能是微不足道的（压缩图像和其他资源更为重要），但可能仍然是优化的途径。

Answer 4

在jQuery中按 id 选择元素是少数几个在页面上有许多元素时不会受到性能影响的选择器之一。

另一方面，如果您根据类或属性值选择元素，则会看到显着的性能损失。如果您担心性能，还要确保通过将选择器存储在变量中以便重用来缓存您的jquery选择器。

var element = $("#specificElement");
console.log(element.val());

太多的ID会影响性能吗？

4 个答案: