getElementsByName()的效率有关问题

getElementsByName()的效率问题!
一个页面有分散的多个标签需要绑定同样的事件。由于不能用ID获取也不能用TagName（）因为可能有的是<a>有的是input，剩下的就是用 class或者getElementsByName() 这两个来获取了。class的效率肯定慢，后者的效率如何，是按什么个顺序来查找（查找所有，然后判断name?）?

[解决办法]
class应该比getElementsByName()效率快
[解决办法]

jquery应当更好一点 

代码也少 呵呵
[解决办法]

探讨

class应该比getElementsByName()效率快

[解决办法]
getElementsByName也好，byTagName也好，只要是获取集合，肯定需要遍历，效率当然不高
不过对于一般网页，这种事件绑定只执行一次，执行总时间通常也只是毫秒级，比起网页里的img或者js,css等文文件下载的秒级时间来，应该完全可以承受。

[解决办法]
原生的功能 比 扩展的 效率要高。
[解决办法]
jquery 只是写的代码少了，效率是一样的，如果算起jquery 库的加载，肯定还更慢
[解决办法]

探讨

补充下：谁能解释下 浏览器执行这些 getElementById getElementsByName getElmentsByTagName==
这些的过程是什么，getElementById最快，快在哪，少了什么过程，反正慢的为什么慢~~~

[解决办法]
jquery吧，选择绑定都方便。现在的网速几十k不算什么
[解决办法]
测试结果出炉了。
先说结论，快慢和浏览器有关，不同的浏览器实现这几个函数的机制不同，结果也不同。
比如我的系统是XP，我用IE8,firefox11,opera11 三个浏览器测试，页面用大约 200个元素测试， 测试循环100000次的时间(毫秒)
IE8 byname 710，bytag 710,byid 790 - 4400
Firefox byname 48, bytag 45, byid 24
Opera byname 170, bytag 170,byid 110

可以看出，三种浏览器的各自的 bytag 和 byname 基本一样，其中firefox的bytag 比它的byname稍快一些（这个数据看不明显，可以将循环加大到10倍，可以看出是始终是有点差距）
至于byid,这两种浏览器 opera 和 firefox都是显示比 bytag和byname快，这也符合我们通常的假设。
IE就另我们大吃一惊了，他的byid居然比bytag和byname慢，而且，byid("id1")，和这个"id1"的元素位置有关，最靠前的元素，只比bytag和byname稍慢一点，最靠后的元素，居然比最靠前的元素慢5倍。

下面给出测试代码

HTML code

<input name="myInput" type="text" size="20" id="id1" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br />.................中间省略了很多元素，大家自己补上..........................<a href="" name="myInput" >some text </a><div name="myInput">som etext </div><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20"  /><br /><a href="" name="myInput" id="id2">some text </a>
[解决办法]
顶下楼上

另外

反正这是在客户端运行的，只要不卡死，就行啦...
[解决办法]
个人还是觉得jquery比较好用。 

 

查看更多 下一篇