How to optimize a "huge" list so that it doesn't freeze?

Question

css

Hey!
There is such a problem. There is a list, a very large one. Because too many elements the browser starts to lag, if there are still norms on the computer, then the ipad is generally full of brakes. I wanted to optimize it, make pagination, and display in parts not a variant, too many inconveniences. I thought I could do it in such a way as to hide elements that are not currently shown with display: none, and assign them display: block as they scroll. Is there a ready-made script for this, some kind of jQuery plugin, and in general how can such moments be optimized?

Don't say what you know. When I set elements to display: none; Nothing slows down

Answer 1

Check out: clusterize
Maybe this is what you need

Answer 2

Is it not an option to do dynamic loading of new elements when scrolling the page?

Answer 3

display: none;will only remove elements from the output, but they will remain in the code.
The best option is to download in parts (page by page, infinite scroll)

Answer 4

But didn’t you think, for example, that everything slows down for you because of scripts, and not because of the list of elements?
You need to look at how much a page of memory takes, what gives the main load, etc., etc.
In Chrome, these are: F12, the "Timeline" and "Profiles" tabs. After that, already think about what and how could be optimized.
display: nonewill obviously not help, and loading the page in parts will lead to the same situation when the entire list is loaded. Therefore, optimize and, in which case, think about pagination.