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中ajax学习笔记3
Oct 16 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
angular共享依赖的解决方案分享
Oct 15 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 数字左侧自动补0
2008/03/31 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
浅谈javascript中onbeforeunload与onunload事件
2015/12/10 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
windows下安装Python和pip终极图文教程
2017/03/05 Python
快速了解Python中的装饰器
2018/01/11 Python
利用python求积分的实例
2019/07/03 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python如何转换字符串大小写
2020/06/04 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
英语专业个人求职信范文
2014/02/01 职场文书
生日宴会主持词
2014/03/20 职场文书
社保委托书怎么写
2014/08/02 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
好人好事新闻稿
2015/07/17 职场文书
2019年工作总结范文
2019/05/21 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
字节飞书面试promise.all实现示例
2022/06/16 Javascript
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS