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调用。

  • 相关阅读:
    WPF Caliburn 学习笔记(五)HelloCaliburn
    MSDN 教程短片 WPF 20(绑定3ObjectDataProvider)
    MSDN 教程短片 WPF 23(3D动画)
    比赛总结一
    HDU3686 Traffic Real Time Query System
    HDU3954 Level up
    EOJ382 Match Maker
    UESTC1565 Smart Typist
    HDU3578 Greedy Tino
    ZOJ1975 The Sierpinski Fractal
  • 原文地址:https://www.cnblogs.com/shawnblogs/p/4817529.html
Copyright © 2011-2022 走看看