jQuery一些性能优化简述

<!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>
aqlserver的分页
jQuery一些 性能优化简述

jQuery一些性能优化简述
