<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简述jquery的优化</title> </head> <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script> <body> <!-- --> <script type="text/javascript"> 一 .选择适合的选择器: 不同的选择器,性能消耗是不一样的 所以选择合适的选择器是很重要的 1.$("#id"):使用id来定位DOM无疑是最佳的提高性能的方式,因为jquery底层直接调用的是document.getELementById() 如果不能直接找你需要的元素,那么就考虑调用find()方法 $("#content").find("div"); 这样代码可以有效的缩小你定位的dom元素,为了提高性能建议从最近的ID元素开始往下搜索 2.标签选择器 $("p") 性能也不错的 它是性能优化的第二个选择器,因为jQuery会调取本地方法document.getElementsByTagName()来定位dom元素 3.$(".class") 这种方法比较复杂 要看浏览器是不是支持 document.getElementsByClassName(); 4.$("attribute=value") 对于利用属性来定位dom元素,本地JavaScript方法并没有实现,大多是通过dom搜索方式来达到效果 总体来说 性能并不是非常理想 5.$(":hidden") 和上面利用属性来定位DOM类似 这种伪选择器同样没有直接在本地Javascript 方法中实现,并且jQuery需要搜索每一个元素来定位这个选择器,这将对你的 应用带来比较大的性能问题,所以建议大家不要使用 .如果坚持使用这种方式,请先使用ID选择器定位父元素,然后再使用该选择器,这样对性能优化会有帮助 比如:$("#content").find(":hidden"); 二.缓存对象:如果对一个元素进行多次操作 就定义一个缓存变量 : var $test=$(#id") $test.bind("click",function(){ }) 三 .循环时的DOM操作 使用jQuery可以很方便的添加,删除,或者修改dom节点,但是一些循环,例如 for(),while(),或者$.each()处理节点的时候 //例如代码 var top_100_list=[.....];//假设这里是100个独一无二的字符串 $mylist=$("#mylist");//jQuery选择的<ul>元素 for(var i=0,1=top_100_list.length;i<1;i++){ $mylist.append("<li>"+top_100_list[i]+"</li>") } //以上代码,我们将每一个新添加的元素都作为一个节点添加到ID中,实际上jQuery操作消耗的性能也不低,所以更好的就是减少DOM操作 //这里应该讲整个元素字符串在插入DOM之前全部创建好,修改代码 var top_100_list=[.....];//假设这里是100个独一无二的字符串 var top_100_li=""; $mylist=$("#mylist");//jQuery选择的<ul>元素 for(var i=0,1=top_100_list.length;i<1;i++){ top_100_li += <li>"+top_100_list[i]+"</li>"; } $mylist.html(top_100_li); 四.数组当时使用jQuery对象 使用jQuery选择器获取一个jQuery对象,然而jQuery类库会让你感觉你在使用一个定义了索引和长度的数组. 在性能方面,建议使用简单for或者while循环处理,而不是$.each();这样会使你的代码更快. $.each(array,function(i){ array[i]=i; }); //使用for代替each(); var array=new Array(); for (var i = 0; i < array.length; i++) { array[i]=i; } //另外注意,检查长度也是一个检查jQuery对象是否存在的方式,下面一段代码通过length属性检查页面中是否含有id为"content"元素 var $content=$('#content'); if($content){ //do something 总是为true } if($content.length){ //do something 拥有元素才返回true } 五.事件代理 每一个javaScript事件(例如:click,mouseover等)都会冒泡到父级节点.当我们需要多个元素调用同个函数时这点会很有用. 比如,我们要为一个表格绑定这样的行为:点击td后把背景颜色设置红色,代码如下: $("#id td").click(function(){ $(this).css('background','red'); }) //假设有100个td元素,就会绑定了200个事件,这将带来负面的性能影响.代替这种效率差的多元素事件的监听方法就是,你只需要向他们 //父节点绑定一次事件,然后通过event.target获取到点击的当前元素 $("#id").click(function(e){ var $clicked=$(e.target);//捕捉到触发的目标元素; $clicked.css('background','red'); }); //在1.7之后提供新的方法on(),来帮助你将整个事件监听封装到一个便利的方法中 改进中你只为一个元素绑定了事件,显然性能方面会好些 $('#myTable').on('click','td',function(){ $(this).css('background','red'); }); 六.将代码转换成jQuery插件 如果你每次都需要花上一定的时间去开发类似的jQuery代码,那可以考虑将代码变成插件.它能够使你的代码有更好的重用性,并能帮助你组件代码.创建一个 插件的代码如下: (function($){ $.fn.yourPluginName=function(){ //your code goes here return this } })(jQuery); 七.使用join()连拼接字符串 尤其在长字符串处理的时候可以优化性能 var array=[]; for (var i = 0; i < array.length; i++) { array[i]='<li>'+i+'</li>' } $('#list').html(array.join(",")) </script> </body> </html>