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


Posted in Javascript onDecember 19, 2009

在选择时,最好以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

Javascript 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
jquery validate demo 基础
Oct 29 Javascript
详解原生js实现offset方法
Jun 15 Javascript
详解vue axios中文文档
Sep 12 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
解析原生JS getComputedStyle
May 25 Javascript
JS 的应用开发初探(mootools)
Dec 19 #Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 #Javascript
javascript demo 基本技巧
Dec 18 #Javascript
IE和Firefox下event事件杂谈
Dec 18 #Javascript
替代window.event.srcElement效果的可兼容性的函数
Dec 18 #Javascript
JavaScript 序列化对象实现代码
Dec 18 #Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 #Javascript
You might like
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
javascript中expression的用法整理
2014/05/13 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
python爬虫爬取网页表格数据
2018/03/07 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
数控技术专科生自我评价
2014/01/08 职场文书
老师的检讨书
2014/02/23 职场文书
计算机专业职业规划
2014/02/28 职场文书
运动员口号
2014/06/09 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
社区服务活动感想
2015/08/11 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android