Problem: Your page has many DOM elements, and you want it to render faster
Problem: Your page has many DOM elements, and you want it to render faster.
Solution: Use CSS content-visibility to avoid painting off-screen items, automatically. Off-screen items render later when they’re needed. 👍
More: https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
You might wonder, why not use display: none?
1. Setting "content-visibility: auto" will automatically avoid painting until it's on screen.
2. With content-visibility, rendered content preserves rendering state. So, if the content is shown again later, it re-renders quicker.