Intersection and Resize Observers

const observer = new IntersectionObserver(entries => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      console.log(entry.target, 'is visible');
    }
  }
}, options);

observer.observe(element);
observer.unobserve(element);
observer.disconnect();         // stop observing all targets
const records = observer.takeRecords(); // flush pending entries

const observer = new IntersectionObserver(callback, {
  root: null,            // null = viewport; or any scrolling ancestor element
  rootMargin: '0px',     // CSS margin syntax: '100px 0px' expands root box
  threshold: 0,          // 0–1 or array: fire when this fraction is visible
  // threshold: [0, 0.25, 0.5, 0.75, 1] — fire at each 25% step
});

const imageObserver = new IntersectionObserver((entries, obs) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
    const img = entry.target;
    img.src = img.dataset.src;
    img.removeAttribute('data-src');
    obs.unobserve(img);              // stop after loading
  }
}, { rootMargin: '200px' });        // load 200px before entering viewport

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

const sentinel = document.getElementById('sentinel'); // empty div at bottom of list

const scrollObserver = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) loadMore();
}, { threshold: 0.1 });

scrollObserver.observe(sentinel);

const animObserver = new IntersectionObserver(entries => {
  for (const entry of entries) {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  }
}, { threshold: 0.2 });

document.querySelectorAll('.animate').forEach(el => animObserver.observe(el));

// Add a sentinel above the sticky header; when it exits viewport, header is sticky
const sentinel = document.createElement('div');
document.querySelector('header').before(sentinel);

new IntersectionObserver(([entry]) => {
  header.classList.toggle('is-sticky', !entry.isIntersecting);
}).observe(sentinel);

new IntersectionObserver(([entry]) => {
  console.log(`${Math.round(entry.intersectionRatio * 100)}% visible`);
}, { threshold: Array.from({ length: 101 }, (_, i) => i / 100) }).observe(el);

const resizeObserver = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { contentRect, target } = entry;
    console.log(target, contentRect.width, contentRect.height);
  }
});

resizeObserver.observe(element);
resizeObserver.observe(element, { box: 'border-box' }); // or 'content-box', 'device-pixel-content-box'
resizeObserver.unobserve(element);
resizeObserver.disconnect();

// ResizeObserverSize
entry.contentBoxSize[0].inlineSize;  // logical width
entry.contentBoxSize[0].blockSize;   // logical height

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

new ResizeObserver(([entry]) => {
  const dpr = window.devicePixelRatio || 1;
  const { inlineSize: w, blockSize: h } = entry.contentBoxSize[0];
  canvas.width  = Math.round(w * dpr);
  canvas.height = Math.round(h * dpr);
  ctx.scale(dpr, dpr);
  draw();
}).observe(canvas);

// Element queries — react to element's own size, not the window
new ResizeObserver(([{ contentRect }]) => {
  const { width } = contentRect;
  el.classList.toggle('compact', width < 400);
  el.classList.toggle('wide',    width >= 800);
}).observe(el);

const perf = new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    console.log(entry.entryType, entry.name, entry.startTime, entry.duration);
  }
});

perf.observe({ type: 'largest-contentful-paint', buffered: true });
perf.observe({ type: 'layout-shift', buffered: true });
perf.observe({ type: 'longtask' });
perf.observe({ type: 'mark' });
perf.observe({ type: 'measure' });
perf.observe({ entryTypes: ['navigation', 'resource'] });
perf.disconnect();