=> Главная База Знаний Оптимизация сайта Offsetheight и style.Display


Offsetheight и style.Display

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 — это время, затраченное на тест, в миллисекундах.

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

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

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