可以在调用`disconnectedCallback`之前多次调用自定义元素的`connectedCallback`吗？

Question

spec说：

但是，请注意，connectedCallback可以被多次调用，因此任何真正一次性的初始化工作都需要一个防护来防止它运行两次。

这是什么意思？是不是说connectedCallback被调用之前可以多次调用disconnectedCallback（通过浏览器引擎）？

如果每个connectedCallback总有一个disconnectedCallback，那么这个陈述是毫无意义的。

我显然会清理我在connectedCallback的disconnectedCallback创造的任何东西，因此我不会有“跑两次”的东西。

Answer 1

所有这些都取决于您在回调中所做的事情，以及您可能合理预期的附加/分离事件数量。如果它真的很复杂，如果您的节点可能在DOM中移动很多，那么绝对值得考虑事件与渲染。换句话说，事件循环考虑因素。请看以下示例：

var square = document.createElement('custom-square');
var one = document.getElementById('one');
var two = document.getElementById('two');
one.appendChild(square);
two.appendChild(square);
one.appendChild(square);
two.appendChild(square);

在这个例子中，你会得到几个connectedCallbacks和几个disconnectedCallbacks：每个appendChild一个。然而，所有这些背对背的appendChild调用都发生在事件循环的同一循环中。

因此，当您获得四个单独的connectedCallback调用以及三个单独的disconnectedCallback调用时，该节点仅渲染一次，附加到#two。

这并不总是一个问题，但是由于大多数现代浏览器尝试以60 FPS渲染，这意味着每个渲染周期不到17毫秒就可以完成所有JavaScript，并且浏览器可以进行所有解析/给定帧的流动/渲染。

如果它成为一个问题，你可以通过将适当的工作推迟到requestAnimationFrame回调来防范这些事情，然后如果你在下一个渲染事件之前有未来的connectedCallback事件就取消那个rAF，因为你可能只关心最后一个。