What is the Most Performant way of hiding/showing a group of elements inside of a webpage? Considering hundreds of such groups

HTML & CSS
1

What is the Most Performant way of hiding/showing a group of elements inside of a webpage?

I’m making a web application, in which let’s say at a certain moment I have 100 editor panels with 10 rows each (row - which consist of a label at left and a data-field on right, such as input field, color picker, image picker, and etc.)

And at a moment, only 1 of the editor panel is workable, and all else is hidden.

Regarding this imagined stress case, what should be the most performant way of showing/hiding, or better said - keeping the hidden panels not drag down page performance?

I was wondering at the use of having only 1 panel created with js/jquery, and removing or deleting the one not in need. But I must keep the editor panels’ current state, and not lost. Thought I’d go for creating a nested array or tons of variables to store every panel’s row’s current data state, but that would be less feasible.

Hence, any inputs by knowledgeable people here much appreciated :slight_smile:

I had read this article on Sitepoint before: https://www.sitepoint.com/hide-elements-in-css/ . According to which,

display: none has been the favorite solution to hide elements for many years, but it’s been superseded by more flexible, animatable options. It’s still valid, but perhaps only when you want to permanently hide content from all users. transform or opacity are better choices when considering performance.

The panels in my app would be better off having a hiding and showing animation, to show some smoothness. Hence I wonder, if keeping elements hidden with transform and/or opacity properties are good for performance, I could use them for animations too. But ofcourse, I can animate them with those properties and still use “a better way to keep good performance”, which I’m seeking to know more :slight_smile:

2

I would like to know what you are actually doing, rather than how you think you’re going to do it.

Please give us a high level overview of what you have going on.

3 Likes
3

Performance aside, the behaviour of hiding with opacity and hiding with display none will be totally different. Opacity will leave a gap where it was. Display none will remove it from the flow and close the gap.
Which behaviour best suits your use case?

1 Like
4

This is the only real good solution. Only create what is needed. If you need to keep the state use cookies, local storage or in best case save the state in the database with the backend

5

What you describe is close to a database (to me). In my example below I did store a JSON file in a database. Load the entire data in localStorage. Then filtering out in memory what needed for a particular task.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.