在性能下降之前，浏览器可以安全处理多少个元素ID？

Question

使用元素id是javascript“获取”元素的最快方式。在可以预期浏览器性能开始降级之前，是否应该使用多少这些id的经验法则或最佳实践指南？

Answer 1

ID本身就是一个属性值。唯一的“性能”问题是浏览器必须下载的额外位和字节。从JavaScript POV开始，DOM中的元素越多，遍历它的时间就越长，但这与您可能使用的ID数量没有直接关系。

编辑：

澄清你的JS是否是这样：

document.getElementById("myID")

如果您的HTML看起来像这样并不重要：

<div id="div1">
  <div id="div2">
    ...
      <div id="div999">
        <div id="myDiv">

或者这个：

<div>
  <div>
    ...
      <div>
        <div id="myDiv">

对于这两个示例，JS应该运行相同的操作。

Answer 2

复杂页面意味着要下载更多字节，这也意味着JavaScript中的DOM访问速度更慢。如果您想要添加事件处理程序，例如在页面上遍历500或5000个DOM元素，则会有所不同。

大量的DOM元素可能是一种症状，即应该通过页面标记来改进某些内容而不必删除内容。您是否使用嵌套表进行布局？你是否只是为了解决布局问题而投入更多？也许有一种更好，更语义正确的标记方式。

对布局的一个很好的帮助是YUI CSS实用程序：grids.css可以帮助您进行整体布局，fonts.css和reset.css可以帮助您去除浏览器的默认格式。这是一个重新开始并考虑你的标记的机会，例如只有在语义上有意义时才使用s，而不是因为它呈现一个新的行。

DOM元素的数量很容易测试，只需键入Firebug的控制台： document.getElementsByTagName（'*'）。length

Answer 3

我们有一个超过1,000个字段的表单（不要问），使用jQuery Validate进行客户端验证。这包括验证所需的字段，检查每个字段的数据类型，根据特定条件显示/隐藏字段组，以及在输入数据时跨多个字段运行计算。

只有MSIE会以这种速度减速。 Firefox和Chrome“即时”运行验证。 MSIE最终显示“长时间运行的脚本”对话框。我昨晚得到通知，现在需要更多字段。