offsetHeight и style.display

Проведем тестирование скорости вычисления значений offsetHeight и style.display.

Для удобства профайлинга вынесем доступ к этим значениям в отдельные функции:

function fnOffset(el)
{
        return !!el.offsetHeight;
}

function fnStyle(el)
{
        return el.style.display=='none';
}

где el — тестовый контейнер.

Проведем тест на тысяче итераций, на каждой итерации будем добавлять в тестовый контейнер элемент <span>. Проверим время, затрачиваемое на добавление тысячи элементов, без вызова тестовых функций тест clean. Проведем тестирование во всех браузерах, замеряя время следующим способом:

var time_start = new Date().getTime();
/* ... тест ... */
var time_stop=new Date().getTime();
var time_taken=time_stop-time_start;

где time_taken — это время, затраченное на тест, в миллисекундах.

	IE sp62	IE8b	Firefox 2.0.0.12	Opera 9.22	Safari 3.04b
clean	128	153	15	15	16
offsetHeight	23500	10624	4453	4453	5140
style.display	171	209	56	56	34
height vs. style	140 раз	50 раз	80 раз	80 раз	150 раз

Таблица 6.3. Результаты выполнения тестов по определению видимости элементов. Времена приведены в миллисекундах. Взято среднее значение серии из 5 тестов

Судя по результатам тестов, доступ к offsetHeight медленнее в 50-150 раз.

Получается, что по отдельности и offsetHeight, и добавление элементов работают быстро, а вместе — очень медленно. Как же так?