前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery官方性能优化建议

jquery官方性能优化建议

作者头像
dys
发布2018-04-02 17:16:11
1.4K0
发布2018-04-02 17:16:11
举报
文章被收录于专栏:性能与架构

jquery的官网上给出了6点性能方面的建议:

(1)在循环外面做append操作

DOM操作是有成本的,一次性append要比循环中每次都append要好很多

下面这种操作方式是一种普遍的现象,在循环中每次都执行append

代码语言:javascript
复制
$.each( myArray, function( i, item ) { 
    var newListItem = "<li>" + item + "</li>"; 
    $( "#ballers" ).append( newListItem ); 
});

建议创建一个fragment,在循环中 把内容append到fragment,最后把这个fragment append到dom节点

代码语言:javascript
复制
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 );

或者在循环中构造字符串,最后把字符串设置到节点中

(2)循环时缓存length

循环中,不要每次都访问length熟悉,应在循环开始前把length值缓存起来

代码语言:javascript
复制
var myLength = myArray.length; 
for ( var i = 0; i < myLength; i++ ) { 
    // ... 
}

(3)操作子节点时 先把子节点Detach出来

DOM操作较慢,应尽量避免大量操作,如果想对某节点内部做一些操作,应先把子节点都移出来,对这些子节点操作完成后再放回去

代码语言:javascript
复制
var table = $( "#myTable" );
var parent = table.parent();
table.detach();
// 执行对table的各种操作
parent.append( table );

(4)不要对空节点进行操作

如果你对空对象操作时,jquery是不会告诉你的,因为对空操作时开销也不小,所以应该自己验证一下是否为空,以免做很多无效操作

代码语言:javascript
复制
// 糟糕的方式
$( "#nosuchthing" ).slideUp();
// 好的方式
var elem = $( "#nosuchthing" );
if ( elem.length ) {
    elem.slideUp();
}
// 更好的方式
jQuery.fn.doOnce = function( func ) { 
    this.length && func.apply( this ); 
    return this; 
} 
$( "li.cartitems" ).doOnce(function() { 
    // ...
});

(5)选择器优化

1)使用ID选择器

选择器以ID开始总是最好的

// 快

$( "#container div.robotarm" );

// 更快

$( "#container" ).find( "div.robotarm" );

第二种方式更快是因为使用了浏览器原生支持的document.getElementById()

2)右边尽量指定得详细点 而左边则尽量简单点

// 不好

$( "div.data .gonzalez" );

// 好

$( ".data td.gonzalez" );

因为选择器是从右面开始查找的,所以右面越明确,查找越快

3)避免冗余

// 不好

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

// 好

$( ".data td.gonzalez" );

4)避免通用选择器

通用选择器在任何地方出现都会很慢

$( ".buttons > *" ); // 及其慢的

$( ".buttons" ).children(); // 优化的

$( ".category :radio" ); // 隐式通用选择器,没明确指定*,但实际还是会使用

$( ".category *:radio" ); // 显示通用选择器

$( ".category input:radio" ); // 优化的

(6)修改多个节点的css时,使用样式表

如果你正在使用css()对20个以上节点修改css,使用style标签来代替,会提速将近60%

// 对20个以上的节点进行CSS操作,这样比较慢

$( "a.swedberg" ).css( "color", "#0769ad" );

// 这样会快很多

$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")

.appendTo( "head" );

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2015-09-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 JAVA高性能架构 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档