javascript - 动画正在降低网页的性能

标签 javascript jquery cpu-usage wow.js

我用 html、javascript 和 css 设计了一个单页网站。网页上有很多图片，根据类别都有不同的动画效果。我使用 wow.js 来实现窗口滚动的动画效果。在滚动图像时，CPU 和 GPU 的使用率非常高，由于它的影响，滚动变得不稳定，不流畅。任何人都可以看看这个。我创建了一个代码笔示例。请看一看:-

(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);

update:- This is just an example that i am using in webpage. Web page has different number of sections apporx. 20 sections and all are having 10 or more images. So when we are running that much images with animations the performance goes down.

I have checked it on mac Safari 11 & 12, the animation and scroll is not smooth. There is jerkiness while scrolling and animations are very slow with jerks.

最佳答案

使用 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 ，它通过监听滚动事件重新创建路口观察器。所以它在旧浏览器上仍然会变慢，你在这里无能为力。但在较新的产品上，性能会有所提高。

关于javascript - 动画正在降低网页的性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56683298/

上一篇：javascript - 如何使用 thunk 和 useDispatch(react-redux Hook )从操作中返回 promise ？

下一篇：javascript - 模式关闭后无法在页面上滚动

相关文章：

javascript - 用于命名 eval'ed javascript 的 token

javascript - 使用 forEach 在多个数组中搜索字符串

javascript - 使用 jQuery 固定位置侧边栏

javascript - 将 div 更改为不同的颜色，等待 3 秒，然后使用 jQuery 将颜色改回

sublimetext3 - 在闲置状态下使用大量CPU提升文本3

javascript - Backbone : managing templates

javascript - node.js + coffeescript + jasmine 的好 IDE

jquery - 为什么会focusout();在 jQuery 中，焦点移出字段后不执行功能？

apache-spark - Spark CPU 利用率监控

linux - 在 Linux 上限制进程内存/CPU 使用

©2024 IT工具网  联系我们