search

dixonandmoe / rellax

Lightweight, vanilla javascript parallax library
https://dixonandmoe.com/rellax/
MIT License
7.08k stars 876 forks source link

Undefined perfomance issue #112

Closed 7iomka closed 6 years ago

7iomka commented 6 years ago

Hello! Your plugin is awesome! However, I was faced with the fact that I can not determine why my site is very slow! Site url: https://goo.gl/AFcTKK I used your plug-in for the scene with the product, and also, earlier, I used it for the side images. But to use the site even on my powerful computer (DDR4 16gb, i7 6820hk, ssd, gtx970m) was impossible without brakes. So I left parallax only on stage with the product. However, this creates a brake for all other sections. Moreover, if you look at the site in the inspector's mode (Perfomance - CPU (4x slowdown) in chrome, then you can not do anything on the block with the product - it slows down so much! I ask to help to reveal the reason. I've done too much work to break up the picture into small particles in order to eventually abandon the parallax effect just because I can not make it smooth in my work. Thanks for any help!

p-realinho commented 6 years ago

Hey! Thanks for using Rellax. :)

I looked at the link and it is in fact reallyy slow right now. Although Rellax may be contributing to the issue, I don't think it's the main cause here, because I tried to remove all .rellax elements from the page and still got a lot of lag.

I think this may be fixable with a few will-change: transforms on some elements. The question is "which ones". I applied will-change: transform to the body * selector and got some decent FPS. But, of course, we don't wanna do that, so in your case I'd try to figure out which elements are requiring more resources and apply it to just those. I gotta say, using the devTools, I don't see any signs of repainting when scrolling, so you might be up to a "trial and error" sort of thing.

Keep in mind tho, will-change is not fully cross-browser compatible (I'm lookin' at you, IE 😒). I believe there was a workaround for that, but I can't seem to find/remember. I think it had something to do with translate3d or matrix3d...

Let me know if that helps. 👍

moeamaya commented 6 years ago

@7iomka I ran a javascript profile and it appears that the painting / composite layers is taking a ton of time and hurting performance.

My guess is that Chrome doesn't like the large image backgrounds + the multi layers backgrounds overlapping each other. Forces the entire browser to repaint essentially the entire time you're scrolling.

I suggest only using a small image as the background, placed exactly where you need it and not taking up the entire screen.