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

Question

我在一个网站上使用 OwlCarousel 1.3.3，这与猫头鹰网站 (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 性能会提高，但这不是解决方案。

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

Answer 1

好吧，我想通了，这里是遇到类似问题的每个人的解决方案:

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

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

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