如何对Javascript-DOM操作进行基准测试

我有两个javascript函数做同样的事情：基于json对象创建菜单

一个函数将所有

和

元素附加到一个变量，然后使用

innerHTML

第二个函数通过

createElement（“ul”）

和

appendChild（）

方法创建DOM元素

所以我想知道哪个函数更快，但我不知道如何用javascript执行基准测试

---

我的第一个函数是

buildMenutoString（）

，第二个函数是

buildMenuDOM（）

我使用的函数如下：

var bench = function(fn, iterations){
        var time = 0, i = 0, total;

        // start
        time = +(new Date);

        while(i < iterations){
          fn.apply();
          i++;
        }

        total = +(new Date) - time;

        console.log("Mean exec time: ", total / iterations, 'ms');
        console.log("Sum exec time: ", total, 'ms');
     };

var bench=函数（fn，迭代次数）{
变量时间=0，i=0，总计；
//开始
时间=+（新日期）；
while（i<迭代次数）{
fn.apply（）；
i++；
}
总计=+（新日期）-时间；
log（“平均执行时间：”，总次数/迭代次数，'ms'）；
log（“Sum exec time:，total，'ms”）；
};

:

var test1=function（）{
$（'body'）。追加（''）；
},
test2=函数（）{
div=document.createElement（'div'）；
文件.正文.附件（div）；
};
试验台（试验1，1000）；
试验台（试验2，1000）；

你试过了吗

大概是这样的：

var bench = function(fn, iterations){
        var time = 0, i = 0, total;

        // start
        time = +(new Date);

        while(i < iterations){
          fn.apply();
          i++;
        }

        total = +(new Date) - time;

        console.log("Mean exec time: ", total / iterations, 'ms');
        console.log("Sum exec time: ", total, 'ms');
     };

。