太多的ID会影响性能吗？

Question

太多的ID会影响性能吗？

javascriptjqueryhtmlasp.net-mvcperformance

23

如果我的页面上有一些不必要的元素id，就像ASP.Net-MVC中的HTML Helper一样。那么这会减慢我的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>

- gdoron is supporting Monica

1

性能问题总是棘手的，因为实现之间可能存在如此大的差异。一般来说，我同意这里的答案。我唯一要补充的是，一些浏览器（如Chrome和IE）使所有具有ID的元素都能够通过它们的ID作为全局变量*(或全局对象的属性)*进行引用，从而导致更多的全局混乱。因此，如果你谈论的是数千个除了数字变化外实际上相同的ID，重新考虑你的方法可能是值得的。否则，我不会太过担心。 :) - user1106925

4个回答

5

选择一个id非常快，因为jQuery会回退到本地。

 document.getElementById

函数。不过，如果您经常使用它们（将它们保存在变量中），则可以缓存选择器。

- knub

答案是：不用担心。由于它非常快，您不必担心。 - knub

2

虽然 JavaScript 的性能不会受到影响，但数千个 ID 会使你的 HTML 变得更大，增加加载时间和流量成本。这可能是可以忽略的（压缩图像和其他资源更为重要），但仍然可能是优化的一种途径。

- chiborg

1

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

另一方面，如果你基于类或属性值来选择元素，则会看到显著的性能下降。如果您担心性能问题，还要确保通过将选择器存储在变量中以便重用来缓存您的jquery选择器。

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

- Greg Franko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Barry Chapman · Accepted Answer

简短回答，不会。

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

几个月前，有些帖子谈到了低效CSS选择器的性能影响。我很感兴趣 - 这是我为之生存的浏览器特异行为。经过进一步调查，我不确定将CSS选择器优化的时间是否值得。我甚至要更进一步地说，如果我们明天醒来，每个网页的CSS选择器都被神奇地优化了，我认为没有人会注意到......

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

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

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

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

基于这些测试，我有以下假设：对于大多数网站，通过优化CSS选择器可能带来的性能提升很小，不值得付出成本。有一些类型的CSS规则和与JavaScript的交互可以使页面变慢。这是应该关注的地方...