欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery 性能优化指南(3)_jquery

程序员文章站 2023-12-22 17:20:28
...
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
    jQuery 性能优化指南(3)_jquery

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • jQuery 性能优化指南(3)_jquery
  • 专题推荐

    作者信息
    jQuery 性能优化指南(3)_jquery

    认证0级讲师

    推荐视频教程
  • jQuery 性能优化指南(3)_jqueryjavascript初级视频教程
  • jQuery 性能优化指南(3)_jqueryjquery 基础视频教程
  • 视频教程分类
    相关标签: jQuery 性能优化

    上一篇:

    下一篇: