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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
js分页代码分享
Apr 28 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
js实现微信聊天界面
Aug 09 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
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
小程序实现横向滑动日历效果
2019/10/21 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python制作简易注册登录系统
2016/12/15 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
英语专业毕业个人求职自荐信
2013/09/21 职场文书
学校消防安全制度
2014/01/30 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
社会公德演讲稿
2014/05/20 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
单位未婚证明范本
2014/11/25 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
培训后的感想
2015/08/07 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
MySQL中order by的执行过程
2022/06/05 MySQL
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers