Как измерить Javascript DOM Manipulation

Question

У меня есть две функции javascript, которые делают то же самое: создайте меню, основанное на объекте json.

Одна функция добавляет все <ul> и <li> элементы переменной, а затем записывает HTML в документ с помощью метода innerHTML

Вторая функция создания элементов DOM через createElement("ul") и appendChild() методов

Я хочу знать, какая функция работает быстрее, но я не знаю, как выполнить тестовый тест в javascript.

моя первая функция buildMenutoString() и вторая функция buildMenuDOM()

Answer 1

Я использую что-то вроде этого:

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

Example:

var test1 = function(){ 
     $('body').append('<div />'); 
    }, 

    test2 = function(){ 
     div = document.createElement('div'); 
     document.body.appendChild(div); 
    }; 

bench(test1, 1000); 
bench(test2, 1000); 

Answer 2

вы пробовали jsperf?

Что-то вроде этого:

http://jsperf.com/createelement-vs-innerhtml-qweqwe123