Question

我在字符串连接和范围变量上阅读了article有关javasccript性能的内容，所以我按照建议的方式重新编写了一些代码，但建议的方式慢得多。我正在使用Chrome和IE测试：类似的结论。

基本上，我有一个包含字符串的对象，我循环遍历每个值以生成HTML。我正在比较的两种方式是：

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

另一种方法是使用数组并加入

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

我有一个fiddle here。我正在使用的代码如下所示：

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';

使用循环生成代码，而不是代码本身。

字符串连接的javascript性能

2 个答案: