首页 > 语言 > JavaScript > 正文

Jquery优化效率 提升性能解决方案

2024-05-06 14:27:27
字体:
来源:转载
供稿:网友
例如有一段HTML代码:

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

以下是引用片段:
<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代码:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表