Comments (5)
Only transforming the element(s) that are in the viewport is something that is on the roadmap. I experimented with using IntersectionObserver for this in order to keep the detection off the main thread and came up with some good results. I just need to find the time to fully test this and implement it.
from asscroll.
Hi @SiddharthSham, transforming individual sections has been something I've wanted to experiment with for some time. However my brief tests have shown that using the CSS property contain: content
on the parent element of the transformed element increases performance. This of course only works when the parent element is no bigger than the size of the viewport, since it essentially tells the browser not to worry about calculating layout and paint regions outside of that element. (Unfortunately this CSS property isn't available on Safari currently but desktop usage isn't high at all, and the default on mobile is to disable the transformed element anyway)
This is what ASScroll uses. I've done some tests comparing this setup to a setup without it and saw some good performance increases. As well as testing it against a fairly basic setup that transforms sections separately which showed very similar performance between the two. So I've currently opted for the contain
setup since it is usually much easier to deal with a single transformed element rather than multiple. I've also seen issues with Locomotive Scroll (and others) where the sections end up sitting at the top and bottom of the viewport due to miscalculations from things like resizing the window. Which this route avoids.
I do want to test this further, but if you wanted to run your own tests and provide your results I'd be very interested to see them.
from asscroll.
Hey @ashthornton, thanks for the detailed reply! I hadn't thought about using contain: content
in order to improve performance; will definitely look into it more.
My concerns are more about the GPU memory usage. I tested two setups - one which works like ASScroll, (similar to this), and another where I transformed only the elements that had to be in viewport, and removed the transforms when not required.
What I noticed is that in the case of preserving the full scroll height, the GPU memory usage was directly proportional to the height of the page. (For a simple page about 2000vh tall, DevTools layers panel reported using ~300MB). Comparing this to the other setup, the memory usage was about 8-10MB max, which is a considerable improvement.
I'm not sure how to profile this properly, though. Is there something you would suggest?
from asscroll.
I'm interested in this too, in my own tests it was also appearent that the approach @SiddharthSham mentioned was quite a lot more performant.
from asscroll.
@ashthornton I'm very curious to see your implementation using IntersectionObserver - I attempted something similar and had a lot of bugs when the page was under load (IntersectionObserver didn't fire the callbacks in time). I finally had to scrap that approach in favor of running the logic on the main thread.
from asscroll.
Related Issues (20)
- Provide way to detect if the page is actively being transformed
- Fix auto-inversion of target position when using .scrollTo on touch devices
- Add a jumpTo type method HOT 1
- Scroll jumps up when enabling
- Scroll jumps back to initial start position on Nuxt? HOT 1
- Works in Codepen only HOT 1
- Jumps farther than expected in firefox HOT 2
- Is it possible to have tabindex inputs and buttons work with AsScroll? HOT 2
- Is it possible to disable AsScroll? HOT 1
- How to know when an element scrolls into view? HOT 2
- Window jumps to top when using a form in Safari v15.4 HOT 2
- Does not scroll while mouse is over iframe. HOT 4
- How to properly remove event listener on window.object? HOT 3
- Asscroll not working with scrolltrigger which consist horizontal scroll HOT 1
- Position fixed seems to kill performances on safari HOT 1
- Position Fixed Problems HOT 1
- Tab focus not working for horizontal scroll
- Not working with Next.js HOT 1
- After a few seconds, couldn't scrolling with nextjs HOT 5
- Unable to scroll on div with absolute
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from asscroll.