Swiper.js响应时强制重排性能问题

Question

关于使用swiper.js轮播/幻灯片库的问题。使滑块响应时，“强制重排”会导致性能下降。

如果调整了视口的大小，则强制回流非常极端。我该如何调试呢？

Swiper github说，这是寻求支持的最佳位置。

我在这里添加了示例代码。

Codepen

// Just duplicating swiper 20 times
const listing = document.getElementsByClassName("listing")[0];
for (let i = 0; i < 19; i++) {
  let clone = listing.cloneNode(true);
  clone.getElementsByClassName("swiper-container")[0].id = `carousel-${i+1}`;
  document.getElementsByClassName("grid")[0].appendChild(clone);
  newSwiper(i + 1);
}

function newSwiper(i) {
  let swiper = new Swiper(`#carousel-${i}`, {
    initialSlide: Math.floor(Math.random() * 6),
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  });
}

@import url('https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css');

.grid {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.swiper-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.listing {
  background: orange;
  width: 100%;
  position: relative;
}

.listing::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0;
  padding-bottom: 70%;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="grid">
  <div class="listing">

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://i.imgur.com/8aoOSaob.jpg" alt="thumb">
        </div>
        <div class="swiper-slide">
          <img src="https://i.imgur.com/FB5IGMgb.jpg" alt="thumb">
        </div>
        <div class="swiper-slide">
          <img src="https://i.imgur.com/GBpr1JR.png" alt="thumb">
        </div>
        <div class="swiper-slide">
          <img src="https://i.imgur.com/UYqiudHb.jpg" alt="thumb">
        </div>
        <div class="swiper-slide">
          <img src="https://i.imgur.com/BBFBbuA.jpeg" alt="thumb">
        </div>
        <div class="swiper-slide">
          <img src="https://i.imgur.com/tpZvfRn.jpg" alt="thumb">
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

Answer 1

我花了太多时间尝试解决此问题。一遍又一遍地玩css。我得出的结论是swiper.js。也许某处的事物如何重新计算。

我在glide.js上切换了代码，没有性能问题。没有延迟加载，因此需要更多的开发时间来弥补这一空白。