jQuery 教程
jQuery 首页
jQuery 简介
jQuery 语法
jQuery 选择器
jQuery 事件
jQuery 效果
jQuery 隐藏/显示
jQuery 淡入淡出
jQuery 滑动
jQuery 动画
jQuery stop()
jQuery Callback
jQuery Chaining
jQuery HTML
jQuery 获取
jQuery 设置
jQuery 添加
jQuery 删除
jQuery CSS 类
jQuery css()
jQuery 尺寸
jQuery 遍历
jQuery 遍历
jQuery 祖先
jQuery 后代
jQuery 同胞
jQuery 过滤
jQuery AJAX
jQuery AJAX 简介
jQuery 加载
jQuery Get/Post
jQuery 杂项
jQuery noConflict()
jQuery 实例
jQuery 实例
jQuery 参考手册
jQuery 参考手册
jQuery 选择器
jQuery 事件
jQuery 效果
jQuery 文档操作
jQuery 属性
jQuery CSS
jQuery Ajax
jQuery 遍历
jQuery 数据
jQuery DOM 元素
jQuery 核心
jQuery Mobile
jQuery Mobile 实例
提高JQuery性能的几个技巧
jQuery
#性能 #技巧2012-08-28 08:54
在选择时，最好以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>
当然，如果你是通过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的操作
相关文章
精彩导读
热门资讯
关注我们
