=> Главная База Знаний Оптимизация сайта Оптимизация: определение класса hide


Оптимизация: определение класса hide

Оптимизация: определение класса hide

Давайте подробнее остановимся на предложенном мной решении. Предлагаю следующую реализацию:

function isHidden(el)

{

var p=el;

var b=document.body;

var re=/(^|\s)hide($|\s)/;

while(p && p!=b && !re.test(p.className))

p=p.parentNode;

return !!p && p!=b;

}

Предполагается, что корневые элементы DOM скрывать не имеет смысла и поэтому проверки ведутся только до document.body.

Предложенное решение явно не спустит лавину reflow, так как никаких вычислений и измерений не проводится. Однако немного смущает проход до корня документа: что же будет при большой вложенности элементов? Давайте проверим. Тест isHidden проводится для вложенности 2 (document.body / test_div), а тест isHidden2 — для вложенности 10 (document.body / div * 8 / test_div).

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

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