javascript - 在调用 `connectedCallback` 之前，自定义元素的 `disconnectedCallback` 是否可以多次调用？

Question

spec说:

However, note that connectedCallback can be called more than once, so any initialization work that is truly one-time will need a guard to prevent it from running twice.

这是什么意思？是不是说 connectedCallback 可以在 disconnectedCallback 被调用之前多次调用(由浏览器引擎调用)？

如果每个 disconnectedCallback 总是有一个 connectedCallback，那么该语句就毫无意义。

显然，我会在 disconnectedCallback 中清理我在 connectedCallback 中创建的任何内容，因此我不会让事情“运行两次”。

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);

在此示例中，您将获得多个 connectedCallback 和多个 disconnectedCallback:每个 appendChild 一个。然而，所有这些背靠背的 appendChild 调用都发生在事件循环的同一周期中。

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

这并不总是一个问题，但由于大多数现代浏览器都试图以 60 FPS 的速度进行渲染，这意味着您每个渲染周期只有不到 17 毫秒的时间来执行所有 JavaScript，和 让浏览器为给定的帧执行所有解析/流动/渲染。

如果它成为一个问题，您可以通过将适当的工作推迟到 requestAnimationFrame 回调来防止此类事情发生，然后如果您有 future 的 connectedCallback 则取消该 rAF下一个渲染事件之前的事件，因为您可能只关心最后一个。