当前位置:  编程技术>WEB前端

做好七件事帮你提升jQuery的性能

    来源: 互联网  发布时间:2014-08-25

    本文导语:  1. Append Outside of Loops 凡是触及到DOM都是有代价的。如果你向DOM当中附加大量的元素,你会想一次性将它们全部附加进来,而不是分多次进行。当在循环当中附加元素就会产生一个常见的问题。 代码如下:$.each( myArray, function( i, i...

1. Append Outside of Loops

凡是触及到DOM都是有代价的。如果你向DOM当中附加大量的元素,你会想一次性将它们全部附加进来,而不是分多次进行。当在循环当中附加元素就会产生一个常见的问题。

代码如下:

$.each( myArray, function( i, item ) {
    var newListItem = "
  • " + item + "
  • ";
        $( "#ballers" ).append( newListItem );
    });

    一个常用的技巧是利用文档片段(document fragment)。在循环的每一次迭代当中,将元素附加到片段而不是DOM元素当中。当循环结束后,将片段附加到DOM元素当中即可。

    代码如下:

    var frag = document.createDocumentFragment();

    $.each( myArray, function( i, item ) {

        var newListItem = document.createElement( "li" );
        var itemText = document.createTextNode( item );

        newListItem.appendChild( itemText );

        frag.appendChild( newListItem );

    });

    $( "#ballers" )[ 0 ].appendChild( frag );

    另一个简单的技巧是在循环的每次迭代当中,持续构建一个字符串。当循环结束后,将DOM元素的HTML设置成该字符串。

    代码如下:

    var myHtml = "";

    $.each( myArray, function( i, item ) {

        myHtml += "

  • " + item + "
  • ";

    });

    $( "#ballers" ).html( myHtml );

    当然还有其它一些技巧可以供你尝试。一个名为 jsperf 的站点为测试这些性能提供了一条好的出路。该网站允许你使用基准测试每一个技巧,并将其跨平台的性能测试结果可视化的展现出来。

    2. Cache Length During Loops

    在for循环当中,不要每次都访问数组的 length 属性;应当事先将其缓存起来。

    代码如下:

    var myLength = myArray.length;

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

        // do stuff

    }

    3. Detach Elements to Work with Them

    操作DOM是缓慢的,因此你想尽可能减少对齐进行操作。jQuery在1.4版本当中引入了名为 detach() 的方法来帮助解决这一问题,它允许你在对元素进行操作时,将它们从DOM当中分离出来。

    代码如下:

    var $table = $( "#myTable" );
    var $parent = $table.parent();

    $table.detach();

    // ... add lots and lots of rows to table

    $parent.append( $table );

    4. Don't Act on Absent Elements

    如果你正打算在一个空的选择器上运行大量的代码,jQuery并不会给予任何的提示 -- 它将会继续的执行,就像是没有发生任何的错误。必须由你来验证选择器包含了多少元素。

    代码如下:

    // Bad: This runs three functions before it
    // realizes there's nothing in the selection
    $( "#nosuchthing" ).slideUp();

    // Better:
    var $mySelection = $( "#nosuchthing" );

    if ( $mySelection.length ) {

        $mySelection.slideUp();

    }

    // Best: Add a doOnce plugin.
    jQuery.fn.doOnce = function( func ) {

        this.length && func.apply( this );

        return this;

    }

    $( "li.cartitems" ).doOnce(function() {


        // make it ajax! o/


    });

    本指南特别适用于那些当选择器不包含元素时还需要大量的开销的 jQuery UI 部件。

    5. Optimize Selectors

    选择器的优化和过去比起来并不是那么的重要,因为很多浏览器都实现了 document.querySelectorAll() 方法并且jQuery将选择器的负担转移到了浏览器上面。但是仍然有一些技巧需要铭记在心。

    基于ID的选择器

    以一个ID作为选择器的开始总是最好的。

    代码如下:

     // Fast:
     $( "#container div.robotarm" );

     // Super-fast:
     $( "#container" ).find( "div.robotarm" );

    采用 .find() 方法的方式将更加的快速,因为第一个选择器已经过处理,而无需通过嘈杂的选择器引擎 -- ID-Only的选择器已使用 document.getElementById() 方法进行处理,之所以快速,是因为它是浏览器的原生方法。

    特异性

    尽量详细的描述选择器的右侧,对于左侧则应反其道而行之。

    代码如下:

     // Unoptimized:
     $( "div.data .gonzalez" );

     // Optimized:
     $( ".data td.gonzalez" );

    尽量在选择器的最右侧使用 tag.class 的形式来描述选择器,而在左侧则尽量只使用 tag 或者 .class 。

    避免过度使用特异性

    代码如下:

     $( ".data table.attendees td.gonzalez" );

     // Better: Drop the middle if possible.
     $( ".data td.gonzalez" );

    去讨好“DOM”总是有利于提升选择器的性能,因为选择器引擎在搜寻元素时无需进行太多的遍历。

    避免使用通用选择器

    如果一个选择器明确或暗示它能在不确定的范围内进行匹配将会大大影响性能。

    代码如下:

     $( ".buttons > *" ); // Extremely expensive.
     $( ".buttons" ).children(); // Much better.

     $( ".category :radio" ); // Implied universal selection.
     $( ".category *:radio" ); // Same thing, explicit now.
     $( ".category input:radio" ); // Much better.
     Use Stylesheets for Changing CSS on Many Elements

    假如你使用 .css() 方法来改变超过20个元素的CSS,应当考虑为页面添加一个样式标签作为替代,这样做可以提升将近60%的速度。

    代码如下:

     // Fine for up to 20 elements, slow after that:
     $( "a.swedberg" ).css( "color", "#0769ad" );

     // Much faster:
     $( "a.swedberg { color: #0769ad }")
         .appendTo( "head" );
     Don't Treat jQuery as a Black Box

    把jQuery的源码当成文档,可以把它(http://bit.ly/jqsource)保存在你的收藏夹内,经常的查阅参考。


        
     
     

    您可能感兴趣的文章:

     
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 我的JAVA网站,刚做好的,不,还没有做好,大家是否有兴趣一块做?
  • 请问:这样做好不好
  • 100分求救,谁有做好的关于JSP于数据库操作的源代码?
  • 我能不能在windows2000下做好java程序,再转到linux上啊?
  • -------------- 请问大家,做好一个PCI设备驱动了,如何做个应用程序来使用这个驱动呢??
  • 帮忙写一个脚本程序(做好马上加分)
  • JSP文件做好后如何上传?
  • 在jbuider5里面 怎么生成 .exe文件?做好的工程又该怎么打包?
  • vmware可以把已经做好的系统全盘弄到一个新的物理硬件机器上吗?
  • 各位大哥哥好!MM我刚做好了一个小小的个人主页,请问哪儿有免费的jsp空间,还有上传后,怎样与现有的数据库建立连接?
  • 黑客如何攻击C/S的银行系统?有没有这方面的资料?银行如何做好防范?
  • 请问做好的驱动,发布给用户的时候,用户必须要在各自的Linux中重新编译驱动源码才能使用吗?
  • 请问哪里有JSP 运行环境 所需的各种软件下载(做好有IIS 的插件)?
  • 各位大虾!!如果我用jdbc-odbc桥的数据库驱动,那岂不是当在本地机上做好网站之后,还需要在服务器上重新定义数据苦于数据源!但这是不
  • 我的做好的APPLET中有SWING的组件,我在IE中不能显示出来,请告诉我在哪里下载插件?
  • 三招助你做好Oracle数据库备份测试
  • 大家来谈谈关于用flash做前台好还是用html做好,有见解的都有分。
  • 调了两天,不知为何出错!!请大虾帮忙!!我做的一个登陆系统,注册与登陆做好了,但是在修改用户信息是出错,不知为何??


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3