• jquery选择器效率优化问题


    jquery选择器效率优化问题

      jquery选择器固然强大,但是使用不当回导致效率问题;

    1.要养成将jQuery对象缓存进变量的习惯

         //不好的写法
         $('#btn').bind("click",function() {});
         $('#btn').css("border","1px solid red");
         $("#btn").css("background-color","green");
         $("#btn").fadeIn("slow")
         //正确写法;
         var $obj=$("#btn");
         $obj.bind("click",function (){});
         $obj.css("border","1px solid red");
         $obj.css("background-color",'green');
         $obj.fadeIn("slow");
         
         //为了区分普通的JavaScript对象和jQuery对象,可以在变量首字母前加上$符号。
       //上面代码可以使用jQuery的链式操作加以改善。如下所示:
         var $obj=$("#btn");
         $obj.bind("click",function (){})
         .css("border","1px solid red")
         .css("background-color",'green')
         .fadeIn("slow");

    2.能有id则用id

    毫无疑问jq中最快的选择器是id选择器,因为它直接对应着我们的javascript的document.getElementsById();

    HTML

    <div id="outer">
        <div id="inner">
        <input type="text"  class="txt" />
        <input type="button" class="test" id="btn" value="click"  />
        </div>
    </div>

    js

       //不好的写法 
        var obj=$("#outer .test");
        //直接获取就行了
        var obj=$("#btn");
    
        var obj=$("#inner input.txt")
        ////建议从最近的ID开始继承
        var obj=$('input.txt') 
        
        //不建议使用tag来修饰id 有种化蛇天足的感觉
        var obj=$("div#outer");
        //或者
        var obj=$("#outer#inner");

    实例二

    html 

      <ul id="list">
        <li class="li0">1</li>
        <li class="li1">2</li>
        <li class="li2">3</li>
      </ul>
        <ul id="list1">
        <li id="li0">1</li>
        <li id="li1">2</li>
        <li id="li2">3</li>
      </ul>

    js

        
        for(var i=0;i<3;i++){
          $('.li'+i)    
        }
        //相比之下,还是比较推荐第二种写法
        for(var j=0;j<3;j++){
           $('#li'+i);    
        }

    ps:也可以给选择器指定一个上下文;

         var list=$('.mydiv');
        
         var outer=$('#outer');
         var list=$('.mydiv',outer);

    3.如果你打算在其他函数中使用jQuery对象,那么你必须把它们缓存到全局环境中

    window.$obj={head:$('head'),obj:$('#outer')};
        function do_something(){
          var script=document.createElement("script");
          $obj.head.append(script);
          $obj.obj.css("border","1px solid red");    
        }
        //这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM。
        //这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 
        
        //不好的做法;
        for(var i=0;i<100;i++){
           $("#content").append('<span>index='+i+'</span>');    
        }
        //推荐写法;
        var html="";
        for(var i=0;i<100;i++){
            html+='<span>index='+i+'</span>';
        }
        $('#content').append(html);

     4.我们要为一个拥有很多输入框的表单绑定这样的行为:当输入框被选中时为它添加一个class

     除非在特殊情况下,否则每个js事件(click,mouseover)都会冒泡到父级节点,当我们需要给多个元素调用同一个函数时候,

     这点可能会有用,代替这种效率很差的多元素监听的方法是:你只需向他们的父节点绑定一次就ok了;

    //不好的写法
        $("#formId input").bind("focus",function (){
            $(this).addClass('selected').bind("blur",function (){
              $(this).removeClass('selected');    
            })
         })
        //推荐写法;
        $("#formId").bind("focus",function (e){
              var $cell=$(e.target);
            //e.target捕捉到触发的目标元素
            $cell.addClass('selected');
        }).bind('blur',function (e){
            var $cell=$(e.target);
            $cell.removeClass('selected');    
        
        });
        
        //比如:
        $("#mytable td").click(function (){    
            $(this).css('background','red');
        })
        //改进方式
        $("#mytable").click(function (e){
          var $clicked=$(e.target);
          $clicked.css('background','red');    
        })
        //总结
        //假设有100个td,在使用普通的方式的时候,你绑定了100个事件。在改进方式中,
        //你只为一个元素绑定了1个事件,至于是100个事件的效率高,还是1个事件的效率高,
        //相信你也能自行分辨了。

    5.推迟到 $(window).load

    尽管$(document).rady 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行。如果你发现你的页面一直是载入中的状态,

    很有可能就是$(document).ready函数引起的。你可以通过将jQuery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。

    它会在所有的html(包括<iframe>)被下载完成后执行。

    以下是引用片段:
    $(window).load(function(){
    // 页面完全载入后才初始化的jQuery函数.
    });

    一些特效的功能,例如拖放,视觉特效和动画,预载入隐藏图像等等,都是适合这种技术的场合。

    6.压缩JavaScript

    7.10.慎用 .live()方法(应该说尽量不要使用)

    jQuery1.3.1版本之后增加的方法,这个方法的功能就是为 新增的DOM元素 动态绑定事件

    8.子选择器和后代选择器 

        $("#outer div"); //后代选择器
        
        $("#outer>div")  //子选择器
        
        //应该根据具体的情况来选择使用

    9.使用data()方法存储临时变量

        //应该根据具体的情况来选择使用
        
        //关于data的使用滴呀
        //就能在一个元素上存放任何格式的数据,而不仅仅是字符串
        
        var temp='temp';
        var obj={name:'jack',age:18};
        var bodyData=$(document.body);
        bodyData.data("temp",temp);
        bodyData.data("obj",obj);
        
        alert(bodyData.data("temp"));
        alert(bodyData.data("obj").name);
        //移除data
        bodyData.removeData("temp");
        bodyData.removeData("obj");
        
        alert(bodyData.data("temp")); //undefined
        alert(bodyData.data("obj").name);//undefined
        
        //具体的实例;
        var flag=false;
        $("#btn").click(function (){
          if(flag){
            //do xx
            flag=false;
          }else{
            //do yy
            flag=true;  
          }
        })
        
        //使用data改进后的代码;
        $("#btn").click(function (){
          if($('p').data('flag')){
             //do xx
             $('p'.data('flag',false))
          }else{
            //do yy
            $('p').data('flag',true)  
          }
        })

     10.使用toggleClass来优化

          //方式一
          $("#temp").mouseover(function (){
             $(this).addClass('color')
          })
          
          $("#temp").mouseout(function (){
              
            $(this).removeClass('color');
          })
          
          //方式二
          $("#temp").mouseover(function (){ 
            $(this).addClass("color"); 
          }).mouseout(function (){
             $(this).removeClass("color");
          })
          
          //方式三
          $("#temp").hover(function (){
             $(this).toggleClass('color');  
          })
  • 相关阅读:
    福大软工 · 第八次作业(课堂实战)- 项目UML设计(团队)
    福大软工1816 · 第六次作业
    2018软工实践——团队答辩
    福大软工1816 · 第五次作业
    福大软工1816 · 第二次作业
    福大软工1816 · 第一次作业
    个人作业——软件产品案例分析
    第二次结对编程作业--毕设导师智能匹配
    结对项目之需求分析与原型设计
    调研《构建之法》指导下的全国高校的历届软工实践作品、全国互联网+竞赛、物联网竞赛等各类全国性大学生信息化相关的竞赛平台的历届作品
  • 原文地址:https://www.cnblogs.com/mc67/p/5373759.html
Copyright © 2020-2023  润新知