做太多ids伤害性能

如果我在页面上不必要的id s元素，就像HTML Helper在ASP.Net-MVC中做的那样。
它是否会降低我的ID选择器的性能？（我有一个元素的大写金额巨大页）做太多ids伤害性能

例子：

// 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>

来源

2012-02-08 gdoron

性能问题总是很棘手，因为实现之间可能存在这种差异。一般来说，我会同意这里的答案。我唯一要补充的是，一些浏览器，如Chrome和IE，使所有ID都能够被ID作为全局变量*（或全局对象上的属性）引用的ID引起全局混乱。因此，如果您谈论的数千个ID除了数字变体之外实际上是相同的，那么可能需要重新考虑您的方法。否则，我不会过多地流汗。 :) – 2012-02-08 15:36:06

简短的回答，没有。

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

几个月前，大约有低效率的CSS选择器的性能影响的一些职位。我很好奇 - 这是我为之而活的浏览器特质行为。在进一步的调查中，我不太确定是否值得让CSS选择器更有效率。我会走得更远，说我不认为如果我们明天醒来，每个网页的CSS选择器被神奇优化人会注意到...

我修改了测试如下：

2000个锚和2000个规则（而不是20000个） - 这实际上导致了约6000个DOM元素，因为所有嵌套在P，DIV，DIV，DIV

基线页面和标签选择器页面有2000个规则，就像所有其他页面，但这些是简单的类别规则，不匹配页面中的任何类别

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

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

来源

2012-02-08 12:29:52

补充说明：除非您将JS事件绑定到所有选择器，否则性能将最低 – 2012-02-08 12:30:47

选择一个ID是非常快，因为jQuery的备份到本地

document.getElementById

功能。尽管如此，你可以缓存你的选择器，如果你经常使用它们（将它们保存在一个变量中）。

来源

2012-02-08 12:30:29 knub

答案是：不。由于速度如此之快，您不必担心这一点。 – knub 2012-02-08 12:35:29

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

来源

2012-02-08 12:34:31 chiborg

选择元素id在jQuery中是少数几个选择器之一，如果页面上有很多元素，它们将不会收到性能命中。

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

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

来源

2012-02-12 07:34:04

做太多ids伤害性能

回答

相关问题