jQuery 性能优化
来源:互联网 发布:android ant mac下载 编辑:程序博客网 时间:2024/05/16 15:47
1.尽量使用最新版本的jQuery 类库。
jQuery 每一个新的版本都会较上一版本进行bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本的jQuery来提高性能。不过更换新版本之后,不要忘记测试代码的兼容性。
2. 使用合适的选择器
1.$(“#id”) 使用id来定位DOM元素无疑是最佳提高性能的方式,因为jQuery 底层将直接调用javascript的原生方法document.getElementById()。此外选择元素时,应该尽量缩小DOM的查找范围。例如在某个id下查找div.$("#id").find("div");
这样也能提高查找效率。
2.使用标签选择器 $("div") $("input")
使用标签选择器将会直接调用javascript的document.getElementsByTagName()方法来定位DOM元素。
3.使用类选择器 $(".class")。
使用类选择器,如果浏览器支持javascript的document.getElementsByClassName()方法,则直接使用该方法,否则就逐个遍历DOM元素。
4.使用属性选择器 $("[attribute=value]")
较新的浏览器可能支持document.querySelectorAll()方法,但是有的浏览器可能不支持,这在于他们的内核不一样。使用这种方式来查找DOM元素,性能并不理想,在开发中应该尽量避免使用。
5.使用伪选择器 $(":hidden")
和上面的属性选择器是同一类,javascript并没有对这类的实现,只有通过逐个遍历DOM元素来查找满足要求的元素,这个尽量不要使用。如果必须查找,则尽量缩小范围,从其父元素来进行搜索。例如:$("#id").find(":hidden");$("div.div").filter(":hidden")
等。
上面的选择器性能自上而下依次下降,如果对上面有所疑问,可以自己在页面上进行测试。
3.缓存对象
如果在jQuery开发中经常使用一个对象,建议进行对其缓存,否则你每次使用$()这种方式都会创建一个jQuery对象。
例如有的人喜欢这样写:
$("#btn").bind("click",function(){});$("#btn").css("border","1px");$("#btn").css("backgroud-color","red");$("#btn")....
这样最终会使jQuery创建很多的$(“#btn”)对象,而且在创建之前都必须进行DOM 查找一次。所以建议使用缓存对象或者链式的方式。
//缓存对象$btn=$("#btn");$btn.bind("click",function(){});btn.css("border","1px");btn.css("backgroud-color","red");btn....//链式操作$("#btn").bind("click",function(){}) .css("border","1px") .css("backgroud-color","red") ....; //如果像上面有相同的方法可以进行合并 $("#btn").bind("click",function(){}) .css({"border":"1px"}, {"backgroud-color":"red"}) ....;
如果某个对象经常使用也可以添加到全局函数中
window.myCustomGlob={ head:$("head"), title:$("title"), btn:$("#btn") };
记住:永远不要让相同的选择器在代码里面出现多次。
4.循环时的DOM操作
例如:
$ulList=$("#ulList");//ul列表集合for(var i=0;i<10;i++){$ulList.append("<li>"+i+"</li>");}
上面代码将每一个新的li元素添加到ul中,实际上jQuery操作消耗的性能也不低,因为上面对DOM操作了10次,最好是在插入之前把li创建好。
$ulList=$("#ulList");//ul列表集合var li="";for(var i=0;i<10;i++){li+="<li>"+i+"</li>";}$ulList.append(li);
5.使用js数组的join()方法来拼接字符串
上面使用+号拼接的li字符串,但是现在可以使用数组来转换字符串,性能比+号拼接微好些了,尤其是处理长字符串。
$ulList=$("#ulList");//ul列表集合var liArr=[];for(var i=0;i<10;i++){liArr[i]="<li>"+i+"</li>";}$ulList.append(liArr.join(''));
我自己大概测试了一下,
数量+数组 10010 100074 100005349
但是在循环100000的情况下,+号大部分比数组的时间稍微小一些。这两个性能可以自行选择。
6.数组方式使用jQuery对象
使用jQuery选择器获取的结果是一个jQuery对象。jQuery类库会让你感觉正在使用一个定义了索引和长度数组。在性能方面,建议使用for或者while循环处理,而不是使用$.each()。这样使你的代码更快。
$.each(array,function(i){});
可以使用for代替each方法,代码如下:
for(var i=0,len=array.length;i<len;i++){}
另外,检查长度也是检查一个jQuery对象是否存在的方式。
var $btn=$("#btn");if($btn)//总是true{};if($btn.length)//元素存在才返回true{}
7.事件代理
每一个JavaScript事件(click,mousedown)都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。比如,给一个表格绑定点击td后,背景色设置为红色。代码如下:
$("#table td").click(function(){ $(this).css("background","red");});
如果table中有100个td,在使用上面的方式时,就绑定了100个事件,这将带来负面的性能影响。代替这种效率很差的多元素事件监听的方法是,只需要向它们的父节点绑定一次事件,然后通过event.target获取当前点击的元素即可。
$("#table").click(function (event) { var $td = $(event.target);//捕捉触发的目标元素 if ($td[0].nodeName == "TD") { $td.css("background", "red"); } });
在改进的代码中,你只为一个元素绑定了1个事件,这种方式的性能要优于之前那种。
在jQuery1.7以后的版本中提供了一个新的方式on(),来帮助将整个事件监听封装到一个更加便利的方法中,如下:
$("#table").on("click",'td',function(){ $(this).css("background","red");});
8.将经常公用的代码转换为jQuery 插件
如果在你的项目中某段js代码经常被使用到或者有相同类似的代码,那可以考虑封装到jQuery 插件的形式,它能够使代码更好的重用性,并且有效组织代码,易于维护。
function($){ $.fn.plugName=function(){ //插件代码 return this; };}(jQuery);
例如封装一个设置颜色的color插件,插件名称:jquery.color.js
;function($){ $.fn.extend({ "color":function(value){ if(value==undefined) { return this.css("color"); } return this.css("color",value); } });}(jQuery);调用时可用直接使用了:$("#div").color("red"); 也可以封装一组插件的形式:;function($){ $.fn.extend({ "color":function(value){ if(value==undefined) { return this.css("color"); } return this.css("color",value); }, "border":function(value) { }, "backgroud":function(value) { } });}(jQuery);
9.尽量使用原生的JavaScript方法
下面一段代码是用来判断多选框是否被选中:
var $ckb=$("#ckb"); $ckb.click(function(){ if($ckb.is(":checked")){//可以使用$ckb.prop("checked"); prop比is效率高些 } });
上面这种方法使用jQuery 提供的is()方法来判断多选框是否被选中,下面使用原生的javaScript方法,原生的方法比jQuery要快,毕竟不需要判断很多的东西。经验告诉我们,能使用原生就使用原生。推荐一个站点:http://youmightnotneedjquery.com/
里面有jQuery 对应的部分原生方法。
var $ckb=$("#ckb"); var ck=ckb.get(0);//获取DOM 对象 ckb[0] ckb.click(function(){ if(ck.checked){ } });
10. :checkbox
匹配<input type="checkbox">
元素(jQuery扩展方法)。当带有input标签前缀 “<input:checkbox />"
时更加高效。
参考来源:《锋利的jQuery 第2版》此书。
- jQuery性能优化指南
- jQuery性能优化
- jQuery性能优化指南
- jQuery性能优化指南
- jquery性能优化(1)
- jquery性能优化(2)
- jquery性能优化(3)
- jQuery性能优化指南
- jQuery性能优化指南
- jQuery性能优化指南
- jQuery性能优化指南
- jQuery性能优化指南
- jQuery性能优化指南
- jQuery性能优化指南
- jQuery性能优化指南
- jQuery性能优化指南
- jQuery性能优化指南
- jQuery性能优化
- spring MVC国际化的简单实现
- Android.mk文件分析
- SODBASE CEP事件驱动应用----实时支付对账
- javascript中string和json转化方法
- (十八)享元模式详解(都市异能版)
- jQuery 性能优化
- 在Android Studio中实现AIDL远程服务调用
- 《C++ Primer Plus(第六版)》(22)(第十二章 类和动态内存分配 笔记)
- 启动模式(LaunchMode)之singleInstance单一实例
- VIM 命令模式和输入模式
- xutils数据库+gson解析假接口使用
- 六个步骤,细说电商banner图设计之色彩的奥秘
- 在linux上使用git+github传文件到云服务器
- Android状态栏学习博客---供参考