getElementsByName()的效率问题!

bennman 2012-03-27 02:16:28

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

...全文

193 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

还在加载中灬 2012-03-28

打赏
举报

顶下楼上

另外

反正这是在客户端运行的，只要不卡死，就行啦...

wzhiyuan 2012-03-28

打赏
举报

测试结果出炉了。
先说结论，快慢和浏览器有关，不同的浏览器实现这几个函数的机制不同，结果也不同。
比如我的系统是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倍。

下面给出测试代码



<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>



    var o;

    var begin = (new Date).valueOf();

    for (var i = 0; i < 100000; i++) {

      // o = document.getElementsByName("myInput");

       // o = document.getElementsByTagName("input");

        o = document.getElementById("id1");

      //  o = document.getElementById("id2");

     }

    var end = (new Date).valueOf();

    alert(end - begin);

Acesidonu 2012-03-28

打赏
举报

jquery吧，选择绑定都方便。现在的网速几十k不算什么

bennman 2012-03-28

打赏
举报

自己也按13楼的方法测了下
JS原生的方法速度都很快
但是按jquery用class选取时因为IE678没有getElementsByClassName方法所以速度要慢
总体是如果不是特别大量的查询基本没什么影响！

想念旧时光 2012-03-28

打赏
举报

个人还是觉得jquery比较好用。

bennman 2012-03-27

打赏
举报

[Quote=引用 9 楼 xuzuning 的回复:]

引用 8 楼 bennman 的回复:

补充下：谁能解释下浏览器执行这些 getElementById getElementsByName getElmentsByTagName==
这些的过程是什么，getElementById最快，快在哪，少了什么过程，反正慢的为什么慢~~~
我认为这几个函数都差不多，如果有快慢的话，是因为查找的范围不同
getElmentsByTagNam……
[/Quote]
3Q,如果有依据就更好了！ BTW 你的勋章好屌，太多了吧，鼠标放上去直接卡住了 - -！

xuzuning 2012-03-27

打赏
举报

[Quote=引用 8 楼 bennman 的回复:]

补充下：谁能解释下浏览器执行这些 getElementById getElementsByName getElmentsByTagName==
这些的过程是什么，getElementById最快，快在哪，少了什么过程，反正慢的为什么慢~~~
[/Quote]我认为这几个函数都差不多，如果有快慢的话，是因为查找的范围不同
getElmentsByTagName 从 HTML 的标记列表中检索，搜索范围最大
getElementsByName 从 HTML 的 name 列表中检索，由于 name 允许重名，所以检索出的是数组
getElementById 从 DHML 的 id 列表中检索，由于 id 必须唯一，且数量要远小于 tagName。于是速度就快些

bennman 2012-03-27