Question

我使用fadeIn和fadeOut实现了一个加载指示器（动画.svg），以在一个也有动画画布的页面上显示/隐藏它，当这些操作发生时，我的画布性能大幅下降，甚至会使某个移动浏览器崩溃。

我把它改成简单的show（）和hide（）元素，没有问题，除非它看起来不那么好。

只是想知道是否有其他人注意到这样的性能问题，以及是否有其他方法可以淡入/淡出我的指标？谢谢！

Answer 1

JQuery的动画例程都非常悲观＆＃34;在他们的实施。它们使用计时器逐帧显式设置DOM中的不透明度。这会导致浏览器强制重绘。这是出于历史原因而完成的，因为CSS转换并不总是存在，并且它曾经是实现这些效果的唯一方法。

现在，让浏览器使用CSS转换完成大部分工作的更有效方法。您只需使用它来应用类，而不是让JQuery进行淡入淡出。浏览器负责两种状态之间的转换。

大多数浏览器都可以使用GPU加速不透明度和转换过渡。

＆＃13;

setTimeout(function() {
  $('.fader').addClass('show');
  
  $('.fader').on('click', function() {
    $(this).removeClass('show');
  });
});

＆＃13;

.fader {
  width: 200px;
  height: 200px;
  background: cornflowerblue;
  
  opacity: 0;
  transition: opacity 2s linear;
}

.show {
  opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fader">I'll fade in, click me to fade out</div>

＆＃13;

在上面的示例中，setTimeout()用于为DOM提供一个框架，用<div>类和fader {{1}来绘制opacity }}。在下一帧中，它会应用0类，将show设置为opacity。因为1长2秒，它会慢慢淡入。

我还添加了一个删除transition类的点击事件，它会慢慢淡出。

jQuery fadeIn（），fadeOut（）导致性能急剧下降

1 个答案: