码迷,mamicode.com
首页 > Web开发 > 详细

Jquery 代码性能改善

时间:2014-08-01 04:40:31      阅读:321      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   java   使用   os   strong   io   

从jquery官网看到的,简单翻译了一下,很常规的几个改善方法:

1:  在循环之外添加 (Append Outside of Loops)

  比如代码1:

代码1清单:

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

由于DOM操作会带来开销,所以每次循环都操作DOM,性能会差。推荐用一个字符串缓存需要添加的HTML内容,循环之后进行Append。

1  var str = [];
2 $.each( myArray, function( i, item ) {
3  
4      str.push("<li>" + item + "</li>");
5 
6 });
7  $( "#ballers" ).append( str.join(‘‘);

 

2: 缓存循环的长度

这个好像地球人都知道:

 

1 var myLength = myArray.length;
2  
3 for ( var i = 0; i < myLength; i++ ) {
4  
5     // do stuff
6  
7 }

 

当然并不是所有的时候都要缓存一下循环的长度。比如要循环删除DOM节点的子节点,因为长度在每次删除子节点后都会变化。所以经验不是简单拿来用哦。

3: 使用detach方法  Detach Elements to Work with Them

   好吧,我承认到现在还不知道detach是干嘛的,先把官网的东西拿下来,明日继续研究detach吧。

官网上这么说的:当想尽量少的操作某个DOM的时候,可以用detach方法:

1 var table = $( "#myTable" );
2 var parent = table.parent();
3  
4 table.detach();
5  
6 // ... 要添加超多的row到table上
7  
8 parent.append( table );

4:不要在不存在的DOM元素上进行操作   Don’t Act on Absent Elements

    

 1 // Bad: This runs three functions before it
 2 // realizes there‘s nothing in the selection
 3 $( "#nosuchthing" ).slideUp();
 4  
 5 // Better:
 6 var elem = $( "#nosuchthing" );
 7  
 8 if ( elem.length ) {
 9  
10     elem.slideUp();
11  
12 }

 

貌似我们很少去操作不存在的DOM元素,不过官网很快说了,在使用JQuery UI Widget的时候,这个原则非常实用,因为即使这个选择器不包含任何元素,开销也是很大滴!

 

4:优化选择器 Optimize Selectors

     这个其实简单点,就是尽量缩小选择器筛选的范围。ID选择器是最快的。

 

 5:当用改变众多元素样式的时候使用样式表而不是用css方法
// Fine for up to 20 elements, slow after that:
$( "a.swedberg" ).css( "color", "#0769ad" );
 
// Much faster:
$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")
    .appendTo( "head" );

  

 

Jquery 代码性能改善,布布扣,bubuko.com

Jquery 代码性能改善

标签:style   blog   color   java   使用   os   strong   io   

原文地址:http://www.cnblogs.com/xinchuang/p/3883768.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!