Heim >Web-Frontend >js-Tutorial >jQuery 性能优化指南(3)_jquery

jQuery 性能优化指南(3)_jquery

WBOY
WBOYOriginal
2016-05-16 18:52:401118Durchsuche
8,尽量使用ID代替Class。
 

前面性能优化已经说过,ID选择器的速度是最快的。所以在HTML代码中,能使用ID的尽量使用ID来代替class。
看下面的一个例子:

// 创建一个list
var $myList = $('#myList');
var myListItems = '
    ';
for (i = 0; i
     myListItems += '
  • This is a list item
  • '; //这里使用的是class
     }
    myListItems += '';
    $myList.html(myListItems);
    // 选择每一个 li
     for (i = 0; i
        var selectedItem = $('.listItem' + i);
    }

    在代码最后,选择每个li的过程中,总共用了5066毫秒,超过5秒了。

    接着我们做一个对比,用ID代替class:

     

    // 创建一个list
    var $myList = $('#myList');
    var myListItems = '
      ';
    for (i = 0; i
        myListItems += '
  • This is a list item
  • '; //这里使用的是id
    }
    myListItems += '';
    $myList.html(myListItems);
     // 选择每一个 li
    for (i = 0; i
         var selectedItem = $('#listItem' + i);
    }

    在上段代码中,选择每个li总共只用了61毫秒,相比class的方式,将近快了100倍。
     
     

     

    9,给选择器一个上下文
     

    jQuery选择器中有一个这样的选择器,它能指定上下文。
    jQuery( expression, context );

    通过它,能缩小选择器在DOM中搜索的范围,达到节省时间,提高效率。
    普通方式:
    $('.myDiv')
    改进方式:
    $('.myDiv' , $("#listItem") )
     
     

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

    这是jQuery1.3.1版本之后增加的方法,这个方法的功能就是为 新增的DOM元素 动态绑定事件。
    但对于效率来说,这个方法比较占用资源。所以请尽量不要使用它。
    例如有这么一段代码:

    $(function(){
     $("p").click(function(){
         alert( $(this).text() );
     });
    $("button").click(function(){
        $("

    this is second p

    ").appendTo("body");
    });
    })

    this is first p

    运行后,你会发现 新增 的 p元素,并没用被绑定click事件。

    你可以改成.live("click")方式解决此问题,代码如下:

    $(function(){
    $("p").live("click",function(){ //改成live方式
         alert( $(this).text() );
     });
    $("button").click(function(){ $("

    this is second p

    ").appendTo("body"); });})

    但我并不建议大家这么做,我想用另一种方式去解决这个问题,代码如下:

    $(function(){
    $("p").click(function(){
        alert( $(this).text() );
    });
    $("button").click(function(){
        $("

    this is second p

    ").click(function(){  //为新增的元素重新绑定一次
                alert( $(this).text() );
        }).appendTo("body");
    });
    })

    虽然我把绑定事件重新写了一次,代码多了点,但这种方式的效率明显高于live()方式,
    特别是在频繁的DOM操作中,这点非常明显。


     

    11,子选择器和后代选择器

     

    后代选择器经常用到,比如:$("#list  p");
    后代选择器获取的是元素内部所有元素。

    而有时候实际只要获取 子元素,那么就不应该使用后代选择器。
    应该使用子选择器,代码如下:
    $("#list > p");

     

     

    12,使用data()方法存储临时变量

     

    下面是一段非常简单的代码,

    $(function(){

        var flag = false;

        $("button").click(function(){

            if(flag){

                $("p").text("true");

                flag=false;

            }else{

                $("p").text("false");

                flag=true;

            }

        });

    })

     

    改用data()方式后,代码如下:

    $(function(){

        $("button").click(function(){

            if( $("p").data("flag") ){

                $("p").text("true");

                $("p").data("flag",false);

            }else{

                 $("p").text("false");

                 $("p").data("flag",true);

            }

        });

    })


     

    jQuery性能优化指南(3)到此结束。
     
    相信你也有你的idea,请共享出来吧。 Email : cssrain@gmail.com
     
    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn