Question

我目前正在工作的一个项目大约有10个UL，每个项目中包含10-50个元素。有人建议每个元素都有一个指定的唯一ID，我们将用它来通过Javascript更新内容。

这似乎是要添加到页面的大量ID，但每个字段都有一个真实且有意义的名称。

如果这对我们有用，那么在最初呈现页面或使用javascript遍历/修改页面时，是否会向这些现有元素添加ID会对性能产生任何影响吗？

Answer 1

根据我的个人经验，我已经实现了超过1000个唯一ID的页面，甚至IE似乎也能很好地应对。但请记住，IE将为页面上的每个ID创建一个全局变量，并记住在javascript中，通常全局变量和函数名称都只是窗口对象的属性。

因此在IE中，以下代码将会破坏：

<div id="foo"></div>
<script>
    function foo (txt) {
        document.getElementById('foo').innerHTML = txt; // fail in IE
                                                        // because function 'foo'
                                                        // clash with ID 'foo'
    }
</script>

需要注意的是，因为大量的ID函数名称冲突的可能性增加。

Answer 2

我接受了Eddie Parker的建议。此外，我对短ID（＆lt; 10个字符）与长ID（＆gt; 50个字符）之间的区别感兴趣。

我的测试使用FF2.0打开一个包含n个DIV标签的页面，每个标签都带有一个ID，只包含文本“Content”：

5000短ID： 1.022s 从localhost加载并渲染
5000长ID： 1.065s 从localhost加载并渲染
50,000短ID： 6.702s 从localhost加载并渲染
50,000个长ID： 6.792s 从localhost加载并渲染

希望能给你带来一个球场。

修改我正在使用YSlow扩展来执行计时。

Answer 3

我不能权威地回答，但是你为什么不写一个脚本来生成一个荒谬的大型ul列表，并测试有/没有id的渲染性能？然后，您可以在多个浏览器中对其进行测试。然后在这里发布答案，你可以回答你自己的问题，并获得一个闪亮的徽章。 ;）

实现python脚本输出它不需要很长时间。

Answer 4

添加所有id属性当然意味着页面源变得更长，这可能会稍微影响加载时间。除此之外，效果将是最小的。只是在页面中使用元素显然比向它们添加id要多得多。

添加过多ID对html / js渲染性能的影响

4 个答案: