添加多余ID对html/js渲染性能的影响 [英] Effect of adding excessiv ID's on html / js rendering performance

问题描述

我当前正在从事的项目目前有大约10个UL，每个UL中将包含10-50个元素.有人建议为每个元素指定一个唯一的ID，我们将使用它通过Javascript更新内容.

A project I'm currently working currently has about 10 ULs, each which will have anywhere from 10-50 elements in them. Its been proposed that each of those elements have a unique ID specified to it that we will use to update content with via Javascript.

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

This seems like a large number of IDs to add to a page, but each field will have a real and meaningful name.

如果这对我们有用，是否会在最初呈现页面或使用javascript遍历/修改页面时，向许多已经存在的元素添加ID会对性能产生任何影响?

If this is useful to us, are will adding IDs to this many already existing elements have any effects on performance while initially rendering the page or traversing/modifying it with javascript?

推荐答案

我接受了Eddie Parker的建议.此外，我对短ID(小于10个字符)与长ID(大于50个字符)之间的差异感兴趣.

I took Eddie Parker's advice. Further, I was interested in the difference between short ID's (<10 characters) vs long ID's (>50 characters).

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

My test used FF2.0 to open a page with n DIV tags, each with an ID, containing only the text "Content":

• 5000个简短ID: 1.022s ，可从本地主机加载并呈现
• 5000个长ID: 1.065s ，可从本地主机加载并呈现
• 50,000个短ID: 6.702s ，可从本地主机加载并呈现
• 50,000个长ID: 6.792s ，可从本地主机加载并呈现

• 5000 Short ID's: 1.022s to load from localhost and render
• 5000 Long ID's: 1.065s to load from localhost and render
• 50,000 Short ID's: 6.702s to load from localhost and render
• 50,000 Long ID's: 6.792s to load from localhost and render

希望给你一个球场.

修改: 我正在使用YSlow扩展程序执行计时.

I was using the YSlow extension to perform the timing.

这篇关于添加多余ID对html/js渲染性能的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！