Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Polymer 1.0 dom-if vs hidden

From https://www.polymer-project.org/1.0/docs/api/dom-if

When if becomes falsey, the stamped content is hidden but not removed from dom. When if subsequently becomes truthy again, the content is simply re-shown. This approach is used due to its favorable performance characteristics: the expense of creating template content is paid only once and lazily.

I thought this was the behavior of hidden attribute, thus hidden being cheaper than dom-if since the template would not get restamped with hidden. Since 'no restamp' is the default behavior dom-if, what is the difference between dom-if and hidden and how is hidden better for performance? Polymer best practices notes that hidden is cheaper.

like image 695
dman Avatar asked Feb 13 '17 03:02

dman


People also ask

What is Dom if?

Element <dom-if> (DomIf) Custom element that conditionally stamps and hides or removes template content based on a boolean flag.

What is Dom If in HTML?

The HTML DOM is an Object Model for HTML. It defines: HTML elements as objects. Properties for all HTML elements. Methods for all HTML elements.

Which helper element will you use to improve the memory footprint of large and coplex sites?

Conditional templates introduce some overhead, so they shouldn't be used for small UI elements that could be easily shown and hidden using CSS. Instead, use conditional templates to improve loading time or reduce your page's memory footprint.


1 Answers

My understanding of it is that dom-if does not stamp until the expression becomes truthy, but after doing so it behaves much like [hidden] does. In that way dom-if is a pessimistic [hidden] that defers stamping for as long as possible.

This lazy-loading approach is favorable in certain situations where stamping the template would be very resource intensive. For example if the template was very large with multiple custom components that have to be initialized. If you had just used the hidden attribute there you would pay the performance cost of creating all of that DOM only for it to not be visible until later.

For simple cases, such as hiding or showing some text, a div or two, etc. the hidden attribute may be faster because the cost of creating those elements and then hiding them may be less than creating a <template> instance to hold your code, Polymer setting up listeners to monitor the expression for truthiness, then, when it becomes truthy, all the overhead for stamping the template, parsing it for binding expressions, etc. This is particularly true for the browsers where <template> support is polyfilled.

Thinking it through for your situation (and ideally testing it) is the best route to take. Often times the differences may be negligible but do take special care if this part of your code happens to be in a dom-repeat with a lot of items or anything that happens frequently. The difference could add up.

like image 180
zacharytamas Avatar answered Oct 16 '22 23:10

zacharytamas