DOM 성능 최적화 — Layout Thrashing, DocumentFragment, MutationObserver

// ❌ 나쁜 패턴 — Layout Thrashing
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  const width = box.offsetWidth;    // 읽기 → 강제 레이아웃
  box.style.width = width * 2 + 'px'; // 쓰기 → 레이아웃 무효화
  // 다음 반복에서 또 읽기 → 또 강제 레이아웃... 반복!
});

// ✅ 좋은 패턴 — 읽기 먼저, 쓰기 나중
const boxes = document.querySelectorAll('.box');

// 1단계: 읽기를 전부 먼저
const widths = Array.from(boxes).map(box => box.offsetWidth);

// 2단계: 쓰기를 전부 나중에
boxes.forEach((box, i) => {
  box.style.width = widths[i] * 2 + 'px';
});
// 레이아웃 계산은 딱 1번!

// ❌ 느린 패턴 — 매번 DOM에 삽입 (리플로우 1,000번)
const list = document.getElementById('list');

for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `항목 ${i}`;
  list.appendChild(li); // 매번 리플로우 가능
}

// ✅ 빠른 패턴 — DocumentFragment 사용 (리플로우 1번)
const list = document.getElementById('list');
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `항목 ${i}`;
  fragment.appendChild(li); // 메모리에서만 조작, 리플로우 없음
}

list.appendChild(fragment); // 한 번에 삽입, 리플로우 1번

// innerHTML — 문자열 연결 방식
const items = Array.from({ length: 1000 },
  (_, i) => `<li>항목 ${i}</li>`
).join('');
list.innerHTML = items; // 파싱 + 삽입 1번

// ❌ setTimeout — 렌더링 타이밍과 무관
setTimeout(() => {
  element.style.transform = `translateX(${pos}px)`;
}, 0);

// ✅ rAF — 다음 프레임 직전에 실행
requestAnimationFrame(() => {
  element.style.transform = `translateX(${pos}px)`;
});

let start = null;

function animate(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;

  // 500ms 동안 오른쪽으로 300px 이동
  const distance = Math.min(progress / 500, 1) * 300;
  element.style.transform = `translateX(${distance}px)`;

  if (progress < 500) {
    requestAnimationFrame(animate); // 다음 프레임 예약
  }
}

requestAnimationFrame(animate);

let ticking = false;

window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      // 스크롤 위치에 따른 DOM 업데이트
      header.classList.toggle('shrink', window.scrollY > 100);
      ticking = false;
    });
    ticking = true;
  }
});

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('자식 노드가 변경됨:', mutation.addedNodes);
    }
    if (mutation.type === 'attributes') {
      console.log('속성 변경:', mutation.attributeName);
    }
  });
});

// 관찰 시작
observer.observe(document.getElementById('target'), {
  childList: true,    // 자식 추가/제거 감시
  attributes: true,   // 속성 변경 감시
  subtree: true,      // 하위 트리 전체 감시
  characterData: true // 텍스트 내용 변경 감시
});

function waitForElement(selector) {
  return new Promise(resolve => {
    // 이미 존재하면 즉시 반환
    const existing = document.querySelector(selector);
    if (existing) return resolve(existing);

    const observer = new MutationObserver((_, obs) => {
      const el = document.querySelector(selector);
      if (el) {
        obs.disconnect(); // 찾으면 즉시 정리
        resolve(el);
      }
    });

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

// 사용
const widget = await waitForElement('.third-party-widget');
widget.style.border = '2px solid red';

// 컴포넌트 해제 시
observer.disconnect();

// 또는 한 번만 감시하고 싶을 때
const observer = new MutationObserver((mutations, obs) => {
  // 처리 후 즉시 해제
  obs.disconnect();
});