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

在此示例中，您将获得几个connectedCallback和几个disconnectedCallback：每个appendChild一个。但是，所有这些背对背appendChild调用都发生在事件循环的同一周期中。

因此，尽管您得到四个单独的connectedCallback调用以及三个单独的disconnectedCallback调用，该节点仅被渲染一次，并附加到#two。 >

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

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

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

1 个答案: