您的位置:知识库 » .NET技术

jQuery性能优化指南(1)

来源: 博客园jQuery社区  发布时间: 2009-05-20 01:45  阅读: 2462 次  推荐: 0   [收藏]  
[1] jQuery性能优化指南(1)
[2] jQuery性能优化指南(1)

1.总是从ID选择器开始继承

在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法。

例如有一段HTML代码:

Code
<div id="content">
<form method="post" action="#">
<h2>交通信号灯</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> 红色</li>
<li><input type="radio" class="off" name="light" value="yellow" /> 黄色</li>
<li><input type="radio" class="off" name="light" value="green" /> 绿色</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>

如果采用下面的选择器,那么效率是低效的。
      var traffic_button = $("#content .button");

因为button已经有ID了,我们可以直接使用ID选择器。如下所示:
      var traffic_button = $("#traffic_button");

当然 这只是对于单一的元素来讲。如果你需要选择多个元素,这必然会涉及到 DOM遍历和循环,为了提高性能,建议从最近的ID开始继承。
      如下所示:
      var traffic_lights = $("#traffic_light input");

2.在class前使用tag(标签名)

在jQuery中第二快的选择器是tag(标签)选择器( 比如:$("head") )。跟ID选择器累时,因为它来自原生的getElementsByTagName() 方法。

继续看刚才那段HTML代码:

Code
<div id="content">
<form method="post" action="#">
<h2>交通信号灯</h2>
<ul id="traffic_light">
<li><input type="radio" class="on" name="light" value="red" /> 红色</li>
<li><input type="radio" class="off" name="light" value="yellow" /> 黄色</li>
<li><input type="radio" class="off" name="light" value="green" /> 绿色</li>
</ul>
<input class="button" id="traffic_button" type="submit" value="Go" />
</form>
</div>

比如需要选择 红绿 单选框,那么可以使用一个tag name来限制(修饰)class ,如下所示:
      var active_light = $("input.on");

当然也可以结合 就近的ID,如下所示:
      var active_light = $("#traffic_light input.on");

在使用tag来修饰class的时候,我们需要注意以下几点:
    (1) 不要使用tag来修饰ID,如下所示:
          var content = $("div#content");
          这样一来,选择器会先遍历所有的div元素,然后匹配#content(好像jQuery从1.3.1开始改变了选择器核心后,不存在这个问题了   。暂时无法考证。)

     (2)不要画蛇添足的使用ID来修饰ID,如下所示:
              var traffic_light = $("#content #traffic_light");

注:如果使用属性选择器,也请尽量使用tag来修饰,如下所示:

       $('p[row="c3221"]').html();而不是这样:$('[row="c3221"]').html();
[第1页][第2页]
0
0

.NET技术热门文章

    .NET技术最新文章

      最新新闻

        热门新闻