Polymer 1.0 dom-if vs hidden

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

When, if it becomes false, stamped content is hidden, but not removed from dom. When, if it later becomes true again, the content will simply be re-displayed. This approach is used due to its advantageous characteristics: the costs of creating the contents of the template are paid only once and lazily.

I thought this was a hidden attribute behavior, so hidden cheaper than dom-if , as the template will not be reloaded with hidden . Since "no restamp" is the default behavior of dom-if , what is the difference between dom-if and hidden and how hidden better for performance? Excellent practices in polymers indicate that hidden cheaper.

+5
source share
2 answers

My understanding of this is that dom-if not a stamp until the expression becomes believable, but after that it behaves just like [hidden] . Thus, dom-if is a pessimistic [hidden] that delays embossing for as long as possible.

This lazy loading approach is favorable in certain situations when embossing a template will be very resource intensive. For example, if the template was very large with several custom components that need to be initialized. If you just used the hidden attribute, you would pay for the cost of creating all of this DOM so that it is not visible until the end.

For simple cases, such as hiding or displaying some text, a div or two, etc., the hidden attribute may be faster, because the cost of creating these elements and hiding them may be less than creating a <template> instance to store your When Polymer sets up the listeners to control the expression for truthfulness, then when it becomes true, all the overhead for stamping the template, parsing it for binding expressions, etc. This is especially true for browsers where <template> support is polyphored.

Thinking about it (and, ideally, testing it) is the best way. Often the differences may be minor, but they are especially careful if this part of your code is in dom-repeat with lots of items or something that often happens. The difference may add up.

+8
source

The hidden one interferes with the CSS display property and therefore dom-if is a better option.

If you

 :host {display: block;} 

the hidden parameter of the component host element will not hide it. You also need to add a global style like

 [hidden] { display: none !important;} 

so that it works reliably (and so that it works in IE9, which does not support hidden AFAIR).

+3
source

Source: https://habr.com/ru/post/1264143/


All Articles