Polymer 1.0 dom-if vs 隐藏
Polymer 1.0 dom-if vs hidden
来自 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 重新标记。由于 'no restamp' 是默认行为 dom-if，因此 dom-if 和 hidden 之间有什么区别？hidden 如何提高性能？ Polymer 最佳实践指出 hidden 更便宜。
隐藏会干扰 display CSS 属性，因此 dom-if 是更好的选择。
如果你有
:host {display: block;}
在组件宿主元素上设置 hidden 不会隐藏它。
您还需要添加一个全局样式，例如
[hidden] { display: none !important;}
使其可靠地工作（并使其在不支持 hidden AFAIR 的 IE9 中工作）。
我的理解是 dom-if 不会标记 直到 表达式变为真值，但在这样做之后它的行为很像 [hidden] 。这样一来，dom-if 就是一个悲观主义者 [hidden]，它会尽可能推迟加盖时间。
这种 lazy-loading 方法在某些情况下很有用，因为在这些情况下，冲压模板会占用大量资源。例如，如果模板非常大且包含多个必须初始化的自定义组件。如果您刚刚在那里使用了 hidden 属性，那么您将支付创建所有这些属性的性能成本 DOM 只是为了它直到以后才可见。
对于简单的情况，例如隐藏或显示一些文本、一个 div 或两个等。hidden 属性可能更快，因为创建这些元素然后隐藏它们的成本可能少于创建一个 <template> 实例来保存您的代码，Polymer 设置侦听器以监视表达式的真实性，然后，当它变为真实时，所有用于标记模板、解析它以绑定表达式等的开销。对于 <template> 支持 polyfill 的浏览器尤其如此。
根据您的情况仔细考虑（最好进行测试）是最好的选择。通常差异可以忽略不计，但如果您的这部分代码恰好位于 dom-repeat 中，其中包含很多项目或任何经常发生的事情，请务必特别小心。差异可能会增加。
来自 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 重新标记。由于 'no restamp' 是默认行为 dom-if，因此 dom-if 和 hidden 之间有什么区别？hidden 如何提高性能？ Polymer 最佳实践指出 hidden 更便宜。
隐藏会干扰 display CSS 属性，因此 dom-if 是更好的选择。
如果你有
:host {display: block;}
在组件宿主元素上设置 hidden 不会隐藏它。
您还需要添加一个全局样式，例如
[hidden] { display: none !important;}
使其可靠地工作（并使其在不支持 hidden AFAIR 的 IE9 中工作）。
我的理解是 dom-if 不会标记 直到 表达式变为真值，但在这样做之后它的行为很像 [hidden] 。这样一来，dom-if 就是一个悲观主义者 [hidden]，它会尽可能推迟加盖时间。
这种 lazy-loading 方法在某些情况下很有用，因为在这些情况下，冲压模板会占用大量资源。例如，如果模板非常大且包含多个必须初始化的自定义组件。如果您刚刚在那里使用了 hidden 属性，那么您将支付创建所有这些属性的性能成本 DOM 只是为了它直到以后才可见。
对于简单的情况，例如隐藏或显示一些文本、一个 div 或两个等。hidden 属性可能更快，因为创建这些元素然后隐藏它们的成本可能少于创建一个 <template> 实例来保存您的代码，Polymer 设置侦听器以监视表达式的真实性，然后，当它变为真实时，所有用于标记模板、解析它以绑定表达式等的开销。对于 <template> 支持 polyfill 的浏览器尤其如此。
根据您的情况仔细考虑（最好进行测试）是最好的选择。通常差异可以忽略不计，但如果您的这部分代码恰好位于 dom-repeat 中，其中包含很多项目或任何经常发生的事情，请务必特别小心。差异可能会增加。