CSS翻译了移动设备上大DOM的性能问题

CSS translate3d performance problems on mobile devices with big DOM

本文关键字：DOM 性能 问题 翻译 移动 CSS      更新时间：2023-09-26

我在一个网站上使用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没有任何魔法它不会导致延迟，因为当我取出那个方法时它仍然在发生

carousel的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，它会在任何事情发生之前停止大约500ms。

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

如何提高性能?事件猫头鹰的"noSupport3d"选项使用jQuery动画效果更好。

好了，我想明白了，下面是每个遇到类似问题的人的解决方案:

大量的DOM元素会影响过渡的性能，这就是为什么滑块在轻量级html页面中工作得很好，但在较大的页面中会出现性能问题。

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

注意:使用translate3D不会使此代码冗余。我现在使用translate3D作为滑动效果，并使用translateZ(0px)作为滑动效果的父容器，这是可行的

相关文章：