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

Question

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

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

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

Answer 1

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

所以在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(<10个字符)与长ID(> 50个字符)之间的区别感兴趣.

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

• 5000短ID:从localhost和渲染加载1.022秒
• 5000 Long ID:从localhost加载1.065s并渲染
• 50,000个短ID:从localhost加载6.702秒并渲染
• 50,000个ID:6.792s从localhost加载并渲染

希望能给你一个棒球场.

编辑: 我正在使用YSlow扩展来执行计时.