IE sp62

Firefox 2.0.0.12

Opera 9.22

Safari 3.04b

OffsetHeight

IsHidden

IsHidden2

OffsetHeight vs. isHidden

Раза

Раз

Раза

Раза

Таблица 6.5 .Резульаты выполнения функции isHidden . Времена приведены в миллисекундах

Как показывают тесты, даже при большой вложенности падение скорости невелико. Таким образом, мы получили универсальное решение, которое быстрее доступа к offsetHeight в 30–100 раз.

Заключение

Все вышеприведенные мысли предназначены не столько для решения проблемы выяснения видимости элемента в общем случае, сколько для объяснения одного из наиболее часто встречающихся узких мест взаимодействия с DOM и детального разбора методов оптимизации. В ходе тестов был намеренно воспроизведен наихудший случай. В реальных ситуациях такой прирост скорости получится только при использовании в анимации. Однако понимание причин и механизма reflow позволяет писать более оптимальный код.

В качестве послесловия: стили или классы?

В заключении давайте затронем еще несколько оптимизационных моментов, связанных с отображением HTML‑страницы на экране браузера. Пусть в нашем документе есть элементы, у которых нужно поменять цвет, фон или что‑нибудь еще, относящееся к стилям. Например, подсветить строки таблицы при наведении мыши или пометить их, если выбрана соответствующая галочка в форме.

Существует два способа это сделать: при помощи стилей или установив цвет (или фон) напрямую из JavaScript. Для начала немного кода – с помощью класса:

var items = el.getElementsByTagName('li');

for (var i = 0; i < 1000; i++) {

items[i].className = 'selected'

}

И с помошью стилей:

var items = el.getElementsByTagName('li');

for (var i = 0; i < 1000; i++) {

items[i].style.backgroundColor = '#007f00';

items[i].style.color = '#ff0000';

}

Результаты простые и понятные:

Метод

IE 6

IE 7