title: Large Isotope Gallery is Very Slow
body: <p>I have an <a href="http://isotope.metafizzy.co/" rel="noreferrer">Isotope</a> gallery (version 2) with almost 400 elements. A typical gallery item looks like this:</p>
  <pre><code>&lt;div class=&quot;element hybrid a&quot; data-category=&quot;hybrid&quot;&gt;
      &lt;p class=&quot;type&quot;&gt;H&lt;/p&gt;
      &lt;h2 class=&quot;name&quot;&gt;Name&lt;/h2&gt;
      &lt;p class=&quot;strain-info&quot;&gt;No Info Available&lt;/p&gt;
      &lt;p class=&quot;review&quot;&gt;&lt;a class=&quot;button radius small black review-form-lb&quot; href=&quot;#review-form-lightbox&quot;&gt;Review&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>For instance when I run the code below, which basically adds a class to the element clicked, it takes several seconds for the element to enlarge.</p>
  <pre><code>$container.on( 'click', '.element', function() {
    $( this ).toggleClass('large');
    $container.isotope('layout');
  });
  </code></pre>
  <p>Another example is if I have a button group that contains several options to filter the gallery, again it takes several seconds. Filter JS:</p>
  <pre><code>$('#filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = '';
    for ( var prop in filters ) {
      filterValue += filters[ prop ];
    }
    // set filter for Isotope
    $container.isotope({ filter: filterValue });
  });
  </code></pre>
  <p>Here is the variable for <code>$container</code></p>
  <pre><code>// init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.element',
    layoutMode: 'fitRows',
    filter: function() {
      return qsRegex ? $(this).text().match( qsRegex ) : true;
    }
  });
  </code></pre>
  <p>I should note that the above code works great when there is a small number of items. How could I improve the performance of the gallery?</p>
  <p>I should note that in version 1 of Isotopes I have the same gallery and it works fine. I am upgrading because of enhanced abilities of v2 of isotopes.</p>
  <p><a href="http://www.mmjkarma.com/strains/tablet.html" rel="noreferrer">Here is the live site</a> - IMPORTANT! - This site is for a marijuana dispensary in Colorado, USA. Website may not be appropriate for work.</p>
  <p><em><strong>Update</strong></em></p>
  <p>I tried changing all <code>div</code>s to <code>li</code> elements. Didn't see much improvement.</p>
  <p>I tried turning on hardware acceleration per mfirdaus's answer but it didn't appear to work.</p>
  <p>Note: The above link to the live site is a stripped down version where I removed everything not required for the Isotope gallery. It is slightly faster than when I originally posted this, however, it needs to be more responsive. Try using it on a tablet and it takes several seconds for the Isotope item to respond.</p>
  <p><em><strong>Update 2</strong></em></p>
  <p>Version One of Isotopes performs much better with a large gallery and I ended up using version one because of this.</p>