DOM Node у вакуумі.
DOM API дозволяє нам створювати вузли, що не приєднані до документа. І поки ми їх туди не вставимо, вони просто висять у памʼяті та не впливають на рендеринг сторінки.
Тому будь-який вузол може перебувати фактично у двох станах — приєднаний до живого DOM та, очевидно, відʼєднаний. І так, ми можемо саме відʼєднати елемент, не знищуючи його.
Для цього навіть існують спеціальні методи:
removeChild(childNode) аби прибрати з дерева дочірній вузол, та node.remove() для самоусунення. Що важливо — вузол при цьому залишається в памʼяті.На практиці це дозволяє робити складні дії над елементом, а то й цілим піддеревом, не вбиваючи швидкодію сторінки. Операції з DOM-деревом часто призводять до суттєвого навантаження на рендеринг. А так — можна зібрати в памʼяті фрагмент дерева будь-якої складності, і потім вставити в фактичний DOM за один раз, зменшивши кількість потенційних викликів reflow та repaint до мінімуму.
Є й інший бік медалі. Уявімо, що у вас є елемент і два скрипти. Один, до прикладу, змінює властивості його батька, додає й прибирає дочірні елементи. А другий, припустимо, тримає постійне посилання саме на цей вузол і читає розмір та розташування елемента на сторінці.
І от якщо перший скрипт для оптимізації вилучає елемент з DOM для операцій, а другий у цей час намагається прочитати його геометрію, то результат буде дещо передбачуваним. Скрипт не впаде — він має посилання на вузол, тож усе буде чудово. Просто розміри й розташування будуть часто нульові — наприклад, у
getBoundingClientRect(). Халепа?Може й так, але запобігти їй можна за допомогою однієї-однісінької властивості будь-якого DOM-вузла —
Node.isConnected. Цей ґеттер повідомляє нам, чи вузол зараз знаходиться в живому DOM, а чи теліпається в памʼяті.І, що особливо зручно,
isConnected працює й для вкладених вузлів. Тобто це не заміна !!Element.parentElement, повноцінний сигнал — піддерево, у якому знаходиться вузол, зараз не вDOMа. І додавши перевірку на те, чи елемент приєднаний до DOM, ми можемо знати, чи варто в цей момент здійснювати обчислення.Ось тут невеличка стіна консольлогів, яка демонструє, як працює
isConnected:
console.group('1. Create element in memory:');
const element = document.createElement('section');
console.log(`element.parentNode: ${!!element.parentNode}`);
console.log(`element.isConnected: ${element.isConnected}`);
console.groupEnd();
console.group('2. Add child:');
element.innerHTML = '<div><p>Hello</p></div>';
const p = element.querySelector('p');
console.log(`p.parentNode: ${!!p.parentNode}`);
console.log(`p.isConnected: ${p.isConnected}`);
console.groupEnd();
console.group('3. Append element to live DOM:');
document.body.appendChild(element);
console.log(`p.isConnected: ${p.isConnected}`);
console.groupEnd();
console.group('4. Remove p:');
p.remove();
console.log(`element.isConnected: ${element.isConnected}`);
console.log(`p.isConnected: ${p.isConnected}`);
console.groupEnd();
Ставте 🔥, якщо дізналися про
isConnected лише сьогодні, і ❤️, якщо знали про це давно.@babichdev
P.S. І заберіть уже ті кілька квитків на запис нової Співбесіди на сцені.