JS의 순차 처리와 병렬 처리

순차적 처리가 병렬 처리와 비교할 때 많은 시간이 걸린다는 것은 누구나 알고 있습니다!

사용자는 요즘 앱이 더 빨리 응답하기를 기대하며 앱에서 무언가를 얻기 위해 너무 오래 기다리기를 원하지 않습니다. 웹이든 모바일 앱이든 상관없이 닫고 떠날 것입니다.

Even though your apps load faster under 3secs, some modules may take lots of time like 30secs or even 1min.

몇 가지 예는 다음과 같습니다.

다른 데이터에 대한 참조가 많은 데이터 채우기

데이터 시각화

서로 독립적인 너무 많은 API 요청

그리고 이런 종류가 많이 있습니다!

다른 제약 조건에 대해 다른 데이터가 필요한 웹 또는 모바일 앱에서 필터 모듈을 살펴보겠습니다!


Flipkart의 필터 스크린샷

보시다시피 위의 필터에는 가져올 제약 조건이 너무 많습니다!

이 예를 사용하여 순차 처리와 병렬 처리를 비교해 봅시다!

순차적 데이터 가져오기

// The function given below fetches data from the server one-by-one
const fetchFilterData = async () => {
  try {
    const brands = await fetchBrands()
    const sizes = await fetchSizes()
    const occasions = await fetchOccasions()
    const idealFor = await fetchIdealFor()
    const neckTypes = await fetchNeckTypes()
    const sleeveTypes = await fetchSleeveTypes()
    const patterns = await fetchPatterns()
    const color = await fetchColors()

    // Now, display list of fetched data in filters
  } catch (error) {
    console.log('Something went wrong!')
    // Push the error to your crash analytics to track the bug
  }
}

위의 코드에는 위의 이미지와 같이 필터 항목을 표시하는 8개의 요청이 있습니다. 각 요청이 이전 요청이 성공적으로 완료될 때까지 대기하는 코드는 async await입니다.

프로세스를 완료하는 데 걸리는 시간을 계산하기 위해 위의 코드로 수학을 해봅시다!

Let's assume that the user has slower internet speed!
Time taken for one API request = ~800ms
Number of API requests = 8
Total time to complete all requests one-by-one = 8 x 800ms = 6400ms = 6.4secs

따라서 사용자가 필터를 사용하려면 6.4초를 기다려야 합니다. 시간이 많이 걸리죠? 또한 이것은 필터의 8개 제약 조건에만 적용됩니다. 20nos와 같은 많은 제약이 있을 때 얼마나 많은 시간이 걸릴지 상상해 보십시오. 아무도 그렇게 오래 기다리지 않을 것입니다!

이를 해결하기 위해서는 JavaScript에서 Parallel Processing을 사용해야 합니다!

병렬 데이터 가져오기

// lets consider the below function that fetches data from server
const fetchFilterData = async () => Promise.all([
  fetchBrands(),
  fetchSizes(),
  fetchOccasions(),
  fetchIdealFor(),
  fetchNeckTypes(),
  fetchSleeveTypes(),
  fetchPatterns(),
  fetchColors(),
])

const renderFilter = async () => {
  try {
    const [
      brands,
      sizes,
      occasions,
      idealFor,
      neckTypes,
      sleeveTypes,
      patterns,
      color
    ] = await fetchFilterData()

    // Now, display list of fetched data in filters
  } catch (error) {
    console.log('Something went wrong!')
    // Push the error to your crash analytics to track the bug
  }
}

위의 코드에는 위의 이미지와 같이 필터 항목을 표시하는 8개의 요청이 있습니다.

각 요청이 동시에 실행되는 코드Promise.all로 아래와 같이 약속 배열이 생성됩니다.
Promise.all([<Promise>, <Promise>, <Promise>, ..., <Promise>])
이제 배열의 모든 약속이 해결되면 Promise.all()가 해결됩니다!

프로세스를 완료하는 데 걸리는 시간을 계산하기 위해 위의 코드로 수학을 해봅시다!

Let's assume that the user has slower internet speed!
Time taken to complete one API request = ~800ms
Total time to complete all requests in parallel = ~800ms = 0.8secs or 1sec

따라서 사용자는 참여하는 데 ~1.3초밖에 걸리지 않기 때문에 너무 오래 기다리기를 원하지 않습니다! 8개의 요청이 모두 병렬로 이루어지기 때문입니다!

This method can be applied in serverside in handling API request using Nodejs. It can reduce the API response time significantly while querying multiple tables simultaneously from a database using Promise.all()

또한 이 방법은 Promise가 서로 종속되지 않는 한 어디에서나 관련된 경우에 사용할 수 있습니다. 종속된 경우 순차적 처리로 이동합니다.

참고: 이것은 단지 예일 뿐이며 Flipkart의 실제 필터 코드가 아닙니다. 이 방법을 사용하여 대부분의 요청을 병렬로 처리할 수 있도록 설계했습니다.

Promise를 처리하는 동안 코드 가독성을 개선하려면 다음 문서를 읽어보세요!

약속을 처리하는 방법 - 전통적인 방식과 현대적인 방식

Sudarsan ・ 11월 1일 '20 ・ 1분 읽기

#javascript #react #webdev #node