Is there any faster way to hide/show html element?

Question

I want a faster way to show/hide about 20000+ dom element.

I found that it is very slow using element.style.display = "none"

I think it's because I cause too many reflows of the browser.

But just element.style.visibility = "hidden" is not enough because the height of the element still exists

Is there any better way?

I can only use google closure

There is a runable example. But in my project, there are about 20000+ checkboxes

function filter_change (txt) {
  var eles = document.getElementsByClassName("checkbox_container");
  for (var i = 0; i < eles.length; i++) {
    var cnt = eles[i];
    var ipt = cnt.getElementsByTagName("input")[0];
    if (ipt.id.indexOf(txt.value) < 0) {
      cnt.style.display = "none";
    } else {
      cnt.style.display = "flex";
    }
  }
}

<html>
<head>
</head>
<body>
<input type="text" onkeyup="filter_change(this)" />
<div class="parent">
  <div class="checkbox_container">
    <input type="checkbox" id="checkbox_1" value="checkbox_1" class="checkbox_input">
    <label for="checkbox_1" class="checkbox_label">checkbox_1</label>
  </div>
  <div class="checkbox_container">
    <input type="checkbox" id="checkbox_2" value="checkbox_2" class="checkbox_input">
    <label for="checkbox_2" class="checkbox_label">checkbox_2</label>
  </div>
  <div class="checkbox_container">
    <input type="checkbox" id="checkbox_3" value="checkbox_3" class="checkbox_input">
    <label for="checkbox_3" class="checkbox_label">checkbox_3</label>
  </div>
  <div class="checkbox_container">
    <input type="checkbox" id="checkbox_4" value="checkbox_4" class="checkbox_input">
    <label for="checkbox_4" class="checkbox_label">checkbox_4</label>
  </div>
  <div class="checkbox_container">
    <input type="checkbox" id="checkbox_5" value="checkbox_5" class="checkbox_input">
    <label for="checkbox_5" class="checkbox_label">checkbox_5</label>
  </div>
  <div class="checkbox_container">
    <input type="checkbox" id="checkbox_10" value="checkbox_10" class="checkbox_input">
    <label for="checkbox_10" class="checkbox_label">checkbox_10</label>
  </div>
  <div class="checkbox_container">
    <input type="checkbox" id="checkbox_100" value="checkbox_100" class="checkbox_input">
    <label for="checkbox_100" class="checkbox_label">checkbox_100</label>
  </div>
  <div class="checkbox_container">
    <input type="checkbox" id="checkbox_1000" value="checkbox_1000" class="checkbox_input">
    <label for="checkbox_1000" class="checkbox_label">checkbox_1000</label>
  </div>
  <div class="checkbox_container">
    <input type="checkbox" id="checkbox_10000" value="checkbox_10000" class="checkbox_input">
    <label for="checkbox_10000" class="checkbox_label">checkbox_10000</label>
  </div>
  <div class="checkbox_container">
    <input type="checkbox" id="checkbox_15000" value="checkbox_15000" class="checkbox_input">
    <label for="checkbox_15000" class="checkbox_label">checkbox_15000</label>
  </div>
  <div class="checkbox_container">
    <input type="checkbox" id="checkbox_20000" value="checkbox_20000" class="checkbox_input">
    <label for="checkbox_20000" class="checkbox_label">checkbox_20000</label>
  </div>
</div>
</body>
</html>

What libraries do you use ? What are the frameworks you use ? Where is your code ? — prime, Feb 20 '19 at 02:56
Anything with 20k dom elements getting manipulated is going to be "slow".... — random_user_name, Feb 20 '19 at 03:13
@AniketG I can not use or add jQuery libraries to the project — BabyCabbage, Feb 20 '19 at 03:14
@cale_b I agree, but I just hope that maybe there are some ways which can improve a little — BabyCabbage, Feb 20 '19 at 03:20

score 0 · Accepted Answer · answered Feb 20 '19 at 03:35

0

You can use CSS:

.checkbox_container input[id*='15'] {
   display: none;
}

See this fiddle

Or use CSS selector in your javascript code, and add class instead:

document.querySelectorAll('.checkbox_container input[id*="' + txt.value '"]')
   .forEach(el => el.classList.add('hidden'))

defining class 'hidden' as:

.hidden { display: none; }

IMPORTANT

With your javascript code, make sure you validate txt.value so that it only contains characters valid for a CSS class name.

answered Feb 20 '19 at 03:35

Frank Fajardo

7,034
1
29
47

Thanks a lot, I use ```if (txt == null || txt.length == 0) { style.innerHTML = ""; } else { style.innerHTML = ".checkbox_container:not([title*='" + txt + "']) { display: none; }"; }``` and it speeds up a little bit – BabyCabbage Feb 20 '19 at 04:04
@BabyCabbage - note that you [should not use `==`](https://stackoverflow.com/a/359509/870729) (also known as the [evil twins]) in javascript. Instead, use `===`.... – random_user_name Feb 20 '19 at 14:39

Is there any faster way to hide/show html element?

1 Answers1