Как быстро скрыть большое количество элементов?

Question

[artman_vrn]

Здравствуйте.
На странице есть около 10.000 элементов с классом .order_item.
Возникла проблема при вызове $(".order_item").css('display', 'none');
Если засечь время выполнения команды, то оно во всех браузерах порядка 30-40 миллисекунд.
Только в chrome, opera, yandex сразу происходит и ренндинг, и исчезновение этих элементов.
А в firefox после выполнения идет зависание порядка 10 секунд и потом только исчезновение этих элементов.

p.s. посмотреть https://codepen.io/ilya_zakharov/pen/qBBgaoJ

Comments

[Andrew]

К вам, в глубинку, css еще не завезли?

[Lord_Dantes]

Можете скрыть их с помощью кода страницы, нажимаете ПКМ и удаляете.

[Николай Чуприк]

Ответа не знаю, но любопытно, как это всё работает. Интересно, а если так:
$(".order_item").addClass(".hidden")

.hidden  {
  display: none;
}

[Ice]

а если скрывать общую обертку над .order_item ?

[Николай Чуприк]

Ice, общей обёртки может и не быть. Они могут быть разрознены по документу.

[artman_vrn]

Ice, Пробовал скрывать общую, потом внутри, те же тормоза в рендинге в фаерфоксе.

Answer 1

[Антон Неверов]

Вам не нужно каждый элемент в отдельности скрывать. Добавьте к body класс .hide_childs, а в CSS правило:

body.hide_childs .order_item{
  display: none;
}

Лаги у вас из-за проблемы jQuery и его долгой отработки DOM'а. Если бы вы ванильный JS использовали, возможно, каждый элемент и можно было бы скрыть.

Comments

[artman_vrn]

Тоже самое и при ванильном JS.
Проблема я так понял именно в display: none; и его последующем рендинге.
Долго искал на зарубежных сайтах, частично понял что проблема в пересчете определенных свойств, таких как высота, при исчезновении элемента в document

[Николай Чуприк]

artman_vrn, Если так, то можно как-то попытать вынести эти элементы в отдельный z-index, чтобы они не влияли на позиционирование всего остального.

[Николай Чуприк]

artman_vrn, Я считаю, отличный способ у Антон Неверов. (Я ниже попытался сделать похожее, но через жопу :)). Поделитесь результатами. Очень интересно.

[artman_vrn]

Попробовал. Тоже самое.

[Николай Чуприк]

artman_vrn, А если не display:none, а например opacity:0?

[Николай Чуприк]

artman_vrn, извините, но из головы не выходит ваш кейс. Ещё идея пришла.

Вряд ли 10000 элементов у вас на одном экране. Может быть сделать их "ленивое" сокрытие. Т.е. сразу скрывать только те из них, которые находятся в пределах экрана. Остальные скрывать после этого "по мере сил", или же вообще только при скролинге видимой области.

[artman_vrn]

Да все строки на экране и это не проблема, браузеры хорошо рендят.
Потом идет фильтрация, строки скрываются, нужные отображаются.

Обнаружил один нюанс, который явственно влияет. Это то, что изначально эти сроки имеют display:flex;
Если изначально display:block, то рендинг в firefox моментальный.

[Николай Чуприк]

artman_vrn, спасибо, очень интересно.

[artman_vrn]

Добавил ссылку, можно посмотреть в разных браузерах...

Answer 2

[Николай Чуприк]

Предлагаю сразу в документе нужным элементам прописать класс to_hide. Само определение класса сделать по ходу выполнения, когда надо скрыть элементы:

$('body').append('<style>.to_hide{display:none}</style>')

Фишка в том, что тут нет медленной операции выборки прорвы элементов, класс to_hide с самого начала прописан элементам!

P.S.: Сначала я решил прописать класс order_item прямо в HTML в <style>...</style>, а потом регулярным выражение добавлять в описание класса display:none. Даже написал сюда такой ответ, но потом до меня дошло, что этот гемор не нужен, а лучше сделать это отдельным классом.