CSS translate3d 在移动设备上的性能问题 DOM

Question

我在网站上使用 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标记、文本和图像。如果我删除一些标记，owl轮播性能会提高，但这不是解决方案。

如何提高性能？事件 owl 的 "noSupport3d" 选项使用 jQuery 动画效果更好。

Answer 1

好的，我明白了，这里是遇到类似问题的每个人的解决方案：

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

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

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

CSS translate3d 在移动设备上的性能问题 DOM

CSS translate3d performance problems on mobile devices with big DOM

javascript

css

jquery

owl-carousel