动画正在减慢网页的性能 [英] Animations are slowing the performance of web page
本文介绍了动画正在减慢网页的性能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个采用html，javascript和css的单页网站设计.网页上有很多图像，并且每个图像根据类别都有不同的动画效果.我已经使用 wow.js 来实现窗口滚动时的动画效果.滚动浏览图像时，CPU和GPU的使用率非常高，由于其影响，滚动会变得不稳定而不平滑.任何人都可以调查一下.我创建了一个Codepen示例.请看看:-
I have a single page website design in html, javascript and css. There are lots of images on the webpage and all have different-different animation effects according to their categories. I have used wow.js for animation effects on window scroll. While scroll through images, CPU and GPU usage is going very high, due its effect the scrolling is jerky, not smooth. Could anyone please look into this. I have created a codepen example. Please have a look:-
(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张或更多图片.因此，当我们使用 动画的性能下降.
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.
我已在Mac Safari 11& 12，动画和滚动条是 不光滑.滚动和动画非常怪诞 抽搐会变慢.
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.
推荐答案
You can probably gain a lot of performance by using Intersection Observer (IO) instead of listening to the scroll event. IO was introduced because listening to the scroll event and calculating height/width of elements results in poor performance.
首先，您必须创建一个新的观察者:
First you have to create a new observer:
var options = {
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
在这里，我们指定一旦观察到的元素100％可见，就应该执行一些回调.
Here we specify that once the observed element is 100% visible, some callback should be executed.
然后，您必须指定要观察的项目，在您看来，这应该是:
Then you have to specify which items to observe, in your case I think this would be:
var target = document.querySelector('.wow');
observer.observe(target);
因此，我们定义一旦页面上可见任何具有"wow"类的元素，则将执行回调:
So we define that once any element with the class "wow" is visible on the page, the callback is getting executed:
var callback = function(entries, observer) {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// target element:
});
};
您在此处指定页面上每个可见的哇"元素应该发生什么.
Here you specify what should happen for each "wow"-Element in your page that is getting visible.
如果您将CSS用于动画而不是JS，则动画现在应该平滑. 它还取决于您要设置动画的参数，在这里是一个不错的列表属性以避免使用CSS进行动画处理.
If you are using CSS for your animations and not JS then the animations should now be smooth. It also depends on what parameters you are animating, here is a good list of properties to avoid animating with CSS.
我不会在此处复制整个列表，但是最重要的是填充，宽度，高度和位置.
I won't copy the whole list here, but the most important ones would be padding, width, height and position.
如果您需要支持比旧浏览器更高级的浏览器，请使用此(官方)来自w3c的polyfill ，它通过侦听滚动事件来重新创建路口观察器.因此，在较旧的浏览器上，它的速度仍然会变慢，您在此无能为力.但是在较新的产品上，性能会有所提高.
If you need to support older browsers than use this (official) polyfill from w3c, it recreates intersection observer with listening to scroll events. So it will still be slower on older browsers, nothing you can do about it here. But on newer ones there will be an increase in performance.
这篇关于动画正在减慢网页的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
