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)的{{1}}之外，你真的应该通过使用Array.join（）方法而不是连接字符串来提高性能。这将与C＃或Java中的StringBuilder具有类似的效果。

例如：

if (i % 2 === 0)

追加字符串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'慢的原因是因为JavaScript strings are immutable所以在前一个示例中，每次连接2个字符串时都会创建第三个字符串，这是与向数组中添加新条目相比，这是一项非常昂贵的操作。

另请参阅使用Array.push（）和Array.join（）的相同原则构建的Javascript StringBuilder project。

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

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

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

通过在for-loop中定义['my', ' joined', ' string'].join('')
使用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('');

Javascript和非常长的字符串

5 个答案: