字符串連接的javascript性能

Question

我閱讀了有關字符串連接和作用域變量上的javasccript性能的文章 ，因此我按照建議的方式重寫了一些代碼，但建議的方式要慢得多 。 我正在使用Chrome和IE進行測試：相似的結論。

基本上，我有一個包含字符串的對象，並且我遍歷每個值以生成HTML。 我正在比較的兩種方式正在做：

var TheHTML = "";
TheHTML = TheHTML + ...;

另一種方法是使用數組並加入

TheHTML[i++] = ....;

我在這里擺弄 。 我正在使用的代碼如下所示：

var ObjectTest = {};

ObjectTest.Key1 = "The Key 1";
ObjectTest.Key2 = "The Key 2";
ObjectTest.Key3 = "The Key 3";
ObjectTest.Key4 = "The Key 4";
ObjectTest.Key5 = "The Key 5";

function TestSpeed() {

    var TheHTML1 = "";
    var THeHTML2 = "";

    var TheStart1 = new Date().getTime();
    for (var TestPerf1 = 0; TestPerf1 < 100000; TestPerf1++) {

        TheHTML1 = "";
        TheHTML1 = TheHTML1 + '<div style="clear:both">' + ObjectTest.Key1 + '</div>';
        TheHTML1 = TheHTML1 + '<div style="clear:both">' + ObjectTest.Key2 + '</div>';
        TheHTML1 = TheHTML1 + '<div style="clear:both">' + ObjectTest.Key3 + '</div>';
        TheHTML1 = TheHTML1 + '<div style="clear:both">' + ObjectTest.Key4 + '</div>';
        TheHTML1 = TheHTML1 + '<div style="clear:both">' + ObjectTest.Key5 + '</div>';
        TheHTML1 = TheHTML1 + '<br><br>';

    }
    document.getElementById('TestOutput1').innerText = new Date().getTime() - TheStart1;
    document.getElementById('Output1').innerHTML = TheHTML1;


    var TheStart2 = new Date().getTime();
    var ObjectTestCopy = ObjectTest;

    for (var TestPerf2 = 0; TestPerf2 < 100000; TestPerf2++) {

        var Test = [];
        var i = 0;

        Test[i++] = '<div style="clear:both">' + ObjectTestCopy.Key1 + '</div>';
        Test[i++] = '<div style="clear:both">' + ObjectTestCopy.Key2 + '</div>';
        Test[i++] = '<div style="clear:both">' + ObjectTestCopy.Key3 + '</div>';
        Test[i++] = '<div style="clear:both">' + ObjectTestCopy.Key4 + '</div>';
        Test[i++] = '<div style="clear:both">' + ObjectTestCopy.Key5 + '</div>';
        Test[i++] = '<br><br>';

        TheHTML2 = Test.join("");
    }
    document.getElementById('TestOutput2').innerText = new Date().getTime() - TheStart2;
    document.getElementById('Output2').innerHTML = TheHTML2;
}

window.onload = function () { TestSpeed(); }

為什么建議的代碼較慢？

Answer 1

如果您閱讀整篇文章，將對您有所幫助：

但是，瀏覽器字符串優化已更改了字符串串聯圖片。

Firefox是第一個優化字符串連接的瀏覽器。 從1.0版開始，在所有情況下，數組技術實際上都比使用plus運算符慢。 其他瀏覽器還優化了字符串連接，因此Safari，Opera，Chrome和Internet Explorer 8使用plus運算符也顯示出更好的性能。 版本8之前的Internet Explorer沒有進行這種優化，因此數組技術始終比plus運算符快。

Answer 2

不確定，但我認為它的速度較慢，因為您正在不斷更新陣列。 但是根據我自己的測試

  var iable = ['a','b','c','d','e','f'].join('');

比...快

  var iable = 'a'+'b'+'c'+'d'+'e'+'f';

使用循環來生成代碼，而不是在代碼本身內部。