Javascript和非常长的字符串

Question

我遇到以下代码问题:

function showTableData()
{
    var tableArray;
    var x = 0;
    var theHTML;

    for (i = 0; i < 7032; i++)
    {
        if (x = 0)
        {
            theHTML = '<tr>' + 
                '<th scope="row" class="spec">' + partNum[i] + '</th>' + 
                '<td>' + Msrp[i] + '</td>' + 
                '<td>' + blah[i] + '</td>' + 
                '<td>' + blahs[i] + '</td>' + 
            '</tr>' + theHTML;
            x++;
        }else{
            theHTML = '<tr>' + 
                '<th scope="row" class="specalt">' + partNum[i] + '</th>' + 
                '<td class="alt">' + Msrp[i] + '</td>' + 
                '<td class="alt">' + blah[i] + '</td>' + 
                '<td class="alt">' + blahs[i] + '</td>' + 
            '</tr>' + theHTML;
            x--;
        }
    }
    theHTML = '<table id="mytable" cellspacing="0">' + 
    '<tr>' + 
        '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>' + 
        '<th scope="col" abbr="Dual 1.8">Msrp Price</th>' + 
        '<th scope="col" abbr="Dual 2">blahs Price</th>' + 
    '<th scope="col" abbr="Dual 2.5">Low Price</th>' + 
    '</tr>' + theHTML + '</table>';

    $('#example').append(theHTML);
}
 </script>

 <div id="example">
 </div>

问题是$('#example').append(theHTML); 从不执行(或在页面上显示).我认为这是因为字符串太长了!它在阵列中有超过7,000个项目,所以我不确定这是因为它的原因还是其它的东西？

任何帮助都会很棒!谢谢!

大卫

Answer 1

除了if (x = 0)那应该是真的if (i % 2 === 0),你真的应该通过使用Array.join()方法而不是连接字符串来提高性能.这将与C#或Java中的StringBuilder具有类似的效果.

例如:

function showTableData()
{
    var tableArray;
    var theHTML = [];
    theHTML.push('<table id="mytable" cellspacing="0">',
    '<tr>', 
        '<th scope="col" abbr="Configurations" class="nobg">Part Number</th>', 
        '<th scope="col" abbr="Dual 1.8">Msrp Price</th>',
        '<th scope="col" abbr="Dual 2">blahs Price</th>', 
    '<th scope="col" abbr="Dual 2.5">Low Price</th>', 
    '</tr>');

    for (var i = 0; i < 7032; i++)
    {
        if (i % 2 == 0)
        {
             theHTML.push('<tr>', 
                 '<th scope="row" class="spec">', partNum[i], '</th>',
                 '<td>', Msrp[i], '</td>', 
                 '<td>', blah[i], '</td>', 
                 '<td>', blahs[i], '</td>', 
             '</tr>');
        } else {
             theHTML.push('<tr>',
                 '<th scope="row" class="specalt">', partNum[i], '</th>', 
                 '<td class="alt">', Msrp[i], '</td>', 
                 '<td class="alt">', blah[i], '</td>', 
                 '<td class="alt">', blahs[i], '</td>',
             '</tr>');
        }
    }
    theHTML.push('</table>');

    $('#example').append(theHTML.join(''));
}
 </script>

 <div id="example">
 </div>

追加字符串'my' + ' appended' + ' string'比连接字符串慢的原因['my', ' joined', ' string'].join('')是因为JavaScript字符串是不可变的,因此在前一个示例中,每次连接2个字符串时都会创建第三个字符串,与将新条目添加到数组相比,这是一个非常昂贵的操作.

另请参阅使用Array.push()和Array.join()相同原理构建的Javascript StringBuilder项目.

IE中10,000个连接项目的性能改进从1分钟下降到0.23秒.

更新:添加了对Array.join()的附加调用以替换for循环中的字符串连接,这是为了进一步提高客户端渲染速度.+添加了更好的StringBuilder链接.

进一步更新: Hemlock添加了建议:

1. 通过var i = 0在for循环中定义来删除对全局范围变量的使用
2. 使用Array.push()的多个参数一次推送几个字符串.