具有大 DOM 的移动设备上的 CSS translate3d 性能问题答案

【问题标题】：CSS translate3d performance problems on mobile devices with big DOM具有大 DOM 的移动设备上的 CSS translate3d 性能问题
【发布时间】：2015-10-04 22:47:05
【问题描述】：

我在一个网站上使用 OwlCarousel 1.3.3，非常类似于 owl 网站 (http://owlgraphic.com/owlcarousel/demos/one.html) 中的同步示例：

var owlconfig = {
  singleItem: true,
  navigation: false,
  pagination: false,
  afterAction: syncCarousels
};


$('.image-gallery').owlCarousel(owlconfig);

syncCarousels 没有任何魔力，也不会导致延迟，因为当我取消该方法时它仍在发生。

轮播的HTML（初始化JS后）：

<div class="image-gallery owl-carousel owl-theme">
  <div class="owl-wrapper-outer">
    <div class="owl-wrapper">
        <div class="owl-item" style="width: 300px;">
            <a href="images/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
        <div class="owl-item" style="width: 300px;">
            <a href="images/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
        <div class="owl-item" style="width: 300px;">
            <a href="images/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
        <div class="owl-item" style="width: 300px;">
            <a href="images/image.jpg" class="image-gallery__image">
                <img src="images/image.jpg" alt="Image" itemprop="image">
        <span class="button">
            <span class="btn__inner">Detail</span>
        </span>
            </a>
        </div>
    </div>
</div>

在桌面版本中，一切正常，但如果我在 iPhone 或 iPad 上进行测试，滑动感觉非常迟钝。在 DragEnd 上，它会在任何事情发生之前停止大约 500 毫秒。

嵌入轮播的页面基本上有很多不同的html标记，文本和图像。如果我删除一些标记，owlCarousel 的性能会提高，但这不是解决方案。

如何提高性能？ Event 使用 jQuery animate 的 owl 的“noSupport3d”选项表现更好。

【问题讨论】：

我们可以为此提供一个 jsfiddle... 以便我们找到简单的解决方案...
我很想提供一个 jsfiddle，但不幸的是我无法让它工作。该应用程序非常复杂，当我尝试将其简化为仅显示图库时，问题突然消失了。

标签： javascript jquery css owl-carousel

【解决方案1】：

好的，我想通了，这是为遇到类似问题的每个人提供的解决方案：

大量的 DOM 元素会影响转换的性能，这就是为什么滑块在轻量级 html 页面中完美运行但在更大页面中出现性能问题的原因。

我现在为提高滑块的性能所做的是将transform: translateZ(0px) 添加到正在翻译的滑块的父元素中。

注意：使用 translate3D 不会使这段代码变得多余。我现在使用 translate3D 作为滑动效果，并使用 translateZ(0px) 作为滑动的父容器 - 这成功了。

【讨论】：