当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery Tips(4) 一些关于提高JQuery性能的Tips

Javascript
JavaScript 拖拽实现（附注释），最经典简单短小精悍！
学习drag and drop js实现代码经典之作
jquery创建div 实现代码
jquery遍历input取得input的name
jQuery 对象中的类数组操作
js 发个判断字符串是否为符合标准的函数
细品javascript 寻址,闭包,对象模型和相关问题
在IE上直接编辑网页内容的js代码(IE地址栏js)
一个选择最快的服务器转向代码
JQUERY 对象与DOM对象之转换
javascript 对象比较实现代码
jquery 获取json数据实现代码
Firefox div高度自适应
xml和web特殊字符
js 表单验证方法(实用)
ie和firefox不兼容的解决方法集合
js 数组操作代码集锦
js checkbox(复选框) 使用集锦
JS 判断代码全收集
理解JavaScript的caller,callee,call,apply

No. « 134 135 136 137 »

技术文章搜索

关键字

Javascript 中的 JQuery Tips(4) 一些关于提高JQuery性能的Tips

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 317 ::
收藏到网摘: n/a

如今咱祖国已经崛起了..电脑的配置也是直线上升.可是js的性能问题依然不可小觑..尤其在万恶的IE中..js引擎速度本来就慢..如果JS如果再写不好，客户端多开几个窗口假死肯定是家常便饭了.废话不说了，下面说说js性能提升的一些小Tips. 在选择时，最好以ID选择符作为开头
我想这个很好理解，因为JQuery内部使用document.getElementByID方法进行ID选择，这种方法比其他所有对DOM选择的方法更快，所以以$("#")开头是最好的,比如:
复制代码 代码如下:

<div id="a">
<div class="b">
<div class="c">
<div class="d"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(".b .c .d")//slow one
$("#a .b .c .d")//fast one
</script>

提供$()的上下文
在使用$()选择页面元素时，提供选择的范围可以减少选择的时间，换句话说，让选择器只在页面的一小片范围内筛选而不是整个页面当然会减少筛选时间，通过在$()函数内提供第二个参数作为上下文可以实现这一点
复制代码 代码如下:

<div id="test">
<div class="inner">hi</div>
</div>
<script type="text/javascript">
alert($(".inner", document.getElementById("test")).text());//increase the speed by provide context
alert($(".inner").text());//traverse all the element so that is slower than above
</script>

当然，在jquery定义(或者js函数)事件内,可以通过this来指代上下文:
复制代码 代码如下:

<div id="test">
<div class="inner">hi</div>
</div>
<script type="text/javascript">
$("#test").click(function() {
var text = $(".inner", this).text(); //this means $("#test")
alert(text);//alert hi
});
</script>

当然，上面的例子也可以写成下面两种方式：
复制代码 代码如下:

<div id="test">
<div class="inner">hi</div>
</div>
<script type="text/javascript">
alert($("#test .inner").text()); //method 1
alert($("#test").find(".inner").text());//method 2 and it was best one
</script>

其中利用find方法是所有方法中效率最高的
当然，如果你是通过id选择符，也就是$("#..")来选择，不需要提供上下文参数.这对速度没有影响
将经常用的JQuery包装好的元素进行保存
如题，这点比较重要，因为使用$()对页面元素进行选择是需要耗费时间的.而保存为变量进行使用时，可以避免这种浪费，比如：
复制代码 代码如下:

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>
<script type="text/javascript">
for (i = 0; i < $("ul li").length; i++) {//very bad,select $("ul li") so many times,waste a lot of time
alert($("ul li")[i].innerHTML);//same here,very bad
}
var $li = $("ul li");
for (i = 0; i < $li.length; i++) {//good one,only selct $("ul li") once
alert($li[i].innerHTML); //same here,good
}
</script>

从代码可以看到，避免多次重复选择可以提高性能:-)

尽量少用选择符
JQuery的选择器是面向数组的，所以在条件允许的情况下尽量少用选择器，比如：
复制代码 代码如下:

<div id="Div0"></div>
<div id="Div1"></div>
<div id="Div2"></div>
<script type="text/javascript">
$("#Div0").slideDown("slow");
$("#Div1").slideDown("slow");
$("#Div2").slideDown("slow");//slow
$("Div0,Div1,Div2").slideDown("slow");//fast
</script>

可以看出，使用选择器并用逗号将被选择的元素分开，并选择多个元素不仅让代码更加简洁，并且通过减少创建JQuery的实例所以在性能上也稍胜一筹!

在循环次数很多时避免使用$().each,而使用for循环
使用$().each方法让在进行循环时，会让编程更加轻松，少量的循环在使用$().each时对性能的影响可以忽略不计，但是当这个数字很大的时候，对性能的影响便开始变得可观了.
这个数字，我查了下资料，据说是1000以下可以使用$().each方法，而这个数字如果继续增加，则应该使用for循环语句。

尽量减少对DOM的操作
在页面中对DOM操作是比较消耗的（比如在页面插入或删除一段文字），把这个改动降至最小是保持性能的最佳实践！比如：
复制代码 代码如下:

<ul id="test">
</ul>
<script type="text/javascript">
var $list = $("#test");
for (i = 1; i < 101; i++) {
$list.append("<li>Item" + i + "</li>");
} //very bad,change dom 100 times
var listItem = "";
for (j = 1; j < 101; j++) {
listItem += "<li>Item" + j + "</li>";
}
$list.html(listItem);
//good practice,only modify dom once
</script>

可以看出，第一个例子对DOM修改100次，而第二个只对DOM修改1次，这上面的性能差距是显而易见的。

可以屏蔽JQuery的动画效果
在某些情况下，如果，可以关闭JQuery动画，能对性能进行一定提升，屏蔽的方法是：
复制代码 代码如下:

<script type="text/javascript">
jQuery.fx.off = true;
</script>

如果参数可以是JS对象，尽量使用对象
很对JQuery插件，或者JQuery的css和attr方法都接受键/值 或 js键/值对象 对作为参数，传递键值对象可以减少JQuery对象的创建，比如:
复制代码 代码如下:

<div></div>
<script type="text/javascript">
$("div").css("display", "block");
$("div").css("background-color", "blue")
//slow,because it create more Jquery object
$("div").css({ "display": "block", "background-color": "blue" });
//fast,only create one object
</script>

当然也可以使用连缀的方式:
复制代码 代码如下:

<div></div>
<script type="text/javascript">
$("div").css("display", "block").css("background-color", "blue");
</script>

但是这种方式的性能不如上面那种.需要使用两个方法，并且需要多生成临时对象.
以上都是一些对JQuery性能提升的小Tips