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

Question

规范说：

但是，请注意，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：每个 s 一个appendChild。然而，所有这些背靠背appendChild调用都发生在事件循环的同一周期中。

因此，虽然您收到四个单独的connectedCallback调用以及三个单独的disconnectedCallback调用，但该节点仅呈现一次，并附加到#two.

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

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