javascript - 字符串连接、测试、添加额外代码还是无论如何添加并在最后删除？

Question

抱歉，标题很奇怪，我确信以前有人问过类似的问题。我的问题是，我正在构建一个包含 html 标签的字符串，我的问题是测试和添加额外标签是否更好，在本例中为 <br /> ，或者无论如何添加标签并在末尾添加“删除”行，这样更快？:

所以目前我们有

bFirst = true;
label = '';

if(...)
{
  if (!bFirst)
  label += '<br/>';

  label+= 'some more text'
}

if(...)
{
  if (!bFirst)
  label += '<br/>';

  label+= 'some more text'
}

等等...

或

if()
{
  label+= 'some more text <br />'
}

然后删除最后一个 <br />使用 string.substring() 方法。

哪个更快、更好、更正确？我不需要代码，这确实是一个性能问题，我可以测试它，但我确信以前有人这样做过。

谢谢。

Answer 1

您可以使用此过程定义最快的方式:

要求:您将需要一个像 firebug 这样的插件或pagespeed

您必须执行这两个页面:

添加所有额外文本，然后 trim 一些:

<div id ="concat"></div>

<script type="text/javascript">

var someText = ""
// adds "foo" 10k times
for (i = 0; i < 10000; i++) {
    someText += "foo"
}

// crops the 3 last characters off the string 5k times
for (i = 0; i < 5000; i++) {
    someText.substr(someText.length - 3, someText.length);
}

// append the final string
$('#concat').append(someText);
</script>

在我的浏览器上，需要 0.19 秒到 0.30 秒。

在需要时添加额外文本

<div id ="if"></div>
<script type="text/javascript">

var someText = ""
var append = true;
for (i = 0; i < 15000; i++) {
    //adds "foo" the first 10k times
    if(append == true){
        someText += "foo";
    }
    if(i == 10000){
        append = false;
    }
}
$('#if').append(someText);
</script>

此代码迭代 15k 次，仅在前 10k 次添加“foo”。

执行此类代码可能需要 0.10 到 0.12 秒

结论

仅在需要时才向字符串添加内容在性能方面似乎是更好的选择。另外，就代码可读性而言，应该使用第二个选项。