DOM Rendering Performance

What potential performance issue exists with this MutationObserver usage?

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === 1) {
        node.style.opacity = '0';
        requestAnimationFrame(() => {
          node.style.transition = 'opacity 0.3s';
          node.style.opacity = '1';
        });
      }
    });
  });
});

observer.observe(document.body, { childList: true, subtree: true });

Incorrect mutation type
Memory leak in closure
Excessive style recalculation
This code can cause excessive style recalculation because: 1) It triggers style changes for every added DOM node, 2) Creates forced synchronous layout when reading styles immediately after changes, 3) May cause unnecessary reflows when many nodes are added simultaneously, 4) Doesn't batch style updates efficiently. To optimize: const observer = new MutationObserver(mutations => { const addedNodes = []; mutations.forEach(mutation => { mutation.addedNodes.forEach(node => { if (node.nodeType === 1) addedNodes.push(node); }); }); if (addedNodes.length) { addedNodes.forEach(node => node.classList.add('hidden')); requestAnimationFrame(() => { addedNodes.forEach(node => node.classList.add('fade-in')); }); } }); // CSS .hidden { opacity: 0; } .fade-in { opacity: 1; transition: opacity 0.3s; }
Wrong transition timing

Next Question (17/20)