Are grouped elements more performant?

Hi all,

I’m working on a website with many elements grouped and the editor is really slow. I imagine that grouping elements is a good practice for designing a website but what about performance?

  1. Is grouping elements neutral to performance or does it increases the processing time (within the editor and in production) and therefore should be avoided on large websites?

  2. Is there a real benefice to hide/show/expand/collapse a group of elements rather than each element individually?

Thx for your answers :slight_smile:

up

If you group them, the lower one will always go up when the higher gets collapsed (if you don’t group them it depends on other elements as well). I think this is the only change in behavior. The performance itself is not better. I guess it’s even a little bit slower when grouped because it has to find the group children first and then collapse each of them (but it’s unnoticeable, of course).

I haven’t found grouping to be all that useful, at least not nearly as useful as putting elements inside an empy transparent box element and treating it like a div.

You can always just use a variable to declare a group by chaining objects JQuery style:

const grp = $w('#el1, #el2, Text');

@skmedia I think grouping element is only required when you have to work with mouse events. I noticed that groups trigger events on their children but not themself which is better than box. You can trigger the same event on all children but not the boundering box.

@plomteuxquentin But for box you can do:

$w("#box").children.forEach(e => {e.onClick(event => {/*code*/})});

A little bit longer code, but without all the problems that come with groups.

@jonatandor35 I agree with JD. It’s always best to control how events propagate especially for future proofing.