时间:12-07-11 栏目:问题及解决 作者:admin 评论:0 点击: 9,596 次
本文标签: jQuery
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="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时运行缓慢的优化建议
------====== 本站公告 ======------
联系信息:
电话:19970108113(微信同号) QQ:3142401606
支付宝:https://me.alipay.com/lxq73061
相关插件程序等信息均会在站内发布,敬请关注。