Animations are slowing the performance of web page

眉间皱痕 提交于 2019-12-05 09:41:23

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

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

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.

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.

Edit: 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.

You can use lazy loading for animations and perform in a better way the loading of view elements. JQuery Lazy

Since it looks like you're only using animated pulse, and are already adding and removing the animated class, I'd highly suggest using CSS animations.

CSS animations are rendered with the GPU and do not use the main thread like JavaScript does. They're super smooth and performant!

Check out this Codepen I found on Google creating a pulsing animated icon: https://codepen.io/igorsheg/pen/MBpwGw

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!