Advanced Topics

1. Asynchronous Patterns

Explore async/await, Promise.allSettled, and custom concurrency controls.

async function fetchAll(urls){
  const promises = urls.map(url=>fetch(url).then(r=>r.json()));
  const results = await Promise.allSettled(promises);
  return results.map(r=>r.status==='fulfilled'?r.value:null);
}

2. Web Workers & Off‑main‑thread

Run heavy computations without blocking UI.

const worker = new Worker('worker.js');
worker.postMessage({type:'compute',payload:largeArray});
worker.onmessage = e=>console.log('Result:',e.data);

3. Dynamic Module Loading

Load modules on demand to reduce initial bundle size.

document.getElementById('loadBtn').addEventListener('click', async ()=>{
  const {chart} = await import('./modules/chart.js');
  chart.render('#chartContainer');
});

4. Intersection Observer for Lazy Loading

Efficiently load images as they enter the viewport.

const observer = new IntersectionObserver(entries=>{
  entries.forEach(entry=>{
    if(entry.isIntersecting){
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
document.querySelectorAll('img.lazy').forEach(img=>observer.observe(img));