title: How to optimally render large amounts of DOM elements using javascript?
body: <p>On a web page I have a quite large list of items (say, product cards, each contains image and text) - about 1000 of them. I want to filter this list on client (only those items, which are not filtered away should be shown), but there is a rendering performance problem. I apply a very narrow filter and only 10-20 items remain, then cancel it (so all items have to be shown again), and browser (Chrome on very nice machine) hangs up for a second or two.</p>
  
  <p>I re-render the list using following routine:</p>
  
  <pre><code>for (var i = 0, l = this.entries.length; i &lt; l; i++) {
      $(this.cls_prefix + this.entries[i].id).css("display", this.entries[i].id in dict ? "block" : "none")
  }
  </code></pre>
  
  <p>dict is the hash of allowed items' ids</p>
  
  <p>This function itself runs instantly, it's rendering that hangs up. Is there a more optimal re-render method than changing "display" property of DOM elements?</p>
  
  <p>Thanks for your answers in advance.</p>