javascript - 大型同位素画廊非常慢

Question

我有一个 Isotope图库(第 2 版)包含近 400 个元素。典型的图库项目如下所示:

<div class="element hybrid a" data-category="hybrid">
    <p class="type">H</p>
    <h2 class="name">Name</h2>
    <p class="strain-info">No Info Available</p>
    <p class="review"><a class="button radius small black review-form-lb" href="#review-form-lightbox">Review</a></p>
</div>

例如，当我运行下面的代码时，它基本上向单击的元素添加了一个类，放大该元素需要几秒钟。

$container.on( 'click', '.element', function() {
  $( this ).toggleClass('large');
  $container.isotope('layout');
});

另一个例子是，如果我有一个包含多个选项的按钮组来过滤画廊，同样需要几秒钟。过滤JS:

$('#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 });
});

这是$container的变量

// init Isotope
var $container = $('.isotope').isotope({
  itemSelector: '.element',
  layoutMode: 'fitRows',
  filter: function() {
    return qsRegex ? $(this).text().match( qsRegex ) : true;
  }
});

我应该注意到上面的代码在项目数量较少时效果很好。我怎样才能提高图库的性能？

我应该注意到，在 Isotopes 的第 1 版中，我有相同的图库并且工作正常。我正在升级，因为同位素 v2 的能力增强了。

Here is the live site - 重要的! - 这个网站是为美国科罗拉多州的一家大麻药房设计的。网站可能不适合工作。

更新

我尝试将所有 div 更改为 li 元素。没有看到太大的改进。

我尝试根据 mfirdaus 的回答打开硬件加速，但似乎没有用。

注意:上面的实时网站链接是精简版，我删除了同位素图库不需要的所有内容。它比我最初发布时稍微快一点，但是，它需要更快地响应。尝试在平板电脑上使用它，Isotope 项目需要几秒钟才能响应。

更新 2

Isotopes 的第一个版本在大型画廊中表现得更好，因此我最终使用了第一个版本。

Answer 1

我有一个建议。首先，您可以将 css 属性 transform:translate3d(0,0,0) 添加到您的 .element css 选择器。这会打开硬件加速，应该会加快页面回流。这是一个常用于使高度动画化的页面更流畅的技巧，尤其是在移动设备上。所以类似的东西:

.element {
  ...
  /* add this. prefixes for compabtibility */
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
}

在我的测试中，它似乎可以很好地加快速度。

另一个建议是将 .on("click") 替换为 .on("mousedown")。 click 在鼠标松开后触发，而 mousedown 会在用户按下鼠标后立即触发。大约有 ~0.2 秒的差异，但有点明显。

Here's an example made from isotope's default example which has 400 elements.

---

更新

在测试完 touchstart 后，它有点帮助，但即使在滚动时也会触发。因此，这仅在您禁用滚动/具有固定视口(viewport)时才有用。也许您可以添加 iScroll，但我认为这会更加臃肿。

您可以尝试的一个选项是先强制元素调整大小，然后再等待同位素重新计算位置。我们可以通过在同位素刷新上使用 setTimeout 来做到这一点。不确定这种行为是否可以接受，但这将使用户能够更快地获得反馈。所以你的切换代码将是这样的:

$container.on( 'click', '.element',function() {
  $( this ).toggleClass('large');
  setTimeout(function(){ $container.isotope('layout'); },20); //queue this later
});

Demo .在我的 Android 设备上对此进行了测试，似乎有所改进。