Polymer 1.0 dom-if 与隐藏

Question

来自 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.

我认为这是 hidden 的行为属性，因此 hidden比 dom-if 便宜因为模板不会被重新标记 hidden .由于“不重新印章”是默认行为 dom-if , dom-if 和有什么区别和 hidden hidden 怎么样？性能更好？ Polymer 最佳实践指出 hidden更便宜。

Answer 1

我对它的理解是 dom-if 直到表达式变为真时才会标记，但这样做之后它的行为就像 [hidden] 一样。这样，dom-if 是一个悲观的 [hidden]，它会尽可能长时间地推迟标记。

这种延迟加载方法在某些情况下是有利的，在这些情况下，标记模板会占用大量资源。例如，如果模板非常大，需要初始化多个自定义组件。如果您刚刚使用了 hidden 属性，那么您将付出创建所有 DOM 的性能成本，只是因为它直到以后才可见。

对于简单的情况，例如隐藏或显示一些文本、一个或两个 div 等。hidden 属性可能更快，因为创建这些元素然后隐藏它们的成本可能低于创建一个 <template> 实例来保存您的代码，Polymer设置监听器来监视表达式的真实性，然后，当它变得真实时，标记模板的所有开销，解析它以绑定(bind)表达式等。对于 <template> 支持被填充的浏览器尤其如此。

为您的情况仔细考虑(并理想地对其进行测试)是最好的方法。通常差异可能可以忽略不计，但如果您的代码的这部分恰好位于 dom-repeat 中，其中包含很多项目或任何经常发生的事情，请特别注意。差异可能会增加。