zoukankan      html  css  js  c++  java
  • JQuery 性能优化

     一、合适的选择器

         JQuery 选择器提供丰富的选择器来定位DOM元素,

         基本选择器

         #id、.class、element、*等;那他们哪个更高效呢?

         第一选择:

         $("#id")

         第二选择:

         $("p"),$("div")

         第三选择(选择性使用) :

         $(".class") 

         第四选择

         $("[attribute =value"])

         第五选择(伪选择器,其属于 JQuery 过滤选择器中的可见性过滤选择器)

         $(":hidden")  

     

         PS:1、尽量选择Id选择器,

                 2、给选择器指定上下文

        其类似于CSS选择器,CSS选择器中三大特性 --特殊性、继承、层叠中的特殊性:

                1、对于选择器给定的各个ID属性值(#id):加上  0,1,0,0

                2、对于选择器给定的各个类属性值(.class、属性选择、伪类如:visited、:link ) :  加上0,0,1,0

                3、对于选择器给定的各个元素(element): 加上0,0,0,1

       例子:html >body table tr[td="totals"] td ul > li 则为0,0,0,7+ 0,0,1,0 =  0,0,1,7;

                  li #answer 则为0,0,0,1 + 0,1,0,0 = 0,1,0,1 

       根据这种运算可以得出胜出规则:

       比如:0,1,0,1 大于 0,0,1,7 ,则其特殊性越高。选择的优先级越高。

       * 属于通配选择器,其是 0 特殊性

     

     

    二、数组方式使用JQuery对象

     在性能方面,建议使用for 或者 while 来处理,而不是$.each()

     如:

     $.each(array ,function (i)) {

       array[i] = i ;

      }

     改为:

      var array = new Array ();

      for (var i = 0 ;i< array.length ;i++) {

      array[i] = i;

    }

     

     

    三、事件代理

     例子: 单击单元格,单元格变色

     $('#table td").click(function()) {

        $(this).css("backgroud","blue") ;

     }

    如果表格有100个td单元格,那么就绑定了100个事件,性能会很差。

    可以使用事件代理:

       $('#table").click(function(e)) {

       var $clicked = $(e.target); // e.target 得到触发的目标元素

        $clicked.css("backgroud","blue") ;

     }

      其只绑定一个事件,性能提高

     

    四、join 拼接字符串

    将数组转换为字符串

    一般在长字符串时,这个性能提升才会明显

     var array = [] ;

     for(var i = 0 ; i< 100; i++){

      array[i] = '<li>'+i+'</li>';

    }

    $("#list").html(array.join(' '));

    可以联系Java中StringUtils 的Join(), 以及StringBulider,StringBuffer的用法比较使用。

     

    五、使用原生的JS方法

    常用判断一个多选框是否选中:

     var $ck = $("#ck");

     $ck.click(function()) {

     if($ck.is(":checked")) {

       alert("checked");

    }

    })

    改为:

     var $ck = $("#ck");

     var  ck = $ck.get(0); // JQuery 对象转化为DOM对象,其有2种方式 JQuert.get(0)或者JQuery[0]

     $ck.click(function()) {

     if(ck.checked)) {

       alert("checked");

    }

    })

     

    六、尽量使用JQuery优雅的链式操作

    其可以减少对象的随意创建,也可以创建一个对象到全局环境,让其他函数function调用。

  • 相关阅读:
    巡回赛 -- 简单的拓扑排序
    最简单的拓扑排序
    blockhouses
    部分和问题
    jfinal路由简单解析
    python mysql
    Gradle--ubuntu
    解决ssh登录后闲置时间过长而断开连接
    业界有很多MQ产品
    avalon---qunar ued
  • 原文地址:https://www.cnblogs.com/shawnblogs/p/4817529.html
Copyright © 2011-2022 走看看