Tips for optimizing the performance of nested for loops

Question

Tips for optimizing the performance of nested for loops

I wrote a for loop that iterates over 2 enums, sending them both to the server, receiving a value in return, and then calculating another value using a nested for loop. I believe there is room for improvement in this code snippet:

const paths = [];
for await (let category of Object.values(CategoriesEnum)) {
    for await (let format of Object.values(FormatsEnum)) {
        const totalPosts = await getPagesCount(category, format);
        const totalPages = Math.ceil(totalPosts.offsetPagination.total / 12);
        for (let page = 1; page <= totalPages; page++) {
            paths.push({ params: { category: category , format: format, page: page } });
        }
    }
}
return paths;

My primary objective is to reduce execution time, although I acknowledge that the server will still receive the same number of queries so any improvements might be marginal at best. Thank you for your consideration.

javascript typescript performance next.js

Answer 1

Answer №1

To streamline multiple asynchronous operations, consider utilizing [Promise.all][1].

Below is a snippet for reference.

let promises = [];
let paths = [];

Object.values(CategoriesEnum).forEach(category => {
    Object.values(FormatsEnum).forEach(format => {
        promises.push(getPagesCount(category, format))
    })
});

const totalPostCounts = await Promise.all(promises);

totalPostCounts.forEach(totalPosts => {
    const totalPages = Math.ceil(totalPosts.offsetPagination.total / 12);
    for (let page = 1; page <= totalPages; page++) {
        paths.push({ params: { category: category, format: format, page: page } });
    }
});

return paths;

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Alternative Method using Same Techniques

let promises = [];
let paths = [];

/*
Aggregate API calls
*/
Object.values(CategoriesEnum).forEach(category => {
    Object.values(FormatsEnum).forEach(format => {
        promises.push(getPath(category, format))
    })
});

// Await completion of all the calls
const pathsArray = await Promise.all(promises);

// Flatten the array
pathsArray.forEach(pathArray => {
    paths = paths.concat(pathArray)
});

async function getPath(category, format) {
    let paths = [];

    const totalPosts = await getPagesCount(category, format);
    const totalPages = Math.ceil(totalPosts.offsetPagination.total / 12);
    for (let page = 1; page <= totalPages; page++) {
        paths.push({ params: { category: category, format: format, page: page } });
    }

    return paths;
}

Answer 2

To streamline multiple asynchronous operations, consider utilizing [Promise.all][1].

Below is a snippet for reference.

let promises = [];
let paths = [];

Object.values(CategoriesEnum).forEach(category => {
    Object.values(FormatsEnum).forEach(format => {
        promises.push(getPagesCount(category, format))
    })
});

const totalPostCounts = await Promise.all(promises);

totalPostCounts.forEach(totalPosts => {
    const totalPages = Math.ceil(totalPosts.offsetPagination.total / 12);
    for (let page = 1; page <= totalPages; page++) {
        paths.push({ params: { category: category, format: format, page: page } });
    }
});

return paths;

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Alternative Method using Same Techniques

let promises = [];
let paths = [];

/*
Aggregate API calls
*/
Object.values(CategoriesEnum).forEach(category => {
    Object.values(FormatsEnum).forEach(format => {
        promises.push(getPath(category, format))
    })
});

// Await completion of all the calls
const pathsArray = await Promise.all(promises);

// Flatten the array
pathsArray.forEach(pathArray => {
    paths = paths.concat(pathArray)
});

async function getPath(category, format) {
    let paths = [];

    const totalPosts = await getPagesCount(category, format);
    const totalPages = Math.ceil(totalPosts.offsetPagination.total / 12);
    for (let page = 1; page <= totalPages; page++) {
        paths.push({ params: { category: category, format: format, page: page } });
    }

    return paths;
}

Answer 3

Answer №2

To start off, I suggest breaking down the logic into 3 key parts:

Setting up asynchronous calls
Handling async calls concurrently
Implementing the necessary business logic

const pagesPromises = []
for (let category of Object.values(CategoriesEnum)) {
  for (let format of Object.values(FormatsEnum)) {
    pagesPromises.push(getPagesCount(category, format))
  }
}

const totalPostsResults = await Promise.all(pagesPromises)

const paths = [];
totalPostsResults.forEach(totalPosts => {
  const totalPages = Math.ceil(totalPosts.offsetPagination.total / 12);
  for (let page = 1; page <= totalPages; page++) {
    paths.push({ params: { category: category , format: format, page: page } });
  }
})

return paths;

Answer 4

To start off, I suggest breaking down the logic into 3 key parts:

Setting up asynchronous calls
Handling async calls concurrently
Implementing the necessary business logic

const pagesPromises = []
for (let category of Object.values(CategoriesEnum)) {
  for (let format of Object.values(FormatsEnum)) {
    pagesPromises.push(getPagesCount(category, format))
  }
}

const totalPostsResults = await Promise.all(pagesPromises)

const paths = [];
totalPostsResults.forEach(totalPosts => {
  const totalPages = Math.ceil(totalPosts.offsetPagination.total / 12);
  for (let page = 1; page <= totalPages; page++) {
    paths.push({ params: { category: category , format: format, page: page } });
  }
})

return paths;

Answer 5

Answer №3

To simplify the code and utilize Promise.all(), you can implement the following without extensive modifications:

const getStaticPaths = async () => {
  const paths = [];
  const promises = [];

  Object.values(CategoriesEnum).forEach((category) => {
    Object.values(FormatsEnum).forEach((format) => {
      promises.push(async () => {

        const totalPosts = await getPagesCount(category, format);
        const totalPages = Math.ceil(totalPosts.offsetPagination.total / 12);
        for (let page = 1; page <= totalPages; ++page)
          paths.push({ params: { category: category, format: format, page: page } });

      });
    });
  });

  await Promise.all(promises);
  return { paths };
};

export { getStaticPaths };

Answer 6

To simplify the code and utilize Promise.all(), you can implement the following without extensive modifications:

const getStaticPaths = async () => {
  const paths = [];
  const promises = [];

  Object.values(CategoriesEnum).forEach((category) => {
    Object.values(FormatsEnum).forEach((format) => {
      promises.push(async () => {

        const totalPosts = await getPagesCount(category, format);
        const totalPages = Math.ceil(totalPosts.offsetPagination.total / 12);
        for (let page = 1; page <= totalPages; ++page)
          paths.push({ params: { category: category, format: format, page: page } });

      });
    });
  });

  await Promise.all(promises);
  return { paths };
};

export { getStaticPaths };

Tips for optimizing the performance of nested for loops

Answer №1

Answer №2

Answer №3

Similar questions

Send information to the next route using Vue

Exploring values within an array of objects using Node.js

Programmatically simulating a click on a link within a Windows Universal Windows Platform (U

JavaScript onClick event not functioning properly on iOS devices

Tips for preventing the use of website URLs as variables in jQuery ajax() calls:

Issue with Date Picker not properly storing selected date in MySQL database

Issue with VueJS rendering data within a for loop

Ensuring that each object in a list contains an optional key if any one object includes it is a task handled by Joi validation

I desire to incorporate a subtle fading effect into the script

Ember.js: Storing function prototypes as objects

Exporting and importing modules in Angular 1 using Webpack 2

The error message "The useRef React Hook cannot be invoked within a callback function" is displayed

Techniques for dynamically counting rows in a table using JavaScript

Troubleshooting MongoDB query criteria in Meteor and JavaScript doesn't yield the expected results

The struggle of accessing child components using ViewChild in Angular

The issue arises when DataTable fails to retrieve the ID element following a page transition

Encountering an Issue with Dynamic Imports in Cypress Tests Using Typescript: Error Loading Chunk 1

The method .setArray has been deprecated in THREE.BufferAttribute. Instead, please use BufferGeometry .setAttribute for unindexed BufferGeometry operations

update the componentWillMount() function

Error occurred in Flask due to request names being dynamically generated using JavaScript