Все зависит от того, что вы делаете в обратных вызовах, и сколько событий присоединения / отсоединения вы можете разумно ожидать.Если это действительно сложно, и если ваш узел может много перемещаться в 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, а затем отменить этоrAF, если у вас есть будущие connectedCallback события до следующего события рендеринга, поскольку вы, вероятно, заботитесь только о самом последнем.