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

OffsetHeight

Style.display

Height vs. style

Раз

Раз

Раз

Раз

Раз

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

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

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