id太多会影响性能吗

Does Too many ids hurt performance

本文关键字：性能 影响 太多 id      更新时间：2023-09-26

如果在页面中元素上有不必要的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>

简短回答，无

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

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

我修改了测试如下：

  • 2000个锚点和2000个规则（而不是20000个）——这实际上导致了大约6000个DOM元素，因为所有嵌套在P、DIV、DIV中
  • 与所有其他页面一样，基线页面和标记选择器页面有2000条规则，但这些都是简单的类规则，与页面中的任何类都不匹配

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

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

选择id的速度与jQuery备份到本机的速度一样快

 document.getElementById

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

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

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

另一方面，如果您是根据类或属性值来选择元素，那么您将看到显著的性能提升。如果您担心性能问题，也要确保通过将选择器存储在变量中以供重用来缓存jquery选择器。

var element = $("#specificElement");
console.log(element.val());
相关文章：