程 序 人 生

[每个人都是工程师,书写着属于自己的人生代码!--林海]
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jquery 功能优化

Posted on 2015-01-30 21:33  林海  阅读(211)  评论(0编辑  收藏  举报

1.总是从ID选择器开始继承。
在jQuery中最快的选择器是ID选择器,因为它直接来自于javascript的getelementById()方法。
例如:
<div id="warp">
<div id="content">

<ul>

<li>1</li> 

<li>2</li> 

<li>3</li>
</ul>
<input type="button" class="input_btn" id="submit" value="submit" />

</div>
</div>
如果使用 $("#content .input_btn")则会很大的影响jQuery的性能,最快的效率是使用$("#submit")。如果涉及到DOM遍历循环时,未来提供性能,建议使用最近的ID选择器。如$(#content li)。

2.在class前使用tag(标签名)
在jQuery中第二快的选择器是标签名。和ID选择器一样它来自于javascript的getElementsByTagName_r()方法。
使用方法如:$("div");
使用标签名选择器需要注意几点:
1).标签名或不不用跟随ID,如$("div #content")。
2).不用在ID后面使用ID,如$("#demo #line")。

3.将jQuery对象缓存起来
就是要告诉我们,要将jQuery对象使用变量缓存起来。如下代码:
$("#content .btn p").css(.........
$("#content .btn p").css(.........
$("#content .btn p").show().........
这样是不好的编写,正确编写如下:
var $demo=$("#content .btn p");
$demo.css(......
$demo.css(......
$demo.show().....
永远不要让相同的选择器出现在同一段代码中

4.直接对DOM操作进行限制
这里的基本思想是在内存中建立你所需要的东西,然后更新DOM。
如循环添加DOM节点:
for(var i=0;i<100;i++){
    $("#showli").appent("<li>"+i+"</li>");
}
这是不好的编写方法,正确的编写方法如下:
var html="";
for(var i=0;i<100;i++){
  html+="<li>"+i+"</li>";
}
$("#showli").appent(html);

5.冒泡
如果在编写代码中你需要为很过个标签添加同一个事件是,那么你只需要对它的父标签添加一次事件。
如为表格里的td标签添加点击事件:
$("#mytable td").onclick(function(){
    //代码段,对td进行操作
    ......
});
则可以改写为:
$("mytable").onclick(function(e){
    var $tag=$(e.target);
    //代码段,对$tag进行操作
});

6.推迟到$(windwo).load
我们通常把任何东西挂到$(function(){});里面,它可以再也没渲染时就执行。往往里面的函数体会影响到也没一直在加载状态。这时你可以使用$(window).load(function(){});方法这减少也没再加载时暂用的CUP。一些特效、动画、拖放等等都适合使用。

7.压缩javascript
使用脚本压缩工具压缩和最小化你的javascript文件。在压缩之前要确保代码的正确性。否则页面会出现js报错。

8.给选择器一个上下文
jquery中可以指定上下文:
jquery(expression,context),它可以缩小选择器的搜索范围,减少时间,提高效率。
如:$(".a_hover",$("#mycontent"));

9.慎用.live()方法
如果可以,尽量不要使用该方法。它可以为在代码执行时新增的元素动态绑定事件,但是比较占用资源,所以尽量不要使用。

10.子选择器和后代选择器
后代选择器如:$("#mycontent p");它选择ID为mycontent里面的所有元素。
子选择器如:$("#mycontent > p");它只选择ID为mycontent的子元素。
在实际应用中如果只要求获取子元素,那么就不应该使用后代选择器。