Polymer 1,0 дом-если против спрятана

Question

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

Когда, если становится falsey, то штампованные содержание скрыто, но не удаляется из йот. Когда, если впоследствии снова станет правдивым, контент просто будет повторно показан. Такой подход используется благодаря его выгодным характеристикам: затраты на создание контента шаблона оплачиваются только один раз и лениво.

Я думал, что это было поведение hidden атрибута, таким образом hidden быть дешевле, чем dom-if поскольку шаблон не получил бы сменены отметки с hidden. Так как «no restamp» - это поведение по умолчанию dom-if, в чем разница между dom-if и hidden и как hidden лучше для производительности? Рекомендации по применению полимера подтверждают, что hidden дешевле.

Answer 1

Мое понимание этого является то, что dom-if не штамповать пока выражение не станет truthy, но после того, как делать так, он ведет себя так же, как [hidden] делает. Таким образом dom-if является пессимистичным [hidden], который откладывает тиснение как можно дольше.

Этот подход с ленивой загрузкой благоприятен в определенных ситуациях, когда тиснение шаблона будет очень ресурсоемким. Например, если шаблон был очень большим с несколькими настраиваемыми компонентами, которые должны быть инициализированы. Если вы только что использовали атрибут hidden, вы заплатили бы за производительность за создание всего этого DOM только для того, чтобы он не был виден до поздней.

Для простых случаев, например, сокрытие или показ какой-нибудь текст, в DIV или два, и т.д. атрибут hidden может быть быстрее, потому что стоимость создания этих элементов, а затем пряча их может быть меньше, чем создание <template> экземпляра для хранения ваш код, Polymer, настраивает слушателей для отслеживания выражения для правдоподобия, тогда, когда он становится правдивым, все накладные расходы для штамповки шаблона, разбора его для привязки выражений и т. д. Это особенно справедливо для браузеров, где поддержка <template> полиполнена.

Подумайте об этом, чтобы ваша ситуация (и в идеале ее проверяла) - лучший маршрут для принятия. Часто разницы могут быть незначительными, но особенно осторожны, если эта часть вашего кода находится в dom-repeat с большим количеством предметов или чего-то, что часто случается. Разница может складываться.

Answer 2

Скрытый вмешивается в свойство CSS display и поэтому dom-if - лучший вариант.

Если у вас есть

:host {display: block;} 

установки hidden на компоненты принимающего элемента не будет скрывать. Вы также должны добавить глобальный стиль как

[hidden] { display: none !important;} 

, чтобы заставить его работать надежно (и заставить его работать в IE9, который не поддерживает hidden Afair).