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 (i % 2 === 0) 的 if (x = 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 strings are immutable所以在前面的例子中，每次连接两个字符串时都会创建第三个字符串，这是一个非常昂贵的操作将新条目添加到数组中。

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

该项目在 IE 中 10,000 次连接的性能改进从 1 多分钟下降到 0.23 秒。

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

进一步更新：添加了 Hemlock 的建议：

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

Answer 2

我看到的一个错误是 if (x = 0) 应该是 if (x == 0)，除了它似乎对我有用：http://jsfiddle.net/9vvJ6/

Answer 3

这一行：

if (x = 0)

不应该吗

if (x == 0)

可能是这里的错误导致脚本的其余部分无法执行。

Answer 4

如果您已经在此处使用 jQuery，您可能想在此处考虑jQuery templates，它很可能会清理您的代码并让您的生活更轻松。可能存在性能权衡（但我认为字符串插值比 JavaScript 中的字符串连接更快，所以这甚至可能更快？），但是你可能会或可能不会失去性能，这是一个更优雅的解决方案。您可以将整个模板保存在一个地方（可能是一个外部文件，或者它的一部分隐藏在文档的 DOM 中，我没有使用它来告诉您最佳实践是什么），然后使用 jQuery 模板进行字符串替换。有多个基于 jQuery 的模板框架，但我链接到的一个正在成为 jQuery 的官方部分。

Answer 5

问题在于 .append jquery 函数。您不能对长字符串使用 .html 或 .append 函数。相反，您需要使用.innerHTML

试试这个

document.getElementById('example').innerHTML=theHTML.join('');