ജാവസ്ക്രിപ്റ്റ് ഇറ്ററേറ്റർ ഹെൽപ്പറുകളും പാരലൽ എക്സിക്യൂഷനും: കൺകറന്റ് സ്ട്രീം പ്രോസസ്സിംഗിനെക്കുറിച്ചൊരു ആഴത്തിലുള്ള പഠനം

വെബ് ഡെവലപ്‌മെന്റിന്റെ എപ്പോഴും മാറിക്കൊണ്ടിരിക്കുന്ന ലോകത്ത്, പെർഫോമൻസ് ഒരു ഫീച്ചർ മാത്രമല്ല; അതൊരു അടിസ്ഥാന ആവശ്യകതയാണ്. ആപ്ലിക്കേഷനുകൾ വലിയ അളവിലുള്ള ഡാറ്റയും സങ്കീർണ്ണമായ പ്രവർത്തനങ്ങളും കൈകാര്യം ചെയ്യുമ്പോൾ, ജാവസ്ക്രിപ്റ്റിന്റെ പരമ്പരാഗതവും ക്രമാനുഗതവുമായ സ്വഭാവം ഒരു പ്രധാന തടസ്സമായി മാറിയേക്കാം. ഒരു എപിഐയിൽ നിന്ന് ആയിരക്കണക്കിന് റെക്കോർഡുകൾ എടുക്കുന്നതു മുതൽ വലിയ ഫയലുകൾ പ്രോസസ്സ് ചെയ്യുന്നതുവരെ, ഒരേ സമയം ഒന്നിലധികം ജോലികൾ ചെയ്യാനുള്ള കഴിവ് വളരെ പ്രധാനമാണ്.

ഇവിടെയാണ് ഇറ്ററേറ്റർ ഹെൽപ്പറുകൾ എന്ന നിർദ്ദേശം വരുന്നത്. ഇത് ജാവാസ്ക്രിപ്റ്റിൽ ഡെവലപ്പർമാർ ഇറ്ററബിൾ ഡാറ്റയുമായി പ്രവർത്തിക്കുന്ന രീതിയിൽ വിപ്ലവം സൃഷ്ടിക്കാൻ തയ്യാറായ ഒരു സ്റ്റേജ് 3 TC39 നിർദ്ദേശമാണ്. ഇറ്ററേറ്ററുകൾക്കായി ഒരു മികച്ച, ചെയിൻ ചെയ്യാവുന്ന എപിഐ നൽകുക എന്നതാണ് ഇതിന്റെ പ്രാഥമിക ലക്ഷ്യം (`Array.prototype` അറേകൾക്ക് നൽകുന്നതിന് സമാനം). എന്നിരുന്നാലും, അസിൻക്രണസ് ഓപ്പറേഷനുകളുമായുള്ള ഇതിന്റെ സംയോജനം ഒരു പുതിയ സാധ്യത തുറക്കുന്നു: ലളിതവും കാര്യക്ഷമവും നേറ്റീവുമായ കൺകറന്റ് സ്ട്രീം പ്രോസസ്സിംഗ്.

അസിൻക്രണസ് ഇറ്ററേറ്റർ ഹെൽപ്പറുകൾ ഉപയോഗിച്ച് പാരലൽ എക്സിക്യൂഷൻ എന്ന ആശയത്തിലൂടെ ഈ ലേഖനം നിങ്ങളെ നയിക്കും. 'എന്തുകൊണ്ട്', 'എങ്ങനെ', 'അടുത്തത് എന്ത്' എന്നിവയെല്ലാം നമ്മൾ ഇതിൽ ചർച്ച ചെയ്യും. ആധുനിക ജാവാസ്ക്രിപ്റ്റിൽ വേഗതയേറിയതും കൂടുതൽ കരുത്തുള്ളതുമായ ഡാറ്റാ പ്രോസസ്സിംഗ് പൈപ്പ് ലൈനുകൾ നിർമ്മിക്കാനുള്ള അറിവ് ഇത് നിങ്ങൾക്ക് നൽകും.

പ്രധാന തടസ്സം: ഇറ്ററേഷന്റെ ക്രമാനുഗത സ്വഭാവം

പരിഹാരത്തിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, നമുക്ക് പ്രശ്നം എന്താണെന്ന് വ്യക്തമായി മനസ്സിലാക്കാം. ഒരു സാധാരണ സാഹചര്യം പരിഗണിക്കുക: നിങ്ങളുടെ കയ്യിൽ കുറച്ച് യൂസർ ഐഡികളുടെ ഒരു ലിസ്റ്റ് ഉണ്ട്, ഓരോ ഐഡിക്കും വേണ്ടിയുള്ള വിശദമായ വിവരങ്ങൾ ഒരു എപിഐയിൽ നിന്ന് നിങ്ങൾ എടുക്കണം.

`async/await` ഉപയോഗിച്ചുള്ള ഒരു `for...of` ലൂപ്പ് കാണാൻ വളരെ വൃത്തിയും വ്യക്തതയുമുള്ളതായിരിക്കും, പക്ഷേ അതിന് മറഞ്ഞിരിക്കുന്ന ഒരു പെർഫോമൻസ് പ്രശ്നമുണ്ട്.

            
async function fetchUserDetailsSequentially(userIds) {
  const userDetails = [];
  console.time("Sequential Fetch");

  for (const id of userIds) {
    // Each 'await' pauses the entire loop until the promise resolves.
    const response = await fetch(`https://api.example.com/users/${id}`);
    const user = await response.json();
    userDetails.push(user);
    console.log(`Fetched user ${id}`);
  }

  console.timeEnd("Sequential Fetch");
  return userDetails;
}

const ids = [1, 2, 3, 4, 5];
// If each API call takes 1 second, this entire function will take ~5 seconds.
fetchUserDetailsSequentially(ids);

            

              
                Copy
              
            
          

ഈ കോഡിൽ, ലൂപ്പിനുള്ളിലെ ഓരോ `await`ഉം ആ പ്രത്യേക നെറ്റ്‌വർക്ക് അഭ്യർത്ഥന പൂർത്തിയാകുന്നതുവരെ തുടർന്നുള്ള പ്രവർത്തനങ്ങളെ തടഞ്ഞുനിർത്തുന്നു. നിങ്ങളുടെ കയ്യിൽ 100 ഐഡികളുണ്ടെങ്കിൽ ഓരോ അഭ്യർത്ഥനയ്ക്കും 500ms എടുക്കുന്നുവെങ്കിൽ, ആകെ സമയം 50 സെക്കൻഡ് വരും! ഇത് ഒട്ടും കാര്യക്ഷമമല്ല, കാരണം പ്രവർത്തനങ്ങൾ പരസ്പരം ആശ്രയിക്കുന്നില്ല; യൂസർ 2-ന്റെ ഡാറ്റ ലഭിക്കാൻ യൂസർ 1-ന്റെ ഡാറ്റ ആദ്യം വരണമെന്നില്ല.

സാധാരണ പരിഹാരം: `Promise.all`

ഈ പ്രശ്നത്തിനുള്ള നിലവിലുള്ള പരിഹാരമാണ് `Promise.all`. എല്ലാ അസിൻക്രണസ് പ്രവർത്തനങ്ങളും ഒരേ സമയം ആരംഭിക്കാനും അവയെല്ലാം പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കാനും ഇത് നമ്മളെ അനുവദിക്കുന്നു.

            
async function fetchUserDetailsWithPromiseAll(userIds) {
  console.time("Promise.all Fetch");

  const promises = userIds.map(id => 
    fetch(`https://api.example.com/users/${id}`).then(res => res.json())
  );

  // All requests are fired off concurrently.
  const userDetails = await Promise.all(promises);

  console.timeEnd("Promise.all Fetch");
  return userDetails;
}

// If each API call takes 1 second, this will now take just ~1 second (the time of the longest request).
fetchUserDetailsWithPromiseAll(ids);

            

              
                Copy
              
            
          

`Promise.all` ഒരു വലിയ മെച്ചപ്പെടുത്തലാണ്. എന്നിരുന്നാലും, അതിന് അതിൻ്റേതായ പരിമിതികളുണ്ട്:

• മെമ്മറി ഉപയോഗം: എല്ലാ പ്രോമിസുകളുടെയും ഒരു അറേ മുൻകൂട്ടി ഉണ്ടാക്കുകയും എല്ലാ ഫലങ്ങളും മെമ്മറിയിൽ സൂക്ഷിക്കുകയും ചെയ്ത ശേഷമാണ് ഇത് റിട്ടേൺ ചെയ്യുന്നത്. വളരെ വലുതോ അനന്തമോ ആയ ഡാറ്റാ സ്ട്രീമുകൾക്ക് ഇത് ഒരു പ്രശ്നമാണ്.
• ബാക്ക് പ്രഷർ നിയന്ത്രണമില്ല: ഇത് എല്ലാ അഭ്യർത്ഥനകളും ഒരേ സമയം അയയ്ക്കുന്നു. നിങ്ങൾക്ക് 10,000 ഐഡികളുണ്ടെങ്കിൽ, അത് നിങ്ങളുടെ സിസ്റ്റത്തെയോ, സെർവറിന്റെ റേറ്റ് ലിമിറ്റുകളെയോ, അല്ലെങ്കിൽ നെറ്റ്‌വർക്ക് കണക്ഷനെയോ തകരാറിലാക്കിയേക്കാം. ഒരേ സമയം 10 അഭ്യർത്ഥനകൾ എന്ന രീതിയിൽ കൺകറൻസി പരിമിതപ്പെടുത്താൻ ഇതിൽ മാർഗ്ഗമില്ല.
• എല്ലാം അല്ലെങ്കിൽ ഒന്നുമില്ല എന്ന രീതിയിലുള്ള എറർ ഹാൻഡ്ലിംഗ്: അറേയിലെ ഒരൊറ്റ പ്രോമിസ് റിജെക്റ്റ് ആയാൽ, `Promise.all` ഉടനടി റിജെക്റ്റ് ആവുകയും വിജയകരമായ മറ്റെല്ലാ പ്രോമിസുകളുടെ ഫലങ്ങളും നഷ്ടപ്പെടുത്തുകയും ചെയ്യും.

ഇവിടെയാണ് അസിൻക്രണസ് ഇറ്ററേറ്ററുകളുടെയും നിർദ്ദിഷ്ട ഹെൽപ്പറുകളുടെയും ശക്തി ശരിക്കും പ്രകടമാകുന്നത്. കൺകറൻസിയിൽ സൂക്ഷ്മമായ നിയന്ത്രണത്തോടെ സ്ട്രീം അടിസ്ഥാനമാക്കിയുള്ള പ്രോസസ്സിംഗിന് ഇവ അവസരം നൽകുന്നു.

അസിൻക്രണസ് ഇറ്ററേറ്ററുകളെ മനസ്സിലാക്കാം

ഓടുന്നതിന് മുമ്പ് നമ്മൾ നടക്കാൻ പഠിക്കണം. നമുക്ക് അസിൻക്രണസ് ഇറ്ററേറ്ററുകളെക്കുറിച്ച് ഹ്രസ്വമായി ഓർക്കാം. ഒരു സാധാരണ ഇറ്ററേറ്ററിന്റെ `.next()` മെത്തേഡ് `{ value: 'some_value', done: false }` പോലുള്ള ഒരു ഒബ്ജക്റ്റ് നൽകുമ്പോൾ, ഒരു അസിൻക്രണസ് ഇറ്ററേറ്ററിന്റെ `.next()` മെത്തേഡ് ആ ഒബ്ജക്റ്റിലേക്ക് റിസോൾവ് ചെയ്യുന്ന ഒരു പ്രോമിസ് ആണ് നൽകുന്നത്.

ഒരു ഫയൽ സ്ട്രീമിൽ നിന്നുള്ള ഭാഗങ്ങൾ, പേജിനേറ്റ് ചെയ്ത എപിഐ ഫലങ്ങൾ, അല്ലെങ്കിൽ ഒരു വെബ് സോക്കറ്റിൽ നിന്നുള്ള ഇവന്റുകൾ പോലെ, സമയത്തിനനുസരിച്ച് വരുന്ന ഡാറ്റയിലൂടെ ഇറ്ററേറ്റ് ചെയ്യാൻ ഇത് നമ്മളെ സഹായിക്കുന്നു.

അസിൻക്രണസ് ഇറ്ററേറ്ററുകൾ ഉപയോഗിക്കാൻ നമ്മൾ `for await...of` ലൂപ്പ് ഉപയോഗിക്കുന്നു:

            
// A generator function that yields a value every second.
async function* createSlowStream() {
  for (let i = 1; i <= 5; i++) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield i;
  }
}

async function consumeStream() {
  const stream = createSlowStream();
  // The loop pauses at each 'await' for the next value to be yielded.
  for await (const value of stream) {
    console.log(`Received: ${value}`); // Logs 1, 2, 3, 4, 5, one per second
  }
}

consumeStream();

            

              
                Copy
              
            
          

ഗെയിം ചേഞ്ചർ: ഇറ്ററേറ്റർ ഹെൽപ്പേഴ്സ് പ്രൊപ്പോസൽ

TC39 ഇറ്ററേറ്റർ ഹെൽപ്പേഴ്സ് പ്രൊപ്പോസൽ, `Iterator.prototype`, `AsyncIterator.prototype` എന്നിവ വഴി എല്ലാ ഇറ്ററേറ്ററുകളിലേക്കും (സിങ്ക്, അസിങ്ക്) `.map()`, `.filter()`, `.take()` പോലുള്ള പരിചിതമായ മെത്തേഡുകൾ ചേർക്കുന്നു. ഇറ്ററേറ്ററിനെ ആദ്യം ഒരു അറേയിലേക്ക് മാറ്റാതെ തന്നെ ശക്തവും ഡിക്ലറേറ്റീവുമായ ഡാറ്റാ പ്രോസസ്സിംഗ് പൈപ്പ് ലൈനുകൾ നിർമ്മിക്കാൻ ഇത് നമ്മളെ അനുവദിക്കുന്നു.

സെൻസർ റീഡിംഗുകളുടെ ഒരു അസിൻക്രണസ് സ്ട്രീം പരിഗണിക്കുക. അസിങ്ക് ഇറ്ററേറ്റർ ഹെൽപ്പറുകൾ ഉപയോഗിച്ച്, നമുക്കിത് ഇതുപോലെ പ്രോസസ്സ് ചെയ്യാം:

            
async function processSensorData() {
  const sensorStream = getAsyncSensorReadings(); // Returns an async iterator

  // Hypothetical future syntax with native async iterator helpers
  const processedStream = sensorStream
    .filter(reading => reading.temperature > 30) // Filter for high temps
    .map(reading => ({ ...reading, temperature: toFahrenheit(reading.temperature) })) // Convert to Fahrenheit
    .take(10); // Only take the first 10 critical readings

  for await (const criticalReading of processedStream) {
    await sendAlert(criticalReading);
  }
}

            

              
                Copy
              
            
          

ഇത് ലളിതവും, മെമ്മറി-കാര്യക്ഷമവും (ഇത് ഒരു സമയം ഒരു ഐറ്റം പ്രോസസ്സ് ചെയ്യുന്നു), വളരെ എളുപ്പത്തിൽ വായിക്കാവുന്നതുമാണ്. എന്നിരുന്നാലും, അസിങ്ക് ഇറ്ററേറ്ററുകൾക്ക് വേണ്ടിയുള്ള സാധാരണ `.map()` ഹെൽപ്പർ പോലും ഇപ്പോഴും ക്രമാനുഗതമാണ്. അടുത്തത് ആരംഭിക്കുന്നതിന് മുമ്പ് ഓരോ മാപ്പിംഗ് ഓപ്പറേഷനും പൂർത്തിയാകണം.

നഷ്ടപ്പെട്ട ഭാഗം: കൺകറന്റ് മാപ്പിംഗ്

പെർഫോമൻസ് ഒപ്റ്റിമൈസേഷനുള്ള യഥാർത്ഥ ശക്തി വരുന്നത് ഒരു കൺകറന്റ് മാപ്പ് എന്ന ആശയത്തിൽ നിന്നാണ്. മുമ്പത്തെ ഐറ്റം പൂർത്തിയാകുന്നതിനായി കാത്തിരിക്കുമ്പോൾ തന്നെ `.map()` ഓപ്പറേഷന് അടുത്ത ഐറ്റം പ്രോസസ്സ് ചെയ്യാൻ തുടങ്ങിയാലോ? ഇറ്ററേറ്റർ ഹെൽപ്പറുകളുമൊത്തുള്ള പാരലൽ എക്സിക്യൂഷന്റെ കാതൽ ഇതാണ്.

ഒരു `mapConcurrent` ഹെൽപ്പർ നിലവിലെ പ്രൊപ്പോസലിന്റെ ഔദ്യോഗിക ഭാഗമല്ലെങ്കിലും, അസിങ്ക് ഇറ്ററേറ്ററുകൾ നൽകുന്ന അടിസ്ഥാന ഘടകങ്ങൾ ഈ പാറ്റേൺ സ്വയം നടപ്പിലാക്കാൻ നമ്മളെ അനുവദിക്കുന്നു. ഇത് എങ്ങനെ നിർമ്മിക്കാമെന്ന് മനസ്സിലാക്കുന്നത് ആധുനിക ജാവാസ്ക്രിപ്റ്റ് കൺകറൻസിയെക്കുറിച്ച് ആഴത്തിലുള്ള ഉൾക്കാഴ്ച നൽകുന്നു.

ഒരു കൺകറന്റ് `map` ഹെൽപ്പർ നിർമ്മിക്കാം

നമുക്ക് സ്വന്തമായി ഒരു `asyncMapConcurrent` ഹെൽപ്പർ രൂപകൽപ്പന ചെയ്യാം. ഇത് ഒരു അസിങ്ക് ഇറ്ററേറ്റർ, ഒരു മാപ്പർ ഫംഗ്ഷൻ, ഒരു കൺകറൻസി ലിമിറ്റ് എന്നിവ എടുക്കുന്ന ഒരു അസിങ്ക് ജനറേറ്റർ ഫംഗ്ഷൻ ആയിരിക്കും.

നമ്മുടെ ലക്ഷ്യങ്ങൾ:

1. സോഴ്സ് ഇറ്ററേറ്ററിൽ നിന്നുള്ള ഒന്നിലധികം ഐറ്റംസ് സമാന്തരമായി പ്രോസസ്സ് ചെയ്യുക.
2. ഒരേ സമയം നടക്കുന്ന പ്രവർത്തനങ്ങളുടെ എണ്ണം ഒരു നിശ്ചിത നിലയിലേക്ക് പരിമിതപ്പെടുത്തുക (ഉദാഹരണത്തിന്, ഒരേ സമയം 10).
3. സോഴ്സ് സ്ട്രീമിൽ പ്രത്യക്ഷപ്പെട്ട അതേ ക്രമത്തിൽ ഫലങ്ങൾ നൽകുക.
4. ബാക്ക് പ്രഷർ സ്വാഭാവികമായി കൈകാര്യം ചെയ്യുക: പ്രോസസ്സ് ചെയ്യാനും ഉപയോഗിക്കാനും കഴിയുന്നതിനേക്കാൾ വേഗത്തിൽ സോഴ്സിൽ നിന്ന് ഐറ്റംസ് എടുക്കാതിരിക്കുക.

നടപ്പിലാക്കാനുള്ള തന്ത്രം

നമ്മൾ സജീവമായ ടാസ്ക്കുകളുടെ ഒരു കൂട്ടം കൈകാര്യം ചെയ്യും. ഒരു ടാസ്ക് പൂർത്തിയാകുമ്പോൾ, നമ്മൾ പുതിയൊരെണ്ണം ആരംഭിക്കും, അങ്ങനെ സജീവമായ ടാസ്ക്കുകളുടെ എണ്ണം നമ്മുടെ കൺകറൻസി പരിധി കവിയുന്നില്ലെന്ന് ഉറപ്പാക്കും. തീർച്ചപ്പെടുത്താത്ത പ്രോമിസുകൾ ഒരു അറേയിൽ സൂക്ഷിക്കുകയും അടുത്ത ടാസ്ക് എപ്പോൾ പൂർത്തിയായി എന്നറിയാൻ `Promise.race()` ഉപയോഗിക്കുകയും ചെയ്യും. ഇത് അതിന്റെ ഫലം നൽകാനും പകരം പുതിയൊരെണ്ണം വെക്കാനും നമ്മളെ സഹായിക്കും.

            
/**
 * Processes items from an async iterator in parallel with a concurrency limit.
 * @param {AsyncIterable} source The source async iterator.
 * @param {(item: T) => Promise} mapper The async function to apply to each item.
 * @param {number} concurrency The maximum number of parallel operations.
 * @returns {AsyncGenerator}
 */
async function* asyncMapConcurrent(source, mapper, concurrency) {
  const executing = []; // Pool of currently executing promises
  const iterator = source[Symbol.asyncIterator]();

  async function processNext() {
    const { value, done } = await iterator.next();
    if (done) {
      return; // No more items to process
    }
    
    // Start the mapping operation and add the promise to the pool
    const promise = Promise.resolve(mapper(value)).then(mappedValue => ({ 
        result: mappedValue,
        sourceValue: value
    }));

    executing.push(promise);
  }

  // Prime the pool with initial tasks up to the concurrency limit
  for (let i = 0; i < concurrency; i++) {
    processNext();
  }

  while (executing.length > 0) {
    // Wait for any of the executing promises to resolve
    const finishedPromise = await Promise.race(executing);

    // Find the index and remove the completed promise from the pool
    const index = executing.indexOf(finishedPromise);
    executing.splice(index, 1);

    const { result } = await finishedPromise;
    yield result;

    // Since a slot has opened up, start a new task if there are more items
    processNext();
  }
}

            

              
                Copy
              
            
          

            
// Helper to simulate an API call with a random delay
function fetchUser(id) {
  const delay = Math.random() * 1000 + 500; // 500ms - 1500ms delay
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`Resolved fetch for user ${id}`);
      resolve({ id, name: `User ${id}`, fetchedAt: Date.now() });
    }, delay);
  });
}

// An async generator to create a stream of IDs
async function* createIdStream() {
  for (let i = 1; i <= 20; i++) {
    yield i;
  }
}

async function main() {
  const idStream = createIdStream();
  const concurrency = 5; // Process 5 requests at a time

  console.time("Concurrent Stream Processing");

  const userStream = asyncMapConcurrent(idStream, fetchUser, concurrency);

  // Consume the resulting stream
  for await (const user of userStream) {
    console.log(`Processed and received:`, user);
  }

  console.timeEnd("Concurrent Stream Processing");
}

main();

            

              
                Copy