jQuery大量操作DOM时运行缓慢的优化建议

时间:12-07-11 栏目:问题及解决 作者:admin 评论:0 点击: 4,621 次

jQuery在作大量的DOM操作时,特别是使用非ID选择器时,速度会比较慢。

例如:

<input type="text" name="quota[8][0][comm_a]" value="2.5" />
//quota是一个上百的数组,操作费时(IE 5秒左右)

for(gameId=0;gameId<10;gameId++){

for(i=0;i<100;i++){
    $('input[name="quota['+gameId+']['+i+'][comm_a]"]').val(1);
    $('input[name="quota['+gameId+']['+i+'][comm_b]"]').val(2);
    $('input[name="quota['+gameId+']['+i+'][comm_c]"]').val(3);
    $('input[name="quota['+gameId+']['+i+'][comm_d]"]').val(4);
 }

}

这段代码是使用的input 的name进行筛选的结果。

优化方法一:将input 添加ID属性,使用ID筛选器进行选择。

 

<input id="q_8_0_a" type="text" name="quota[8][0][comm_a]" value="2.5" />
//quota是一个上百的数组,操作费时(IE 30毫秒左右)

for(gameId=0;gameId<10;gameId++){

for(i=0;i<100;i++){
    $('#q_'+gameId+'_'+i+'_a').val(1);
    $('#q_'+gameId+'_'+i+'_b').val(2);
    $('#q_'+gameId+'_'+i+'_c').val(3);
    $('#q_'+gameId+'_'+i+'_d').val(4);
 }

}

优化方法二:减少大量的选择器操作。

 

<input type="text" name="quota[8][0][comm_a]" value="2.5" />
//quota是一个上百的数组,操作费时(IE 30毫秒左右)
$('input[name*="comm_"]').each(function(){
    var name = $(this).attr('name');
    name = name.replace('quota[','').replace(/\]\[/g,',').replace(']','')
           .replace('comm_a','1').replace('comm_b','2').replace('comm_c','3').replace('comm_d','4');
    name = name.split(',');
    var gId = name[0];
    name = name.split(',');var dId = name[1];
    var cId = name[2];//
    var val = dataArray[gId]['my_quota'][dId][cId];
    $(this).val(qval<val?val-qval:0);
});

实验证明,使用jQuery 的ID选择器性能比其他选择器更好,但需要对原始的HTML内容添加ID属性。

也可以使用第二种优化的方式,是通过减少查找DOM的次数来达到优化的目的。

以上方法纯粹个人建议,如有更好的方法,欢迎指教。

声明: 本文由( admin )原创编译,转载请保留链接: jQuery大量操作DOM时运行缓慢的优化建议

jQuery大量操作DOM时运行缓慢的优化建议:等您坐沙发呢!

发表评论


------====== 本站公告 ======------
联系信息:
lxq73061#qq.com qq:583964941
支付宝:https://me.alipay.com/lxq73061
相关插件程序等信息均会在站内发布,敬请关注。

读者排行