Async Programming with JavaScript: Part 3

Advanced Asynchronous Techniques and Optimizations

In the first two parts of this series, we covered the basics of asynchronous programming in JavaScript, starting with callbacks, promises, and async/await. We also explored handling multiple asynchronous operations using Promise.all() and Promise.race(). Now, in Part 3, we’re going to dive deeper into more advanced asynchronous techniques, focusing on custom promises, async iterators, and performance optimizations.

By the end of this post, you'll have a solid understanding of advanced async concepts that will help you write more efficient and scalable JavaScript code.

---

1. Custom Promises: Creating Your Own Promises

While most of the time you’ll be working with built-in promises (like those from fetch(), setTimeout(), etc.), you can also create your own custom promises. This is useful when you want to wrap non-promise-based APIs or implement complex asynchronous logic.

Example: Custom Promise for Simulating a Task

Let’s simulate a custom promise that resolves after a delay.

javascript
function delay(ms) {
  return new Promise((resolve, reject) => {
    if (ms < 0) {
      reject('Delay must be a positive number');
    } else {
      setTimeout(() => {
        resolve(`Waited for ${ms} milliseconds`);
      }, ms);
    }
  });
}

delay(2000)
  .then((message) => {
    console.log(message); // "Waited for 2000 milliseconds"
  })
  .catch((error) => {
    console.log(error); // Handles any error (e.g., negative delay)
  });

How it works:

• The delay() function returns a custom promise that resolves after the specified time (ms).
• If the delay is a negative number, the promise is rejected with an error message.

Key Points:

• Custom promises give you the flexibility to wrap any asynchronous task.
• Use resolve() and reject() to control the fulfillment or rejection of the promise.
• This is especially helpful when dealing with APIs or operations that don’t natively support promises.

---

2. Async Iterators and For-await-of

An async iterator allows you to iterate over asynchronous data sources, such as reading from a file or consuming data from a remote server, in a memory-efficient and readable way.

In JavaScript, you can create your own async iterable objects that can be used with the for-await-of loop.

Example: Async Iterable for Data Streams

Imagine you're consuming a stream of data from an API or a database, and you want to process each chunk of data asynchronously:

javascript
async function* fetchData() {
  const urls = [
    'https://jsonplaceholder.typicode.com/users',
    'https://jsonplaceholder.typicode.com/posts',
  ];

  for (let url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    yield data; // Yield each piece of data asynchronously
  }
}

async function processData() {
  for await (let data of fetchData()) {
    console.log(data); // Process each chunk of data as it arrives
  }
}

processData();

How it works:

• The fetchData function is an async generator that fetches data from multiple URLs.
• It yields the data as it arrives, allowing us to process each piece as it is fetched.
• The for-await-of loop is used to asynchronously iterate over the yielded values.

Key Points:

• Async iterators allow you to iterate over data streams that may not be immediately available, such as data from APIs or file streams.
• for-await-of provides a clean, readable way to process async data.

---

3. Performance Optimization: Minimizing Reflows and Repaints

When working with DOM manipulation in JavaScript, reflows and repaints can be a major performance bottleneck. These processes occur when changes to the DOM trigger the browser to re-render the page. Too many reflows or repaints can make a webpage feel slow and unresponsive.

1. Batch DOM Updates

To minimize reflows and repaints, try to batch DOM updates together. Instead of making multiple individual changes to the DOM, group them into one operation.

Example: Batching DOM Changes

javascript
function updateUI() {
  // Start by hiding the element to avoid intermediate renderings
  document.getElementById('myElement').style.display = 'none';

  // Perform multiple DOM manipulations
  document.getElementById('myElement').textContent = 'New Content';
  document.getElementById('myElement').style.color = 'red';

  // Show the element after all changes are made
  document.getElementById('myElement').style.display = 'block';
}

updateUI();

How it works:

• By hiding the element temporarily and making all changes before showing it again, we reduce the number of render operations.
• The browser doesn’t have to re-render every change individually, improving performance.

2. Using requestAnimationFrame for Animations

Instead of using setTimeout() or setInterval() for animations, it's more efficient to use requestAnimationFrame(). This method tells the browser to perform animations just before the next repaint, which ensures smoother and more efficient updates.

Example: Smooth Animation with requestAnimationFrame

javascript
function animateElement() {
  const element = document.getElementById('myElement');
  let position = 0;

  function move() {
    position += 1;
    element.style.transform = `translateX(${position}px)`;

    if (position < 500) {
      requestAnimationFrame(move);
    }
  }

  move();
}

animateElement();

How it works:

• requestAnimationFrame() ensures the animation runs in sync with the browser's refresh rate, leading to smoother animations and less CPU/GPU load.

Key Points:

• Batching DOM updates can significantly reduce the performance cost of reflows and repaints.
• requestAnimationFrame() optimizes animations by synchronizing them with the browser’s rendering cycle.

---

4. Parallel Execution of Independent Tasks

In some cases, you may want to execute multiple independent asynchronous operations concurrently (in parallel) without waiting for them to finish one by one.

Example: Parallel Execution with Promise.all()

javascript
async function parallelTasks() {
  const task1 = fetch('https://jsonplaceholder.typicode.com/users');
  const task2 = fetch('https://jsonplaceholder.typicode.com/posts');
  
  try {
    const [users, posts] = await Promise.all([task1, task2]);
    const usersJson = await users.json();
    const postsJson = await posts.json();

    console.log('Users:', usersJson);
    console.log('Posts:', postsJson);
  } catch (error) {
    console.error('Error in parallel tasks:', error);
  }
}

parallelTasks();

How it works:

• The Promise.all() function runs multiple promises concurrently and waits for all of them to resolve.
• It ensures that all independent asynchronous operations are completed as soon as possible without waiting for each task to finish sequentially.

Key Points:

• Parallel execution reduces waiting time by running independent tasks concurrently.
• Use Promise.all() when the tasks are independent of each other and can run in parallel.

---

5. Concurrency and Throttling

Sometimes you may want to limit the number of concurrent operations, especially when working with large numbers of tasks (like making HTTP requests). This helps prevent overloading the server or the client.

Example: Throttling Concurrent Requests

javascript
async function fetchWithThrottle(urls, limit) {
  const results = [];
  const queue = [...urls];

  while (queue.length > 0) {
    // Limit the number of concurrent requests
    const currentBatch = queue.splice(0, limit);

    const batchResults = await Promise.all(currentBatch.map(url => fetch(url).then(res => res.json())));
    results.push(...batchResults);

    console.log('Batch results:', batchResults);
  }

  return results;
}

const urls = [
  'https://jsonplaceholder.typicode.com/posts/1',
  'https://jsonplaceholder.typicode.com/posts/2',
  'https://jsonplaceholder.typicode.com/posts/3',
  'https://jsonplaceholder.typicode.com/posts/4',
  'https://jsonplaceholder.typicode.com/posts/5',
];

fetchWithThrottle(urls, 2); // Limit to 2 concurrent requests

How it works:

• The fetchWithThrottle() function takes an array of URLs and a limit to control how many requests can be sent concurrently at a time.
• It batches the requests and waits for each batch to complete before moving on to the next one.

Key Points:

• Throttling helps you control the number of concurrent tasks to avoid overwhelming resources.
• Use throttling for scenarios like API rate limiting or heavy data processing tasks.

---

Conclusion

In Part 3 of this series, we've explored several advanced asynchronous techniques and performance optimizations to help you write more efficient and scalable JavaScript code:

• Custom Promises: Create your own promises for more flexibility in handling asynchronous tasks.
• Async Iterators: Use async iterators to handle asynchronous data streams efficiently.
• Performance Optimization: Minimize reflows and repaints in the DOM, and optimize animations with requestAnimationFrame().
• Parallel Execution: Run independent tasks concurrently with Promise.all().
• Concurrency and Throttling: Limit the number of concurrent operations to improve performance.

Mastering these techniques will allow you to build more efficient and responsive applications, particularly when dealing with large-scale or resource-intensive tasks.

---

That wraps up our series on Async Programming with JavaScript! Now that you’re equipped with advanced asynchronous concepts, you’re ready to take on more complex real-world scenarios with confidence.

Feel free to explore these techniques further and apply them to your projects. Happy coding! 🚀