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

Question

前台页面显示一个若干行列的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'));
}优化firebugeasyUI

Answer 1

可以考虑先把 $('<table class="tbl">') append 到 $('.divTable')
然后在循环体中创建 $("<tr><td>...</td></tr>") append 到 table 中

Answer 2

谢谢回复,另外C#中的字符串拼接String.Join和String.Concat要比+=效率高,JS中是否有这样的函数?

Answer 3

可以考虑在后端生成html，然后传过来。
令，.html()与.append()哪一个效率高？可以一试

Answer 4

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

Answer 5

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

Answer 6

一,Table中有五十个cell,数据应该不算多!涉及都交互,并且完整一屏能放下,不考虑分页!
二,传输的数据,我考虑把json字符串是否还能压缩!

Answer 7

1,不考虑分页
2,事件委托的思路,能否用代码解释一下?
3,好思路,我马上试试,只是js中的string数组允许多大的长度?

Answer 8

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长度超了，其它环节早跨了

Answer 9

嗯,请教您分布的意思把这个Table中的五十个被投票人选项逐步显示吗?

Answer 10

事件委托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');

Answer 11

my god,大牛! 受教了!
请问我用jquery的 $.each 是不是比js的for循环要快一些?

Answer 12

谢谢,明白了,如果以后多了,考虑jquery的异步加载! 
数据目前就50条,数据传输的时间不多,在页面渲染阶段有明显的延迟.

Answer 13

javascript代码优化技巧

Answer 14

这是关于html和append在不同浏览器下渲染的比较结果!
http://jsperf.com/jquery-append-vs-html

Answer 15

jQuery的each飞常满，性能非常差，能不用就不要用，因为每个jQuery对象都太大了，会影响速度的，JS的原生的for是效率最高的了。

Answer 16

1）字符串＋ 用  数据的push  最后用 数组的join 来声称连续字符串
2）把要添加数据的最外层容器 先隐藏 添加完了在显示
3）可以考虑 整个添加过程 用settimeout

Answer 17

还不知道jquery有这方面的功能

Answer 18

我试试2)
3）可以考虑 整个添加过程 用settimeout ,用这个函数,每隔一秒追加一行吗? 请用代码指教

Answer 19

字符串用数组push连接的同学，还停留在IE6

Answer 20

25楼说的真没错,现在的新浏览器字符串拼接都快于数组的push然后join

Answer 21

str += '<td class="clsOne">' + rsp[j].Age+ '</td><td class="clsTwo"><input id="' + rsp[j].NumberTotal+ '" class="easyui-slider"/></td>';这段代码可以写成
var resObj = rsp[j];str = str + '<td class="clsOne">' + resObj.Age+ '</td><td class="clsTwo"><input id="' + resObj.NumberTotal+ '" class="easyui-slider"/></td>';效率就不一样了
第一段代码用 += 但后面还有多个 + 字符连接，这里会重复拷贝逐渐变大的字符串
而第二段代码，只是简单的将后面的字符串拷贝到str末尾而已

Answer 22

谢谢星星的回复,我写个测试,看看你的方法和push join 的时间差别

Answer 23

我的初步测试结果 你参考一下:读取记录五十条左右! win7 64bit 6G内存 2.4G双核
                  FireFox18     Chrome25      IE8
 join push方式      681ms          306ms       1234ms
 string拼接方式      435ms          335ms       1675ms整体来说还是 join push 方式效率高

Answer 24

使用DOM生成会加快点速度，你用html的话，jquery还要翻译成DOM才能添加到DOM树中，这样就会慢点，其次你每次这样添加的话必定会浪费内存，而使用DOM添加的话可以使用DOM碎片制造一个缓存，这样可以节省内存，最后是，我觉得大家应该都学学Cocoa，其中对于表格的处理都有一个缓存cell，避免同样样式的cell重复浪费内存，浏览器最大的卡速度就是网速何DOM，其他的什么处理都是一点点资源，这两个搞定了，基本就不会卡了

Answer 25

用JS做界面关键是要学会用异步处理，特别是大运算处理时浏览器会占用过多CPU处理时间而把界面渲染都跳过了，所有界面处理部分千万不要简单的放在for循环或者while循环里，而是将大运输分块然后每处理完小块后进行界面渲染最后做一个小延时再继续执行下一块，这样就不会堵塞掉界面的渲染了！

Answer 26

谢谢,看看这个 http://stackoverflow.com/questions/8734786/javascript-effectively-build-table-from-json-and-add-it-to-dom

Answer 27

这年头莫非都是jQuery太好用，都用多了？服务器端直接把结果HTML发过来和发个JSON数据过来能差几毛钱的时间？难道是传说中的为了节省带宽？

Answer 28

话说字符串拼接真的有那么不堪吗。
发一段测试代码：
var s = ""
var start = new Date().getTime();
for(var i=0;i<3000000;i++){
    s+="hello world! "
}
var end = new Date().getTime();
console.log(end - start)var arr = [];
var start = new Date().getTime();
for(var i=0;i<3000000;i++){
    arr.push("hello world! ");
}
s = arr.join("");
var end = new Date().getTime();
console.log(end - start)/*firefox:6313
          7309
  chrome: 4762
          3997
*/看样子哪个效率高还得看浏览器了，嘎嘎

Answer 29

只给你在原有基础上改改 showbo大哥给你发的连接如果你都吸收了 性能优化你应该知道优化点在哪 
另外：JQ的方法你如果看了底层实现的话 一样有很多地方可以优化改进 希望能对你有帮助。var cols = Math.ceil(count / rows);
var str = [];
str.push('<table class="tbl">', '<tr>')
for (var i = 0; i < cols; ++i) {
str.push('<th  >列名1</th><th  >列名2</th>');
}
str.push('</tr>');
for (var i = 0; i < rows; ++i) {
str.push('</tr>');
for (var j = 0 + i; j < count; j = j + rows) {
var item = rsp[j];
str.push('<td class="clsOne">' + item.Age
+ '</td><td class="clsTwo"><input id="' + item.NumberTotal
+ '" class="easyui-slider"/></td>');
}
str.push('</tr>');
}
str = str.join("");
str += '</table>';
$('.divTable').append(str);

Answer 30

谢谢 我改用了类似你的push方法,并且发现 innerHTML 在IE8中不支持 嘎嘎