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

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的次数来达到优化的目的。

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