动画正在减慢网页的性能

Question

我有一个使用html，javascript和CSS的单页网站设计。网页上有很多图像，并且每个图像根据类别都有不同的动画效果。我已经使用 wow.js 来实现窗口滚动时的动画效果。滚动浏览图像时，CPU和GPU的使用率很高，由于其影响，滚动会变得不稳定而不平滑。任何人都可以调查一下。我创建了一个Codepen示例。请看看：-

(https://codepen.io/Sny220/pen/jjyEPj)

以下代码：-

<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
   <img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
   <img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
   <div class="inner">
      <h1 class="wow fadeInDown">Hello, world!</h1>
      <p class="wow fadeInUp">Whouaa !!!</p>
   </div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
   <div class="inner">
      <button type="button" class="btn btn-success">Success</button>
   </div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
   <img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
   <div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
   <div class="inner">
      <img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
   </div>
</div>
<div data-wow-duration="2s" class="foo  foo-2 col-md-3 wow scale-in-ver-top">
   <div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
   <div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
   <h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
   <img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
   <img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
   <div class="inner">
      <h1 class="wow fadeInDown">Hello, world!</h1>
      <p class="wow fadeInUp">Whouaa !!!</p>
   </div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
   <div class="inner">
      <button type="button" class="btn btn-success">Success</button>
   </div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
   <img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
   <div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
   <div class="inner">
      <img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
   </div>
</div>
<div data-wow-duration="2s" class="foo  foo-2 col-md-3 wow scale-in-ver-top">
   <div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
   <div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
   <h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3 over-hidden">
   <img class="wow zoominoutsingle" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3 over-hidden">
   <img class="wow zoominoutsingle" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
   <div class="inner">
      <h1 class="wow fadeInDown">Hello, world!</h1>
      <p class="wow fadeInUp">Whouaa !!!</p>
   </div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
   <div class="inner">
      <button type="button" class="btn btn-success">Success</button>
   </div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
   <img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
   <div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
   <div class="inner">
      <img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
   </div>
</div>
<div data-wow-duration="2s" class="foo  foo-2 col-md-3 wow scale-in-ver-top">
   <div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
   <div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
   <h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3">
   <img class="wow scale-in-ver-top" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3">
   <img class="wow scale-in-ver-top" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
   <div class="inner">
      <h1 class="wow fadeInDown">Hello, world!</h1>
      <p class="wow fadeInUp">Whouaa !!!</p>
   </div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
   <div class="inner">
      <button type="button" class="btn btn-success">Success</button>
   </div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
   <img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
   <div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
   <div class="inner">
      <img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
   </div>
</div>
<div data-wow-duration="2s" class="foo  foo-2 col-md-3 wow scale-in-ver-top">
   <div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
   <div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>
<div class="col-md-6 col-md-offset-3 bg-color">
   <h1 class="wow fadeInDown">Next Section</h1>
</div>
<!-- HTML -->
<div class="foo foo-text foo-2 col-md-3 col-md-offset-3">
   <img class="wow scale-in-ver-top" src="https://www.psychologies.co.uk/sites/default/files/field/image/feelgood%20chemicals.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-3">
   <img class="wow scale-in-ver-top" src="https://kajabi-storefronts-production.global.ssl.fastly.net/kajabi-storefronts-production/blogs/1049/images/BlH7rBrRFGdVF71lofox_TFmaDj07ReWp5C4zcHaw_alex-fergus-look-and-feel-amazing-health-wellness-fat-loss-natural-banner.jpg" />
</div>
<div class="foo foo-text foo-2 col-md-6 col-md-offset-3">
   <div class="inner">
      <h1 class="wow fadeInDown">Hello, world!</h1>
      <p class="wow fadeInUp">Whouaa !!!</p>
   </div>
</div>
<div class="foo foo-3 col-md-6 col-md-offset-3">
   <div class="inner">
      <button type="button" class="btn btn-success">Success</button>
   </div>
</div>
<div class="foo foo-4 col-md-6 col-md-offset-3 wow fadeInDown">
   <img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison1.jpg" />
</div>
<div class="foo foo-5 col-md-6 col-md-offset-3">
   <div class="inner">RUBRIQUE 3</div>
</div>
<div data-wow-duration="2s" class="foo foo-1 col-md-3 col-md-offset-3 wow scale-in-ver-top">
   <div class="inner">
      <img class="" src="http://www.ponpokopon.net/livresillu/unenouvellemaison2.jpg" />
   </div>
</div>
<div data-wow-duration="2s" class="foo  foo-2 col-md-3 wow scale-in-ver-top">
   <div class="inner"><img class="" src="https://media.treehugger.com/assets/images/2018/07/nature-benefits.jpg.860x0_q70_crop-scale.jpg" /></div>
</div>
<div data-wow-duration="2s" class="col-md-3 col-md-offset-3 margin-top-20 swing">
   <div class="inner"><img class="wow swing-in-top-fwd" src="https://www.thewaltdisneycompany.com/wp-content/uploads/ENVIRONMENT_header-option_Disney_Conservation_Fund_0348HC.jpg" /></div>
</div>

body {
    padding-top: 20px;
}


/* set colors*/

 :root {
    --color-1: forestgreen;
    --color-2: lightskyblue;
    --color-3: darksalmon;
    --color-4: palegoldenrod;
    --color-5: mediumvioletred;
}

img {
    width: 100%;
}

.foo {
    margin-bottom: 10px;
    color: white;
}

.navbar {}

.foo .inner {
    padding: 5px;
    min-height: 20vh;
}

.foo-text .inner {
    min-height: 60vh !important;
}


/* apply colors */

.foo-1 .inner {
    background-color: var(--color-1);
}

.foo-2 .inner {
    background-color: var(--color-2);
}

.foo-3 .inner {
    background-color: var(--color-3);
}

.foo-4 .inner {
    background-color: var(--color-4);
}

.foo-5 .inner {
    background-color: var(--color-5);
}

.bg-color {
    background-color: var(--color-5);
    color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
}

.over-hidden {
    overflow: hidden;
}

.swing {
    overflow: hidden;
}

.scale-in-ver-top {
    -webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-in-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}

@keyframes scale-in-ver-top {
    0% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
        opacity: 1;
    }
}

.swing-in-top-fwd {
    -webkit-animation-name: swing-in-top-fwd;
    animation-name: swing-in-top-fwd;
}

@-webkit-keyframes swing-in-top-fwd {
    0% {
        -webkit-transform: rotateX(-100deg);
        transform: rotateX(-100deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    }
    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    }
}

@keyframes swing-in-top-fwd {
    0% {
        -webkit-transform: rotateX(-100deg);
        transform: rotateX(-100deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 0;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    }
    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        -webkit-transform-origin: top;
        transform-origin: top;
        opacity: 1;
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    }
}

@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1, 1);
        webkit-transform: scale(1, 1);
    }
    50% {
        transform: scale(2, 2);
        webkit-transform: scale(2, 2);
    }
    100% {
        transform: scale(1, 1);
        webkit-transform: scale(1, 1);
    }
}

.zoominoutsingle {
    animation-name: zoominoutsinglefeatured;
    webkit-animation-name: zoominoutsinglefeatured;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

wow = new WOW();
wow.init();

$(".foo-5").hover(function(e) {
    $(this).addClass('animated pulse');
}, function(e) {
    $(this).removeClass('animated pulse');
});
var $animation_elements = $('.wow');
var $window = $(window);

function check_if_in_view() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
            (element_top_position <= window_bottom_position)) {
            $element.removeClass('animated');
            $element.addClass('animated');
        } else {
            $element.css({
                'visibility': 'hidden',
                'animation-name': 'none'
            }).removeClass('animated');
            wow.addBox(this);
        }
    });
}
WOW.prototype.addBox = function(element) {
    this.boxes.push(element);
};
$window.on('scroll resize', check_if_in_view);

  

更新：-这只是我在网页中使用的示例。网页   具有不同数量的部分附录。 20节，都是   具有10张或更多图片。因此，当我们使用   动画的性能下降。

     

我已经在Mac Safari 11和12上进行了检查，动画和滚动条是   不光滑。滚动和动画非常怪诞   抽搐会变慢。

Answer 1

使用Intersection Observer（IO）而不是侦听滚动事件，可能会获得很多性能。之所以引入IO，是因为监听滚动事件并计算元素的高度/宽度会导致性能下降。

首先，您必须创建一个新的观察者：

var options = {
  rootMargin: '0px',
  threshold: 1.0
 }

var observer = new IntersectionObserver(callback, options);

这里，我们指定一旦观察到的元素100％可见，就应该执行一些回调。

然后，您必须指定要观察的项目，在您看来，这应该是：

var target = document.querySelector('.wow');
observer.observe(target);

因此，我们定义一旦页面上可见任何具有“ wow”类的元素，则将执行回调：

var callback = function(entries, observer) { 
  entries.forEach(entry => {
  // Each entry describes an intersection change for one observed
  // target element:
  });
};

您在这里指定页面中每个可见的“哇”元素应该发生什么。

如果您将CSS用于动画而不是JS，则动画现在应该平滑。 这也取决于要设置动画的参数，这里is a good list of properties可以避免使用CSS设置动画。

我不会在此处复制整个列表，但是最重要的是填充，宽度，高度和位置。

编辑： 如果您需要支持的旧浏览器而不是使用此（官方）polyfill from w3c的浏览器，它将通过侦听滚动事件来重新创建交叉观察器。因此，在较旧的浏览器上，它的速度仍然会变慢，您在此无能为力。但是在较新的产品上，性能会有所提高。

Answer 2

您可以对动画使用延迟加载，并以更好的方式执行视图元素的加载。 JQuery Lazy

Answer 3

由于看起来您仅在使用animated pulse，并且已经在添加和删除animated类，因此我强烈建议您使用CSS动画。

CSS动画由GPU渲染，并且不像JavaScript那样使用主线程。他们超级流畅而且性能出色！

查看我在Google上发现的创建了脉冲动画图标的Codepen：https://codepen.io/igorsheg/pen/MBpwGw