Polymer 1.0 dom-if 与隐藏答案

【问题标题】：Polymer 1.0 dom-if vs hiddenPolymer 1.0 dom-if 与隐藏
【发布时间】：2017-02-13 03:31:26
【问题描述】：

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

当 if 变为 false 时，标记的内容会被隐藏但不会从 dom 中删除。如果随后再次变为真，则内容被简单地重新显示。之所以使用这种方法，是因为它具有良好的性能特点：创建模板内容的费用只需支付一次，而且是懒惰的。

我认为这是hidden 属性的行为，因此hidden 比dom-if 便宜，因为模板不会被hidden 重新标记。由于'无重新标记'是默认行为dom-if，dom-if 和hidden 之间有什么区别，hidden 的性能如何更好？ Polymer 最佳实践指出hidden 更便宜。

【问题讨论】：

这个问题仍然与 Polymer 2.x 相关

标签： polymer polymer-1.0

【解决方案1】：

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

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

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

根据您的情况仔细考虑（最好进行测试）是最好的选择。通常这些差异可能可以忽略不计，但如果您的这部分代码恰好位于 dom-repeat 中，其中包含很多项目或任何经常发生的事情，请特别注意。差异可能会增加。

【讨论】：

我最近研究了 hidden 与 dom-if 的性能，我得出的非常非常普遍的结论是，如果隐藏的内容包含 Polymer 组件，dom-if 可能更快;如果只是原生 HTML 元素，hidden 更快。

【解决方案2】：

隐藏会干扰display CSS 属性，因此dom-if 是更好的选择。

如果你有

:host {display: block;}

在组件宿主元素上设置hidden 不会隐藏它。您还需要添加一个全局样式，例如

[hidden] { display: none !important;}

使其可靠工作（并使其在不支持hiddenAFAIR 的IE9 中工作）。

【讨论】：