A Hidden Section with Complex Script

#1

I have a TW macro which calls several other macros to perform some tasks! It has some UIs, like inputbox, radio buttons, sliders, …

In some special use cases, without adding complexity to macro, I use a CSS class to hide part of UI

Example

<section class="kk-ui-main">
<$list ....
.
.
   <$let ....

Some computations, processing go here ...
.
</section>

I just dynamically set the display of property of kk-ui-main class to none!

The other solution is to put the whole section inside a $list widget and using a filter prevent processing the section!

From performance point of view, which method is better?

  1. Use a conditional class to set its display to none and hide the section?
  2. Use a $list widget and put the whole section inside it and conditionally decide to process the section or not? ($list acts like an if construct)

In case (1) does TW do the whole processing and browser just hide the output? Or TW ignores the content behind a section with display set to none?

1 Like
#2

2 is the “faster” option.

In case 1 the whole thing is executed even if hidden. In case 2 the elements inside the list will only be seen if the list conditions says so.

From a performance standpoint what really matters, how many HTML elements are created. So a long list of links, which is hidden may cause a problem, since the refresh mechanism will still draw them even if CSS is set to hidden.

If you create eg 10 extra DIVs that show some content, it probably won’t matter too much.