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 相关文章推荐
基于Jquery实现键盘按键监听
May 11 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
JS实现拼图游戏
Jan 29 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
详解ES6中class的实现原理
Oct 03 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版本常用的排序算法汇总
2015/12/20 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
python 中split 和 strip的实例详解
2017/07/12 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python简单实现AES加密和解密
2019/03/28 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
巴西网上药房:onofre
2016/11/21 全球购物
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
奉献演讲稿范文
2014/05/21 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书