JQuery常用功能的性能优化
使用最佳选择器
通常比较常用的选择器有以下几个:
1.ID选择器 $("#id")
2.标签选择器 $("td")
3.类选择器 $(".target")
4.属性选择器 $("td[target='target']")
5.伪类选择器 $("td:hidden")
结论
1.原生方法是最快的方法,如果可能,尽量选择用原生
2.性能顺序:ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器
3.ID(getElementById)、标签选择器(getElementsByTagName)都有原生的方法对应,所以很快;类选择器在除了IE5-IE8之外的主流浏览器几乎都有原生方法(getElementsByClassName),为了兼顾IE6、7、8的性能,避免使用全局的类选择器;
4.属性和伪类选择器非常慢,如非必要,尽量少使用伪类选择器和属性选择器
最佳实践
1.为模块中操作最频繁的元素和根元素设置id,然后缓存;
2.对没有id的元素检索,尽量采用路径最短的祖先元素id作为默认的搜索范围,并采用纯类选择器或者标签选择器;
3.尽量避免复杂的选择器
避免执行全局查找
1
|
$( "div.bizHelp" );
|
=>
1
|
$( "#container" ).find( ".bizHelp" );
|
保证查询的路径最短,性能最优,参照第一条;
避免对空结果进行操作
对于数量为0的选择结果,JQuery会执行默认动作,并且不会报错,这会影响程序的性能。
1
|
var blank=$( ".blank" ); //length=0
|
1
|
blank.slideUp();
|
=>
1
|
blank.length && blank.slideUp();
|
避免使用匿名函数
大量的使用匿名函数会对程序的调试、维护以及通过第三方软件来做性能测试增加难度,因此应该尽量避免大量的使用匿名函数
1
|
obj.click( function (){
|
2
|
//do something...
|
3
|
})
|
=>>
1
|
var clickHandler= function (){
|
2
|
//do something...
|
3
|
}
|
4
|
obj.click(clickHandler)
|
大循环采用更高效的遍历方式
JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历,除此之外,还可以采用JS原生的for循环、while等来实现迭代:
1
|
var list=ul.find( "li" ),e;
|
A:
1
|
var i=list.length;
|
2
|
while (i--){
|
3
|
e=$(list[i])
|
4
|
}
|
B:
1
|
list.each( function (){
|
2
|
e=$( this );
|
3
|
});
|
C:
1
|
$.each(list, function (){
|
2
|
e=$( this );
|
3
|
});
|
结论
总体上来说A>C>B
最佳实践
追求极致性能,用原生方法;
循环数量少的话,建议使用$.each(),比较稳定;
优先使用原生属性
很多常用的属性,比如id、name等都被浏览器原生实现,在JQuery中我们有时会用$(this).attr("id")的方式来获取id,这种方法的效率相比原生属性的获取效率而言,非常慢。
1
|
$.each(list, function (){
|
2
|
//A
|
3
|
var id=$( this ).attr( "id" );
|
4
|
|
5
|
//B
|
6
|
var id= this .id;
|
7
|
})
|
结论
使用原生的API,可以极大的提高性能
最佳实践
对于id等常用的属性,用原生的属性,不要通过attr去获取;
使用事件委托
给一个列表中所有元素添加点击事件,传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件:
1
|
$( "li" ).click( function (){})
|
这种方法的在列表数量比较大的时候会有严重的性能问题,应该值得关注。
可以使用JQuery的事件委托机制,能很大程度的降低添加事件监听的消耗和内存的消耗。
A:
1
|
var list=$( "li" ); //length>1 list.click(function(){ })
|
B:
1
|
$( "ul" ).delegate( "li" , "click" , function (){})
|
结论
委托的性能优势是非常绝对的;
最佳实践
对于需要同时给两个以上的同类型元素添加事件时,用方案B来代替A
使用$.data 而不是$.fn.data
1
|
$(elem).data(key,value); $.data(elem,key,value);
|
后者比前者快近10倍
JQuery常用功能的性能优化相关推荐
- 巧用css的border属性完成对图片编辑功能的性能优化
一.需求场景: 最近闲来无事,boss提出了一个要求,研究相关代码并完成一个关于编辑图片功能的性能优化,该功能的主要界面展示如下: 通过了几分钟的短暂试用,发现就是一个简单的裁剪并保存用户选择并上传的 ...
- 分享 11 个常用的 Nginx 性能优化参数工作
编辑:业余草 来源:https://www.xttblog.com/?p=4957 分享 11 个常用的 Nginx 性能优化参数教程 工作上,需要配置 Nginx,要投入生产使用,做了一点优化工作, ...
- 常用的后端性能优化六种方式:缓存化+服务化+异步化等
后端优化的六种方法: 1.硬件升级 硬件问题对性能的影响不容忽视. 举一个例子:一个DB集群经常有慢SQL报警,业务排查下来发现SQL都很简单,该做的索引优化也都做了.后来DBA同学帮忙定位到问题是硬 ...
- jquery常用功能
http://www.phpweblog.net/jig68/archive/2010/06/22/7274.html Jquery功能函数整理 分享 如果你正在学习jQuery,也许这些资料对你会有 ...
- Nginx常用功能配置及优化
规范优化Nginx配置文件: ------------------------------------------------------------------------------------- ...
- 读jquery 权威指南[7]-性能优化与最佳实践
一.优化选择器执行速度 1. 优先使用ID选择器和标记选择器 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选 ...
- Android群英传笔记——第十章:Android性能优化
Android群英传笔记--第十章:Android性能优化 随着Android应用增多,功能越来越复杂,布局也越来越丰富了,而这些也成为了阻碍一个应用流畅运行,因此,对复杂的功能进行性能优化是创造高质 ...
- 网站性能优化工具大全
网站性能优化(WPO)已经成为一个非常重要的话题了,越来越多的互联网公司开始有WPO的职位,而相关技能也是对前端开发工程师的重要技术要求之一.国外大牛Steve Souders在参加WebPerfDa ...
- Cocos Creator ScrollView 性能优化
9月份 Cocos 技术开发分享会第 2 期在深圳圆满举行,近期我们将对活动干货进行整理,陆续在公众号上发布,没能去到深圳现场的开发者可以关注一下!对于分享的议题有哪些疑惑也欢迎在文末给我们留言! 本 ...
最新文章
- 【xinfanqie】五方面快速解决Win8蓝屏问题
- Android APP破解利器Frida之反调试对抗
- linux下C/C++编译时系统搜索 include 和 链接库 文件路径的指定
- 浅谈 Celery 分布式队列
- Multilink ppp多链接PPP协议的配置
- linux命令apprw,linux命令学习1(示例代码)
- 省编码市编码区县编码_无浪费编码
- 05 MapReduce应用案例01
- pycharm中更新pip版本的问题
- [python教程入门学习]就业寒冬,从拉勾招聘看Python就业前景
- Linux下如何编译Android源码~~~
- java中的10的算法,Java中10个常用的排序算法
- 小程序 css框架,微信小程序_如何支持Less等CSS框架开发
- 【HDOJ】1261 字串数【组合数学--排列+代数】
- pytorch nn.CrossEntropyLoss()中的label不需要是one_hot
- 转:天下互联CEO张向宁:傻目录不是搜索引擎
- 微大夫感冒舒缓仪亮相“2018健康陕西发展大会”回顾
- VBA 工作表 worksheet.add 方法
- nginx上传文件大小限制
- 什么从什么写短句_照样子写句子.(写清“谁或什么 “在什么地方 “做什么或怎么样 ) 例1:小朋友在河边种树. 例2:麻雀在窝里睡着了. 题目和参考答案——青夏教育精英家教网——...