JavaScriptにおけるIntersectionObserverとgetBoundingClientRectの比較：パフォーマンスの徹底解説

window.addEventListener('scroll', () => {
  const element = document.getElementById('ad-banner');
  if (!element) return;

  const rect = element.getBoundingClientRect();
  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
  const windowWidth = window.innerWidth || document.documentElement.clientWidth;

  const isVisible = (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= windowHeight &&
    rect.right <= windowWidth
  );

  if (isVisible) {
    trackImpression(element.dataset.adId);
  }
}, { passive: true });

[Frame Start] 
  ──> JavaScript: mutate class (.active)
  ──> JavaScript: getBoundingClientRect() ───► [FORCED REFLOW: STALLS MAIN THREAD]
  ──> JavaScript: read next element
  ──> JavaScript: getBoundingClientRect() ───► [FORCED REFLOW AGAIN]
  ──> Frame Budget Exceeded (>16.6ms) ───► DROPPED FRAMES & VISIBLE JANK

const observer = new IntersectionObserver((entries, observerInstance) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const target = entry.target;
      
      // Load lazy image from data-src
      if (target instanceof HTMLImageElement && target.dataset.src) {
        target.src = target.dataset.src;
        target.removeAttribute('data-src');
      }

      // Stop observing once loaded
      observerInstance.unobserve(target);
    }
  });
}, {
  root: null, // null defaults to top-level viewport
  rootMargin: '200px 0px', // Pre-fetch 200px before entering screen
  threshold: 0.1, // Trigger when 10% visible
});

document.querySelectorAll('img[data-src]').forEach((img) => {
  observer.observe(img);
});

import { useEffect, useRef, useState, type RefObject } from 'react';

interface IntersectionOptions extends IntersectionObserverInit {
  freezeOnceVisible?: boolean;
}

export function useIntersectionObserver(
  elementRef: RefObject<Element | null>,
  {
    threshold = 0,
    root = null,
    rootMargin = '0px',
    freezeOnceVisible = false,
  }: IntersectionOptions = {}
): IntersectionObserverEntry | undefined {
  const [entry, setEntry] = useState<IntersectionObserverEntry>();
  const frozen = entry?.isIntersecting && freezeOnceVisible;

  useEffect(() => {
    const node = elementRef?.current;
    const hasIOSupport = !!window.IntersectionObserver;

    if (!hasIOSupport || frozen || !node) return;

    const observer = new IntersectionObserver(
      ([observedEntry]) => {
        setEntry(observedEntry);
      },
      { threshold, root, rootMargin }
    );

    observer.observe(node);

    return () => {
      observer.disconnect();
    };
  }, [elementRef, threshold, root, rootMargin, frozen]);

  return entry;
}

import { useRef } from 'react';
import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';
import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <div className="h-64 animate-pulse bg-gray-100 dark:bg-gray-800 rounded-xl" />,
});

export function AnalyticsSection() {
  const triggerRef = useRef<HTMLDivElement>(null);
  const entry = useIntersectionObserver(triggerRef, {
    rootMargin: '300px', // Start download 300px before scroll reach
    freezeOnceVisible: true,
  });

  const isVisible = !!entry?.isIntersecting;

  return (
    <div ref={triggerRef} className="my-8 min-h-[250px]">
      {isVisible ? <HeavyChart /> : <div className="h-64" />}
    </div>
  );
}

// Valid on-demand use: Calculating popover coordinates on click
function positionPopover(triggerElement, popoverElement) {
  const triggerRect = triggerElement.getBoundingClientRect();
  
  popoverElement.style.position = 'fixed';
  popoverElement.style.top = `${triggerRect.bottom + 8}px`;
  popoverElement.style.left = `${triggerRect.left}px`;
}