(JS):求教前台页面JS渲染Table的优化方法

(JS高手请进):求教前台页面JS渲染Table的优化方法
前台页面显示一个若干行列的Table,行列数由后台服务器传递的总记录来计算,通过Firebug可以查看到数据传授到前后至正常显示Table的这段时间很长,用户估计等不及,所以我认为JS的代码有很大的优化空间,请教这里的JS高手,怎么优化这段js代码.页面需要easyUI的Slider控件!

function renderTable(rsp) {
    var count =rsp.length ;//总记录数
    var rows = 20;
    var cols = Math.ceil(count / rows);

    var str = '<table class="tbl">';
    str += '<tr>';

    for (var i = 0; i < cols; ++i) {
        str += '<th  >列名1</th><th  >列名2</th>';
    }
    str += '</tr>';

    for (var i = 0; i < rows; ++i) {
        str += '<tr>';
        for (var j = 0 + i; j < count; j = j + rows) {
            str += '<td class="clsOne">' + rsp[j].Age+ '</td><td class="clsTwo"><input id="' + rsp[j].NumberTotal+ '" class="easyui-slider"/></td>';
        }
        str += '</tr>';
    }
    str += '</table>';
    $('.divTable').append(str);
    $('.easyui-slider').slider({
        showTip: true,
        min: 0,
        max: 150,
        step: 1,
        tipFormatter: function (value) {
            return value + '岁';
        }
    });
 //table渲染css
    $("tr").not(':first').hover(
  function () {
      $(this).css("background", "red");
  },
  function () {
      $(this).css("background", "");
  });
      $.parser.parse($('#frmName'));
}

优化 firebug easyUI
[解决办法]
1 你数据太多，用什么方法都卡，考虑分页，或分步载
2 .hover 事件邦定改成live 用事件委托
3. 拼接str改成 var strs=[] ;strs.push(..) 用数组

[解决办法]

引用:

谢谢回复,另外C#中的字符串拼接String.Join和String.Concat要比+=效率高,JS中是否有这样的函数?
引用:可以考虑先把 $('<table class="tbl">') append 到 $('.divTable')
然后在循环体中创建 $("<tr><td>...</td></tr>") append 到 t……

你可以声明一个数组来保存数据，把+=的操作换成数组的push()，最后append()的时候，join("")一下。
var str = [];
str.push('<table class="tbl">');

....
$('.divTable').append(str.join(''));

[解决办法]
1,不考虑分页,可以考虑分步
2，事件委托，不用在每个元素上邦定事件，在他们的父邦一个事件统一管理
 你上面代码改成，只要在.tbl（table）上邦一个事件就可以了
 $('.tbl').live('mouseover',function(evt){
    var tr=$(evt.target);
    if(!tr.index()) tr.css("background", "red");
  });
  $('.tbl').live('mouseout',function(evt){
     $(this).css("background", "");
  });

3，string长度应该没有，真的连string长度超了，其它环节早跨了

[解决办法]
事件委托1.4以前可以用live，1.4之后可以用delegate，1.7之后用on，在1.9里live和delegate都被移除了，只能用on了，参考：http://blog.csdn.net/borishuai/article/details/8115277
delegate的代码：

$('.tbl').delegate('tr','hover', function( event ) {
    if( event.type === 'mouseenter' )  
        $(this).css("background", "red");
    else
        $(this).css("background", "");  
});

on的写法：

$('.tbl').on(
{
    mouseenter: function() 
    {
        //stuff to do on mouseover
    },
    mouseleave: function()
    {
        //stuff to do on mouseleave
    }
}
, 'tr');

[解决办法]
javascript代码优化技巧