M

MLOG

ಕನ್ನಡ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್‌ಗಳಿಗಾಗಿ ಸುಧಾರಿತ ಮಾದರಿಗಳನ್ನು ಅನ್ವೇಷಿಸಿ, ಹಿನ್ನೆಲೆ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಿ, ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಿ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್: ಜಾಗತಿಕ ಡಿಜಿಟಲ್ ಜಗತ್ತಿಗಾಗಿ ಹಿನ್ನೆಲೆ ಪ್ರಕ್ರಿಯೆಯ ಮಾದರಿಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು

ಇಂದಿನ ಅಂತರ್ಸಂಪರ್ಕಿತ ಜಗತ್ತಿನಲ್ಲಿ, ಬಳಕೆದಾರರ ಸ್ಥಳ ಅಥವಾ ಸಾಧನದ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಲೆಕ್ಕಿಸದೆ, ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಸುಗಮ, ಸ್ಪಂದನಾಶೀಲ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಅನುಭವಗಳನ್ನು ನೀಡಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸಲಾಗುತ್ತದೆ. ಇದನ್ನು ಸಾಧಿಸುವಲ್ಲಿ ಒಂದು ಪ್ರಮುಖ ಸವಾಲು ಎಂದರೆ ಮುಖ್ಯ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಫ್ರೀಜ್ ಮಾಡದೆ ಗಣನಾತ್ಮಕವಾಗಿ ತೀವ್ರವಾದ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು. ಇಲ್ಲಿಯೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ವೆಬ್ ವರ್ಕರ್ಸ್ (Web Workers) ಪಾತ್ರಕ್ಕೆ ಬರುತ್ತವೆ. ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾಗಿ ಹೇಳುವುದಾದರೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್ (JavaScript Module Workers) ಆಗಮನವು ನಾವು ಹಿನ್ನೆಲೆ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಹೇಗೆ ಸಂಪರ್ಕಿಸುತ್ತೇವೆ ಎಂಬುದರಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟುಮಾಡಿದೆ, ಕಾರ್ಯಗಳನ್ನು ಆಫ್‌ಲೋಡ್ ಮಾಡಲು ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ಮಾಡ್ಯುಲರ್ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್‌ನ ಶಕ್ತಿಯನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಹೆಚ್ಚಿಸಬಲ್ಲ ವಿವಿಧ ಹಿನ್ನೆಲೆ ಪ್ರಕ್ರಿಯೆಯ ಮಾದರಿಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ. ನಾವು ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳು, ಸುಧಾರಿತ ತಂತ್ರಗಳು ಮತ್ತು ಜಾಗತಿಕ ದೃಷ್ಟಿಕೋನವನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಒಳಗೊಳ್ಳುತ್ತೇವೆ.

ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್‌ನ ವಿಕಸನ: ಮೂಲಭೂತ ವೆಬ್ ವರ್ಕರ್ಸ್‌ಗಿಂತಲೂ ಮೀರಿ

ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್‌ಗೆ ಧುಮುಕುವ ಮೊದಲು, ಅವುಗಳ ಹಿಂದಿನದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ: ವೆಬ್ ವರ್ಕರ್ಸ್. ಸಾಂಪ್ರದಾಯಿಕ ವೆಬ್ ವರ್ಕರ್ಸ್ ನಿಮಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಪ್ರತ್ಯೇಕ ಹಿನ್ನೆಲೆ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಚಲಾಯಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಇದು ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ. ಈ ರೀತಿಯ ಕಾರ್ಯಗಳಿಗೆ ಇದು ಅಮೂಲ್ಯವಾಗಿದೆ:

ಆದಾಗ್ಯೂ, ಸಾಂಪ್ರದಾಯಿಕ ವೆಬ್ ವರ್ಕರ್ಸ್ ಕೆಲವು ಮಿತಿಗಳನ್ನು ಹೊಂದಿದ್ದವು, ವಿಶೇಷವಾಗಿ ಮಾಡ್ಯೂಲ್ ಲೋಡಿಂಗ್ ಮತ್ತು ನಿರ್ವಹಣೆಗೆ ಸಂಬಂಧಿಸಿದಂತೆ. ಪ್ರತಿಯೊಂದು ವರ್ಕರ್ ಸ್ಕ್ರಿಪ್ಟ್ ಒಂದೇ, ಏಕಶಿಲೆಯ ಫೈಲ್ ಆಗಿತ್ತು, ಇದು ವರ್ಕರ್ ಸಂದರ್ಭದಲ್ಲಿ ಅವಲಂಬನೆಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಕಷ್ಟಕರವಾಗಿಸಿತ್ತು. ಬಹು ಲೈಬ್ರರಿಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಳ್ಳುವುದು ಅಥವಾ ಸಂಕೀರ್ಣ ತರ್ಕವನ್ನು ಸಣ್ಣ, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮಾಡ್ಯೂಲ್‌ಗಳಾಗಿ ವಿಭಜಿಸುವುದು ತೊಡಕಾಗಿತ್ತು ಮತ್ತು ಇದು ಹೆಚ್ಚಾಗಿ ದೊಡ್ಡ ವರ್ಕರ್ ಫೈಲ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತಿತ್ತು.

ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್ ಈ ಮಿತಿಗಳನ್ನು ಪರಿಹರಿಸುತ್ತವೆ, ಏಕೆಂದರೆ ಅವು ES ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ವರ್ಕರ್‌ಗಳನ್ನು ಪ್ರಾರಂಭಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ. ಇದರರ್ಥ ನೀವು ಮುಖ್ಯ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಮಾಡುವಂತೆಯೇ ನಿಮ್ಮ ವರ್ಕರ್ ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಆಮದು ಮತ್ತು ರಫ್ತು ಮಾಡಬಹುದು. ಇದು ಗಮನಾರ್ಹ ಪ್ರಯೋಜನಗಳನ್ನು ತರುತ್ತದೆ:

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್‌ನ ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು

ಅದರ ಹೃದಯಭಾಗದಲ್ಲಿ, ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ ಸಾಂಪ್ರದಾಯಿಕ ವೆಬ್ ವರ್ಕರ್‌ನಂತೆಯೇ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಮುಖ್ಯ ವ್ಯತ್ಯಾಸವು ವರ್ಕರ್ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಹೇಗೆ ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ ಎಂಬುದರಲ್ಲಿದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗೆ ನೇರ URL ನೀಡುವುದಕ್ಕಿಂತ, ನೀವು ES ಮಾಡ್ಯೂಲ್ URL ಅನ್ನು ಒದಗಿಸುತ್ತೀರಿ.

ಮೂಲಭೂತ ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ ಅನ್ನು ರಚಿಸುವುದು

ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ ಅನ್ನು ರಚಿಸುವ ಮತ್ತು ಬಳಸುವ ಒಂದು ಮೂಲಭೂತ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

worker.js (ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ ಸ್ಕ್ರಿಪ್ಟ್):


// worker.js

// ವರ್ಕರ್‌ಗೆ ಸಂದೇಶ ಬಂದಾಗ ಈ ಫಂಕ್ಷನ್ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ
self.onmessage = function(event) {
  const data = event.data;
  console.log('ವರ್ಕರ್‌ನಲ್ಲಿ ಸಂದೇಶ ಸ್ವೀಕರಿಸಲಾಗಿದೆ:', data);

  // ಕೆಲವು ಹಿನ್ನೆಲೆ ಕಾರ್ಯವನ್ನು ನಿರ್ವಹಿಸಿ
  const result = data.value * 2;

  // ಫಲಿತಾಂಶವನ್ನು ಮುಖ್ಯ ಥ್ರೆಡ್‌ಗೆ ಹಿಂತಿರುಗಿ ಕಳುಹಿಸಿ
  self.postMessage({ result: result });
};

console.log('ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ ಪ್ರಾರಂಭಗೊಂಡಿದೆ.');

main.js (ಮುಖ್ಯ ಥ್ರೆಡ್ ಸ್ಕ್ರಿಪ್ಟ್):


// main.js

// ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್ ಬೆಂಬಲಿತವಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
if (window.Worker) {
  // ಹೊಸ ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ ಅನ್ನು ರಚಿಸಿ
  // ಗಮನಿಸಿ: ಪಥವು ಮಾಡ್ಯೂಲ್ ಫೈಲ್‌ಗೆ ಸೂಚಿಸಬೇಕು (ಸಾಮಾನ್ಯವಾಗಿ .js ವಿಸ್ತರಣೆಯೊಂದಿಗೆ)
  const myWorker = new Worker('./worker.js', { type: 'module' });

  // ವರ್ಕರ್‌ನಿಂದ ಬರುವ ಸಂದೇಶಗಳಿಗಾಗಿ ಆಲಿಸಿ
  myWorker.onmessage = function(event) {
    console.log('ವರ್ಕರ್‌ನಿಂದ ಸಂದೇಶ ಸ್ವೀಕರಿಸಲಾಗಿದೆ:', event.data);
  };

  // ವರ್ಕರ್‌ಗೆ ಸಂದೇಶ ಕಳುಹಿಸಿ
  myWorker.postMessage({ value: 10 });

  // ನೀವು ದೋಷಗಳನ್ನು ಸಹ ನಿರ್ವಹಿಸಬಹುದು
  myWorker.onerror = function(error) {
    console.error('ವರ್ಕರ್ ದೋಷ:', error);
  };
} else {
  console.log('ನಿಮ್ಮ ಬ್ರೌಸರ್ ವೆಬ್ ವರ್ಕರ್ಸ್ ಅನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.');
}

ಇಲ್ಲಿ ಪ್ರಮುಖ ಅಂಶವೆಂದರೆ `Worker` ಇನ್‌ಸ್ಟಾನ್ಸ್ ಅನ್ನು ರಚಿಸುವಾಗ `{ type: 'module' }` ಆಯ್ಕೆಯನ್ನು ಬಳಸುವುದು. ಇದು ಬ್ರೌಸರ್‌ಗೆ ಒದಗಿಸಲಾದ URL (`./worker.js`) ಅನ್ನು ES ಮಾಡ್ಯೂಲ್ ಎಂದು ಪರಿಗಣಿಸಲು ಹೇಳುತ್ತದೆ.

ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್‌ನೊಂದಿಗೆ ಸಂವಹನ

ಮುಖ್ಯ ಥ್ರೆಡ್ ಮತ್ತು ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ ನಡುವಿನ ಸಂವಹನ (ಮತ್ತು ಪ್ರತಿಯಾಗಿ) ಸಂದೇಶಗಳ ಮೂಲಕ ನಡೆಯುತ್ತದೆ. ಎರಡೂ ಥ್ರೆಡ್‌ಗಳು `postMessage()` ಮೆಥಡ್ ಮತ್ತು `onmessage` ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗೆ ಪ್ರವೇಶವನ್ನು ಹೊಂದಿವೆ.

ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಅಥವಾ ಆಗಾಗ್ಗೆ ಸಂವಹನಕ್ಕಾಗಿ, ಮೆಸೇಜ್ ಚಾನೆಲ್‌ಗಳು ಅಥವಾ ಶೇರ್ಡ್ ವರ್ಕರ್ಸ್‌ನಂತಹ ಮಾದರಿಗಳನ್ನು ಪರಿಗಣಿಸಬಹುದು, ಆದರೆ ಅನೇಕ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಲ್ಲಿ, `postMessage` ಸಾಕಾಗುತ್ತದೆ.

ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್‌ನೊಂದಿಗೆ ಸುಧಾರಿತ ಹಿನ್ನೆಲೆ ಪ್ರಕ್ರಿಯೆ ಮಾದರಿಗಳು

ಈಗ, ಜಾಗತಿಕ ಬಳಕೆದಾರರಿಗೆ ಅನ್ವಯವಾಗುವ ಮಾದರಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಹೆಚ್ಚು ಸುಧಾರಿತ ಹಿನ್ನೆಲೆ ಪ್ರಕ್ರಿಯೆಯ ಕಾರ್ಯಗಳಿಗಾಗಿ ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳುವುದು ಎಂದು ನೋಡೋಣ.

ಮಾದರಿ 1: ಟಾಸ್ಕ್ ಕ್ಯೂಗಳು ಮತ್ತು ಕಾರ್ಯ ಹಂಚಿಕೆ

ಒಂದು ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶವೆಂದರೆ ಅನೇಕ ಸ್ವತಂತ್ರ ಕಾರ್ಯಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು. ಪ್ರತಿ ಕಾರ್ಯಕ್ಕೆ ಪ್ರತ್ಯೇಕ ವರ್ಕರ್ ಅನ್ನು ರಚಿಸುವ ಬದಲು (ಇದು ಅಸಮರ್ಥವಾಗಿರುತ್ತದೆ), ನೀವು ಟಾಸ್ಕ್ ಕ್ಯೂನೊಂದಿಗೆ ಒಂದೇ ವರ್ಕರ್ (ಅಥವಾ ವರ್ಕರ್‌ಗಳ ಪೂಲ್) ಅನ್ನು ಬಳಸಬಹುದು.

worker.js:


// worker.js

let taskQueue = [];
let isProcessing = false;

async function processTask(task) {
  console.log(`ಕಾರ್ಯ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾಗುತ್ತಿದೆ: ${task.type}`);
  // ಗಣನಾತ್ಮಕವಾಗಿ ತೀವ್ರವಾದ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಅನುಕರಿಸಿ
  await new Promise(resolve => setTimeout(resolve, task.duration || 1000));
  return `ಕಾರ್ಯ ${task.type} ಪೂರ್ಣಗೊಂಡಿದೆ.`;
}

async function runQueue() {
  if (isProcessing || taskQueue.length === 0) {
    return;
  }

  isProcessing = true;
  const currentTask = taskQueue.shift();

  try {
    const result = await processTask(currentTask);
    self.postMessage({ status: 'success', taskId: currentTask.id, result: result });
  } catch (error) {
    self.postMessage({ status: 'error', taskId: currentTask.id, error: error.message });
  } finally {
    isProcessing = false;
    runQueue(); // ಮುಂದಿನ ಕಾರ್ಯವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿ
  }
}

self.onmessage = function(event) {
  const { type, data, taskId } = event.data;

  if (type === 'addTask') {
    taskQueue.push({ id: taskId, ...data });
    runQueue();
  } else if (type === 'processAll') {
    // ಕ್ಯೂನಲ್ಲಿರುವ ಯಾವುದೇ ಕಾರ್ಯಗಳನ್ನು ತಕ್ಷಣವೇ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಪ್ರಯತ್ನಿಸಿ
    runQueue();
  }
};

console.log('ಟಾಸ್ಕ್ ಕ್ಯೂ ವರ್ಕರ್ ಪ್ರಾರಂಭಗೊಂಡಿದೆ.');

main.js:


// main.js

if (window.Worker) {
  const taskWorker = new Worker('./worker.js', { type: 'module' });
  let taskIdCounter = 0;

  taskWorker.onmessage = function(event) {
    console.log('ವರ್ಕರ್ ಸಂದೇಶ:', event.data);
    if (event.data.status === 'success') {
      // ಯಶಸ್ವಿ ಕಾರ್ಯ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆಯನ್ನು ನಿರ್ವಹಿಸಿ
      console.log(`ಕಾರ್ಯ ${event.data.taskId} ಫಲಿತಾಂಶದೊಂದಿಗೆ ಮುಗಿದಿದೆ: ${event.data.result}`);
    } else if (event.data.status === 'error') {
      // ಕಾರ್ಯದ ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸಿ
      console.error(`ಕಾರ್ಯ ${event.data.taskId} ವಿಫಲವಾಗಿದೆ: ${event.data.error}`);
    }
  };

  function addTaskToWorker(taskData) {
    const taskId = ++taskIdCounter;
    taskWorker.postMessage({ type: 'addTask', data: taskData, taskId: taskId });
    console.log(`ಕಾರ್ಯ ${taskId} ಅನ್ನು ಕ್ಯೂಗೆ ಸೇರಿಸಲಾಗಿದೆ.`);
    return taskId;
  }

  // ಉದಾಹರಣೆ ಬಳಕೆ: ಬಹು ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸಿ
  addTaskToWorker({ type: 'image_resize', duration: 1500 });
  addTaskToWorker({ type: 'data_fetch', duration: 2000 });
  addTaskToWorker({ type: 'data_process', duration: 1200 });

  // ಅಗತ್ಯವಿದ್ದರೆ ಐಚ್ಛಿಕವಾಗಿ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪ್ರಚೋದಿಸಿ (ಉದಾ., ಬಟನ್ ಕ್ಲಿಕ್ ಮೇಲೆ)
  // taskWorker.postMessage({ type: 'processAll' });

} else {
  console.log('ವೆಬ್ ವರ್ಕರ್ಸ್ ಈ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.');
}

ಜಾಗತಿಕ ಪರಿಗಣನೆ: ಕಾರ್ಯಗಳನ್ನು ಹಂಚುವಾಗ, ಸರ್ವರ್ ಲೋಡ್ ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಲೇಟೆನ್ಸಿಯನ್ನು ಪರಿಗಣಿಸಿ. ಬಾಹ್ಯ APIಗಳು ಅಥವಾ ಡೇಟಾವನ್ನು ಒಳಗೊಂಡಿರುವ ಕಾರ್ಯಗಳಿಗಾಗಿ, ನಿಮ್ಮ ಗುರಿ ಪ್ರೇಕ್ಷಕರಿಗೆ ಪಿಂಗ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡುವ ವರ್ಕರ್ ಸ್ಥಳಗಳು ಅಥವಾ ಪ್ರದೇಶಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಬಳಕೆದಾರರು ಮುಖ್ಯವಾಗಿ ಏಷ್ಯಾದಲ್ಲಿದ್ದರೆ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಮತ್ತು ವರ್ಕರ್ ಮೂಲಸೌಕರ್ಯವನ್ನು ಆ ಪ್ರದೇಶಗಳಿಗೆ ಹತ್ತಿರದಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡುವುದರಿಂದ ಕಾರ್ಯಕ್ಷಮತೆ ಸುಧಾರಿಸಬಹುದು.

ಮಾದರಿ 2: ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಭಾರೀ ಗಣನೆಗಳನ್ನು ಆಫ್‌ಲೋಡ್ ಮಾಡುವುದು

ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೇಟಾ ವಿಶ್ಲೇಷಣೆ, ಮೆಷಿನ್ ಲರ್ನಿಂಗ್ ಮತ್ತು ಸಂಕೀರ್ಣ ದೃಶ್ಯೀಕರಣಗಳಂತಹ ಕಾರ್ಯಗಳಿಗೆ ಶಕ್ತಿಯುತ ಲೈಬ್ರರಿಗಳನ್ನು ಹೊಂದಿದೆ. ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್ ಈ ಲೈಬ್ರರಿಗಳನ್ನು UI ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ಚಲಾಯಿಸಲು ಸೂಕ್ತವಾಗಿವೆ.

ನೀವು ಒಂದು ಕಾಲ್ಪನಿಕ `data-analyzer` ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ ಸಂಕೀರ್ಣ ಡೇಟಾ ಒಟ್ಟುಗೂಡಿಸುವಿಕೆಯನ್ನು ಮಾಡಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ. ನೀವು ಈ ಲೈಬ್ರರಿಯನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್‌ಗೆ ಆಮದು ಮಾಡಿಕೊಳ್ಳಬಹುದು.

data-analyzer.js (ಉದಾಹರಣೆ ಲೈಬ್ರರಿ ಮಾಡ್ಯೂಲ್):


// data-analyzer.js

export function aggregateData(data) {
  console.log('ವರ್ಕರ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಒಟ್ಟುಗೂಡಿಸಲಾಗುತ್ತಿದೆ...');
  // ಸಂಕೀರ್ಣ ಒಟ್ಟುಗೂಡಿಸುವಿಕೆಯನ್ನು ಅನುಕರಿಸಿ
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    sum += data[i];
    // ಗಣನೆಯನ್ನು ಅನುಕರಿಸಲು ಸ್ವಲ್ಪ ವಿಳಂಬವನ್ನು ಪರಿಚಯಿಸಿ
    // ನಿಜವಾದ ಸನ್ನಿವೇಶದಲ್ಲಿ, ಇದು ನಿಜವಾದ ಗಣನೆಯಾಗಿರುತ್ತದೆ
    for(let j = 0; j < 1000; j++) { /* delay */ }
  }
  return { total: sum, count: data.length };
}

analyticsWorker.js:


// analyticsWorker.js

import { aggregateData } from './data-analyzer.js';

self.onmessage = function(event) {
  const { dataset } = event.data;
  if (!dataset) {
    self.postMessage({ status: 'error', message: 'ಯಾವುದೇ ಡೇಟಾಸೆಟ್ ಒದಗಿಸಲಾಗಿಲ್ಲ' });
    return;
  }

  try {
    const result = aggregateData(dataset);
    self.postMessage({ status: 'success', result: result });
  } catch (error) {
    self.postMessage({ status: 'error', message: error.message });
  }
};

console.log('ಅನಾಲಿಟಿಕ್ಸ್ ವರ್ಕರ್ ಪ್ರಾರಂಭಗೊಂಡಿದೆ.');

main.js:


// main.js

if (window.Worker) {
  const analyticsWorker = new Worker('./analyticsWorker.js', { type: 'module' });

  analyticsWorker.onmessage = function(event) {
    console.log('ಅನಾಲಿಟಿಕ್ಸ್ ಫಲಿತಾಂಶ:', event.data);
    if (event.data.status === 'success') {
      document.getElementById('results').innerText = `ಒಟ್ಟು: ${event.data.result.total}, ಎಣಿಕೆ: ${event.data.result.count}`;
    } else {
      document.getElementById('results').innerText = `ದೋಷ: ${event.data.message}`;
    }
  };

  // ಒಂದು ದೊಡ್ಡ ಡೇಟಾಸೆಟ್ ಅನ್ನು ಸಿದ್ಧಪಡಿಸಿ (ಅನುಕರಿಸಲಾಗಿದೆ)
  const largeDataset = Array.from({ length: 10000 }, (_, i) => i + 1);

  // ಪ್ರಕ್ರಿಯೆಗಾಗಿ ವರ್ಕರ್‌ಗೆ ಡೇಟಾ ಕಳುಹಿಸಿ
  analyticsWorker.postMessage({ dataset: largeDataset });

} else {
  console.log('ವೆಬ್ ವರ್ಕರ್ಸ್ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.');
}

HTML (ಫಲಿತಾಂಶಗಳಿಗಾಗಿ):


<div id="results">ಡೇಟಾವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾಗುತ್ತಿದೆ...</div>

ಜಾಗತಿಕ ಪರಿಗಣನೆ: ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸುವಾಗ, ಅವು ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಅಂತರರಾಷ್ಟ್ರೀಯ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ, ವರ್ಕರ್‌ನಿಂದ ಉತ್ಪತ್ತಿಯಾಗುವ ಯಾವುದೇ ಬಳಕೆದಾರ-ಮುಖದ ಔಟ್‌ಪುಟ್‌ಗಾಗಿ ಸ್ಥಳೀಕರಣವನ್ನು ಪರಿಗಣಿಸಿ, ಆದರೂ ಸಾಮಾನ್ಯವಾಗಿ ವರ್ಕರ್‌ನ ಔಟ್‌ಪುಟ್ಟನ್ನು ಮುಖ್ಯ ಥ್ರೆಡ್ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಇದು ಸ್ಥಳೀಕರಣವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.

ಮಾದರಿ 3: ನೈಜ-ಸಮಯದ ಡೇಟಾ ಸಿಂಕ್ರೊನೈಸೇಶನ್ ಮತ್ತು ಕ್ಯಾಶಿಂಗ್

ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್ ನಿರಂತರ ಸಂಪರ್ಕಗಳನ್ನು (ಉದಾ., ವೆಬ್‌ಸಾಕೆಟ್‌ಗಳು) ನಿರ್ವಹಿಸಬಹುದು ಅಥವಾ ಸ್ಥಳೀಯ ಕ್ಯಾಶ್‌ಗಳನ್ನು ನವೀಕೃತವಾಗಿಡಲು ನಿಯತಕಾಲಿಕವಾಗಿ ಡೇಟಾವನ್ನು ಪಡೆಯಬಹುದು, ಇದು ವಿಶೇಷವಾಗಿ ನಿಮ್ಮ ಪ್ರಾಥಮಿಕ ಸರ್ವರ್‌ಗಳಿಗೆ ಸಂಭಾವ್ಯವಾಗಿ ಹೆಚ್ಚಿನ ಲೇಟೆನ್ಸಿ ಇರುವ ಪ್ರದೇಶಗಳಲ್ಲಿ ವೇಗವಾದ ಮತ್ತು ಹೆಚ್ಚು ಸ್ಪಂದನಾಶೀಲ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

cacheWorker.js:


// cacheWorker.js

let cache = {};
let websocket = null;

function setupWebSocket() {
  // ನಿಮ್ಮ ನಿಜವಾದ ವೆಬ್‌ಸಾಕೆಟ್ ಎಂಡ್‌ಪಾಯಿಂಟ್‌ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿ
  const wsUrl = 'wss://your-realtime-api.example.com/data';
  websocket = new WebSocket(wsUrl);

  websocket.onopen = () => {
    console.log('ವೆಬ್‌ಸಾಕೆಟ್ ಸಂಪರ್ಕಗೊಂಡಿದೆ.');
    // ಆರಂಭಿಕ ಡೇಟಾ ಅಥವಾ ಚಂದಾದಾರಿಕೆಯನ್ನು ವಿನಂತಿಸಿ
    websocket.send(JSON.stringify({ action: 'subscribe', topic: 'updates' }));
  };

  websocket.onmessage = (event) => {
    try {
      const message = JSON.parse(event.data);
      console.log('WS ಸಂದೇಶ ಸ್ವೀಕರಿಸಲಾಗಿದೆ:', message);
      if (message.type === 'update') {
        cache[message.key] = message.value;
        // ನವೀಕರಿಸಿದ ಕ್ಯಾಶ್ ಬಗ್ಗೆ ಮುಖ್ಯ ಥ್ರೆಡ್‌ಗೆ ತಿಳಿಸಿ
        self.postMessage({ type: 'cache_update', key: message.key, value: message.value });
      }
    } catch (e) {
      console.error('ವೆಬ್‌ಸಾಕೆಟ್ ಸಂದೇಶವನ್ನು ಪಾರ್ಸ್ ಮಾಡಲು ವಿಫಲವಾಗಿದೆ:', e);
    }
  };

  websocket.onerror = (error) => {
    console.error('ವೆಬ್‌ಸಾಕೆಟ್ ದೋಷ:', error);
    // ವಿಳಂಬದ ನಂತರ ಮರುಸಂಪರ್ಕಿಸಲು ಪ್ರಯತ್ನಿಸಿ
    setTimeout(setupWebSocket, 5000);
  };

  websocket.onclose = () => {
    console.log('ವೆಬ್‌ಸಾಕೆಟ್ ಸಂಪರ್ಕ ಕಡಿತಗೊಂಡಿದೆ. ಮರುಸಂಪರ್ಕಿಸಲಾಗುತ್ತಿದೆ...');
    setTimeout(setupWebSocket, 5000);
  };
}

self.onmessage = function(event) {
  const { type, data, key } = event.data;

  if (type === 'init') {
    // WS ಸಿದ್ಧವಿಲ್ಲದಿದ್ದರೆ API ನಿಂದ ಆರಂಭಿಕ ಡೇಟಾವನ್ನು ಪಡೆಯಬಹುದು
    // ಸರಳತೆಗಾಗಿ, ನಾವು ಇಲ್ಲಿ WS ಮೇಲೆ ಅವಲಂಬಿತರಾಗಿದ್ದೇವೆ.
    setupWebSocket();
  } else if (type === 'get') {
    const cachedValue = cache[key];
    self.postMessage({ type: 'cache_response', key: key, value: cachedValue });
  } else if (type === 'set') {
    cache[key] = data;
    self.postMessage({ type: 'cache_update', key: key, value: data });
    // ಐಚ್ಛಿಕವಾಗಿ, ಅಗತ್ಯವಿದ್ದರೆ ಸರ್ವರ್‌ಗೆ ನವೀಕರಣಗಳನ್ನು ಕಳುಹಿಸಿ
    if (websocket && websocket.readyState === WebSocket.OPEN) {
      websocket.send(JSON.stringify({ action: 'update', key: key, value: data }));
    }
  }
};

console.log('ಕ್ಯಾಶ್ ವರ್ಕರ್ ಪ್ರಾರಂಭಗೊಂಡಿದೆ.');

// ಐಚ್ಛಿಕ: ವರ್ಕರ್ ಅನ್ನು ಅಂತ್ಯಗೊಳಿಸಿದರೆ ಸ್ವಚ್ಛಗೊಳಿಸುವ ತರ್ಕವನ್ನು ಸೇರಿಸಿ
self.onclose = () => {
  if (websocket) {
    websocket.close();
  }
};

main.js:


// main.js

if (window.Worker) {
  const cacheWorker = new Worker('./cacheWorker.js', { type: 'module' });

  cacheWorker.onmessage = function(event) {
    console.log('ಕ್ಯಾಶ್ ವರ್ಕರ್ ಸಂದೇಶ:', event.data);
    if (event.data.type === 'cache_update') {
      console.log(`ಕೀಗಾಗಿ ಕ್ಯಾಶ್ ನವೀಕರಿಸಲಾಗಿದೆ: ${event.data.key}`);
      // ಅಗತ್ಯವಿದ್ದರೆ UI ಅಂಶಗಳನ್ನು ನವೀಕರಿಸಿ
    }
  };

  // ವರ್ಕರ್ ಮತ್ತು ವೆಬ್‌ಸಾಕೆಟ್ ಸಂಪರ್ಕವನ್ನು ಪ್ರಾರಂಭಿಸಿ
  cacheWorker.postMessage({ type: 'init' });

  // ನಂತರ, ಕ್ಯಾಶ್ ಮಾಡಿದ ಡೇಟಾವನ್ನು ವಿನಂತಿಸಿ
  setTimeout(() => {
    cacheWorker.postMessage({ type: 'get', key: 'userProfile' });
  }, 3000); // ಆರಂಭಿಕ ಡೇಟಾ ಸಿಂಕ್‌ಗಾಗಿ ಸ್ವಲ್ಪ ಕಾಯಿರಿ

  // ಒಂದು ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸಲು
  setTimeout(() => {
    cacheWorker.postMessage({ type: 'set', key: 'userSettings', data: { theme: 'dark' } });
  }, 5000);

} else {
  console.log('ವೆಬ್ ವರ್ಕರ್ಸ್ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.');
}

ಜಾಗತಿಕ ಪರಿಗಣನೆ: ವಿವಿಧ ಸಮಯ ವಲಯಗಳಲ್ಲಿ ಬಳಸಲಾಗುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ನೈಜ-ಸಮಯದ ಸಿಂಕ್ರೊನೈಸೇಶನ್ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಕಡಿಮೆ-ಲೇಟೆನ್ಸಿ ಸಂಪರ್ಕಗಳನ್ನು ಒದಗಿಸಲು ನಿಮ್ಮ ವೆಬ್‌ಸಾಕೆಟ್ ಸರ್ವರ್ ಮೂಲಸೌಕರ್ಯವನ್ನು ಜಾಗತಿಕವಾಗಿ ವಿತರಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಅಸ್ಥಿರ ಇಂಟರ್ನೆಟ್ ಇರುವ ಪ್ರದೇಶಗಳಲ್ಲಿನ ಬಳಕೆದಾರರಿಗಾಗಿ, ದೃಢವಾದ ಮರುಸಂಪರ್ಕ ತರ್ಕ ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು (ಉದಾ., ವೆಬ್‌ಸಾಕೆಟ್‌ಗಳು ವಿಫಲವಾದರೆ ನಿಯತಕಾಲಿಕ ಪೋಲಿಂಗ್) ಕಾರ್ಯಗತಗೊಳಿಸಿ.

ಮಾದರಿ 4: WebAssembly ಏಕೀಕರಣ

ಅತ್ಯಂತ ಕಾರ್ಯಕ್ಷಮತೆ-ನಿರ್ಣಾಯಕ ಕಾರ್ಯಗಳಿಗಾಗಿ, ವಿಶೇಷವಾಗಿ ಭಾರೀ ಸಂಖ್ಯಾತ್ಮಕ ಗಣನೆ ಅಥವಾ ಚಿತ್ರ ಸಂಸ್ಕರಣೆಯನ್ನು ಒಳಗೊಂಡಿರುವವುಗಳಿಗಾಗಿ, WebAssembly (Wasm) ಸ್ಥಳೀಯ-ಸದೃಶ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀಡಬಲ್ಲದು. ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್ Wasm ಕೋಡ್ ಅನ್ನು ಚಲಾಯಿಸಲು ಅತ್ಯುತ್ತಮ ಪರಿಸರವಾಗಿದೆ, ಅದನ್ನು ಮುಖ್ಯ ಥ್ರೆಡ್‌ನಿಂದ ಪ್ರತ್ಯೇಕವಾಗಿ ಇಡುತ್ತದೆ.

ನೀವು C++ ಅಥವಾ Rust ನಿಂದ ಕಂಪೈಲ್ ಮಾಡಿದ Wasm ಮಾಡ್ಯೂಲ್ (ಉದಾ., `image_processor.wasm`) ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಭಾವಿಸೋಣ.

imageProcessorWorker.js:


// imageProcessorWorker.js

let imageProcessorModule = null;

async function initializeWasm() {
  try {
    // Wasm ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ
    // './image_processor.wasm' ಪಥವು ಪ್ರವೇಶಿಸಬಹುದಾದಂತಿರಬೇಕು.
    // Wasm ಆಮದುಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಿಮ್ಮ ಬಿಲ್ಡ್ ಟೂಲ್ ಅನ್ನು ನೀವು ಕಾನ್ಫಿಗರ್ ಮಾಡಬೇಕಾಗಬಹುದು.
    const response = await fetch('./image_processor.wasm');
    const buffer = await response.arrayBuffer();
    const module = await WebAssembly.instantiate(buffer, {
      // ಯಾವುದೇ ಅಗತ್ಯ ಹೋಸ್ಟ್ ಫಂಕ್ಷನ್‌ಗಳು ಅಥವಾ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಇಲ್ಲಿ ಆಮದು ಮಾಡಿಕೊಳ್ಳಿ
      env: {
        log: (value) => console.log('Wasm ಲಾಗ್:', value),
        // ಉದಾಹರಣೆ: ವರ್ಕರ್‌ನಿಂದ Wasm ಗೆ ಫಂಕ್ಷನ್ ಅನ್ನು ಪಾಸ್ ಮಾಡಿ
        // ಇದು ಸಂಕೀರ್ಣವಾಗಿದೆ, ಸಾಮಾನ್ಯವಾಗಿ ಡೇಟಾವನ್ನು ಹಂಚಿದ ಮೆಮೊರಿ (ArrayBuffer) ಮೂಲಕ ರವಾನಿಸಲಾಗುತ್ತದೆ
      }
    });
    imageProcessorModule = module.instance.exports;
    console.log('WebAssembly ಮಾಡ್ಯೂಲ್ ಲೋಡ್ ಮತ್ತು ಇನ್‌ಸ್ಟಾನ್ಶಿಯೇಟ್ ಆಗಿದೆ.');
    self.postMessage({ status: 'wasm_ready' });
  } catch (error) {
    console.error('Wasm ಲೋಡ್ ಅಥವಾ ಇನ್‌ಸ್ಟಾನ್ಶಿಯೇಟ್ ಮಾಡುವಲ್ಲಿ ದೋಷ:', error);
    self.postMessage({ status: 'wasm_error', message: error.message });
  }
}

self.onmessage = async function(event) {
  const { type, imageData, width, height } = event.data;

  if (type === 'process_image') {
    if (!imageProcessorModule) {
      self.postMessage({ status: 'error', message: 'Wasm ಮಾಡ್ಯೂಲ್ ಸಿದ್ಧವಾಗಿಲ್ಲ.' });
      return;
    }

    try {
      // Wasm ಫಂಕ್ಷನ್ ಚಿತ್ರ ಡೇಟಾ ಮತ್ತು ಆಯಾಮಗಳಿಗೆ ಪಾಯಿಂಟರ್ ಅನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ ಎಂದು ಭಾವಿಸಲಾಗಿದೆ
      // ಇದಕ್ಕೆ Wasm ನೊಂದಿಗೆ ಎಚ್ಚರಿಕೆಯ ಮೆಮೊರಿ ನಿರ್ವಹಣೆ ಅಗತ್ಯ.
      // ಒಂದು ಸಾಮಾನ್ಯ ಮಾದರಿಯೆಂದರೆ Wasm ನಲ್ಲಿ ಮೆಮೊರಿಯನ್ನು ಹಂಚುವುದು, ಡೇಟಾವನ್ನು ನಕಲಿಸುವುದು, ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವುದು, ನಂತರ ಮರಳಿ ನಕಲಿಸುವುದು.

      // ಸರಳತೆಗಾಗಿ, imageProcessorModule.process ರಾ ಇಮೇಜ್ ಬೈಟ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ
      // ಮತ್ತು ಸಂಸ್ಕರಿಸಿದ ಬೈಟ್‌ಗಳನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ ಎಂದು ಭಾವಿಸೋಣ.
      // ನಿಜವಾದ ಸನ್ನಿವೇಶದಲ್ಲಿ, ನೀವು SharedArrayBuffer ಅಥವಾ ArrayBuffer ಅನ್ನು ಪಾಸ್ ಮಾಡುತ್ತೀರಿ.

      const processedImageData = imageProcessorModule.process(imageData, width, height);

      self.postMessage({ status: 'success', processedImageData: processedImageData });
    } catch (error) {
      console.error('Wasm ಚಿತ್ರ ಸಂಸ್ಕರಣೆ ದೋಷ:', error);
      self.postMessage({ status: 'error', message: error.message });
    }
  }
};

// ವರ್ಕರ್ ಪ್ರಾರಂಭವಾದಾಗ Wasm ಅನ್ನು ಪ್ರಾರಂಭಿಸಿ
initializeWasm();

main.js:


// main.js

if (window.Worker) {
  const imageWorker = new Worker('./imageProcessorWorker.js', { type: 'module' });
  let isWasmReady = false;

  imageWorker.onmessage = function(event) {
    console.log('ಚಿತ್ರ ವರ್ಕರ್ ಸಂದೇಶ:', event.data);
    if (event.data.status === 'wasm_ready') {
      isWasmReady = true;
      console.log('ಚಿತ್ರ ಸಂಸ್ಕರಣೆ ಸಿದ್ಧವಾಗಿದೆ.');
      // ಈಗ ನೀವು ಚಿತ್ರಗಳನ್ನು ಸಂಸ್ಕರಣೆಗಾಗಿ ಕಳುಹಿಸಬಹುದು
    } else if (event.data.status === 'success') {
      console.log('ಚಿತ್ರವನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಸಂಸ್ಕರಿಸಲಾಗಿದೆ.');
      // ಸಂಸ್ಕರಿಸಿದ ಚಿತ್ರವನ್ನು ಪ್ರದರ್ಶಿಸಿ (event.data.processedImageData)
    } else if (event.data.status === 'error') {
      console.error('ಚಿತ್ರ ಸಂಸ್ಕರಣೆ ವಿಫಲವಾಗಿದೆ:', event.data.message);
    }
  };

  // ಉದಾಹರಣೆ: ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ನಿಮ್ಮ ಬಳಿ ಚಿತ್ರ ಫೈಲ್ ಇದೆ ಎಂದು ಭಾವಿಸಲಾಗಿದೆ
  // ಚಿತ್ರ ಡೇಟಾವನ್ನು ಪಡೆದುಕೊಳ್ಳಿ (ಉದಾ., ArrayBuffer ಆಗಿ)
  fetch('./sample_image.png')
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => {
      // ನೀವು ಸಾಮಾನ್ಯವಾಗಿ ಇಲ್ಲಿ ಚಿತ್ರ ಡೇಟಾ, ಅಗಲ, ಎತ್ತರವನ್ನು ಹೊರತೆಗೆಯುತ್ತೀರಿ
      // ಈ ಉದಾಹರಣೆಗಾಗಿ, ಡೇಟಾವನ್ನು ಅನುಕರಿಸೋಣ
      const dummyImageData = new Uint8Array(1000);
      const imageWidth = 10;
      const imageHeight = 10;

      // ಡೇಟಾವನ್ನು ಕಳುಹಿಸುವ ಮೊದಲು Wasm ಮಾಡ್ಯೂಲ್ ಸಿದ್ಧವಾಗುವವರೆಗೆ ಕಾಯಿರಿ
      const sendImage = () => {
        if (isWasmReady) {
          imageWorker.postMessage({
            type: 'process_image',
            imageData: dummyImageData, // ArrayBuffer ಅಥವಾ Uint8Array ಆಗಿ ರವಾನಿಸಿ
            width: imageWidth,
            height: imageHeight
          });
        } else {
          setTimeout(sendImage, 100);
        }
      };
      sendImage();
    })
    .catch(error => {
      console.error('ಚಿತ್ರವನ್ನು ತರುವಲ್ಲಿ ದೋಷ:', error);
    });

} else {
  console.log('ವೆಬ್ ವರ್ಕರ್ಸ್ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.');
}

ಜಾಗತಿಕ ಪರಿಗಣನೆ: WebAssembly ಗಮನಾರ್ಹ ಕಾರ್ಯಕ್ಷಮತೆ ವರ್ಧಕವನ್ನು ನೀಡುತ್ತದೆ, ಇದು ಜಾಗತಿಕವಾಗಿ ಸಂಬಂಧಿಸಿದೆ. ಆದಾಗ್ಯೂ, Wasm ಫೈಲ್ ಗಾತ್ರಗಳು ಒಂದು ಪರಿಗಣನೆಯಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ಸೀಮಿತ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ. ನಿಮ್ಮ Wasm ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಗಾತ್ರಕ್ಕಾಗಿ ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಬಹು Wasm ಕಾರ್ಯಗಳನ್ನು ಹೊಂದಿದ್ದರೆ ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್‌ನಂತಹ ತಂತ್ರಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ಮಾದರಿ 5: ಸಮಾನಾಂತರ ಪ್ರಕ್ರಿಯೆಗಾಗಿ ವರ್ಕರ್ ಪೂಲ್‌ಗಳು

ನಿಜವಾಗಿಯೂ CPU-ಬೌಂಡ್ ಕಾರ್ಯಗಳಿಗಾಗಿ, ಇವುಗಳನ್ನು ಅನೇಕ ಸಣ್ಣ, ಸ್ವತಂತ್ರ ಉಪ-ಕಾರ್ಯಗಳಾಗಿ ವಿಂಗಡಿಸಬಹುದು, ವರ್ಕರ್‌ಗಳ ಪೂಲ್ ಸಮಾನಾಂತರ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆಯ ಮೂಲಕ ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನೀಡಬಲ್ಲದು.

workerPool.js (ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್):


// workerPool.js

// ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಕಾರ್ಯವನ್ನು ಅನುಕರಿಸಿ
function performComplexCalculation(input) {
  let result = 0;
  for (let i = 0; i < 1e7; i++) {
    result += Math.sin(input * i) * Math.cos(input / i);
  }
  return result;
}

self.onmessage = function(event) {
  const { taskInput, taskId } = event.data;
  console.log(`ವರ್ಕರ್ ${self.name || ''} ಕಾರ್ಯವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತಿದೆ ${taskId}`);
  try {
    const result = performComplexCalculation(taskInput);
    self.postMessage({ status: 'success', result: result, taskId: taskId });
  } catch (error) {
    self.postMessage({ status: 'error', error: error.message, taskId: taskId });
  }
};

console.log('ವರ್ಕರ್ ಪೂಲ್ ಸದಸ್ಯ ಪ್ರಾರಂಭಗೊಂಡಿದೆ.');

main.js (ವ್ಯವಸ್ಥಾಪಕ):


// main.js

const MAX_WORKERS = navigator.hardwareConcurrency || 4; // ಲಭ್ಯವಿರುವ ಕೋರ್‌ಗಳನ್ನು ಬಳಸಿ, ಡೀಫಾಲ್ಟ್ 4
let workers = [];
let taskQueue = [];
let availableWorkers = [];

function initializeWorkerPool() {
  for (let i = 0; i < MAX_WORKERS; i++) {
    const worker = new Worker('./workerPool.js', { type: 'module' });
    worker.name = `ವರ್ಕರ್-${i}`;
    worker.isBusy = false;

    worker.onmessage = function(event) {
      console.log(`${worker.name} ನಿಂದ ಸಂದೇಶ:`, event.data);
      if (event.data.status === 'success' || event.data.status === 'error') {
        // ಕಾರ್ಯ ಪೂರ್ಣಗೊಂಡಿದೆ, ವರ್ಕರ್ ಅನ್ನು ಲಭ್ಯವೆಂದು ಗುರುತಿಸಿ
        worker.isBusy = false;
        availableWorkers.push(worker);
        // ಯಾವುದಾದರೂ ಇದ್ದರೆ ಮುಂದಿನ ಕಾರ್ಯವನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿ
        processNextTask();
      }
    };

    worker.onerror = function(error) {
      console.error(`${worker.name} ನಲ್ಲಿ ದೋಷ:`, error);
      worker.isBusy = false;
      availableWorkers.push(worker);
      processNextTask(); // ಚೇತರಿಸಿಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸಿ
    };

    workers.push(worker);
    availableWorkers.push(worker);
  }
  console.log(`ವರ್ಕರ್ ಪೂಲ್ ಅನ್ನು ${MAX_WORKERS} ವರ್ಕರ್‌ಗಳೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲಾಗಿದೆ.`);
}

function addTask(taskInput) {
  taskQueue.push({ input: taskInput, id: Date.now() + Math.random() });
  processNextTask();
}

function processNextTask() {
  if (taskQueue.length === 0 || availableWorkers.length === 0) {
    return;
  }

  const worker = availableWorkers.shift();
  const task = taskQueue.shift();

  worker.isBusy = true;
  console.log(`ಕಾರ್ಯ ${task.id} ಅನ್ನು ${worker.name} ಗೆ ನಿಯೋಜಿಸಲಾಗುತ್ತಿದೆ`);
  worker.postMessage({ taskInput: task.input, taskId: task.id });
}

// ಮುಖ್ಯ ಕಾರ್ಯಗತಗೊಳಿಸುವಿಕೆ
if (window.Worker) {
  initializeWorkerPool();

  // ಪೂಲ್‌ಗೆ ಕಾರ್ಯಗಳನ್ನು ಸೇರಿಸಿ
  for (let i = 0; i < 20; i++) {
    addTask(i * 0.1);
  }

} else {
  console.log('ವೆಬ್ ವರ್ಕರ್ಸ್ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ.');
}

ಜಾಗತಿಕ ಪರಿಗಣನೆ: ಲಭ್ಯವಿರುವ CPU ಕೋರ್‌ಗಳ ಸಂಖ್ಯೆ (`navigator.hardwareConcurrency`) ವಿಶ್ವಾದ್ಯಂತ ಸಾಧನಗಳಲ್ಲಿ ಗಮನಾರ್ಹವಾಗಿ ಬದಲಾಗಬಹುದು. ನಿಮ್ಮ ವರ್ಕರ್ ಪೂಲ್ ತಂತ್ರವು ಕ್ರಿಯಾತ್ಮಕವಾಗಿರಬೇಕು. `navigator.hardwareConcurrency` ಬಳಸುವುದು ಉತ್ತಮ ಆರಂಭವಾದರೂ, ಕೆಲವು ಬಳಕೆದಾರರಿಗೆ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಮಿತಿಗಳು ಇನ್ನೂ ಅಡಚಣೆಯಾಗಬಹುದಾದ ತುಂಬಾ ಭಾರೀ, ದೀರ್ಘಕಾಲದ ಕಾರ್ಯಗಳಿಗಾಗಿ ಸರ್ವರ್-ಸೈಡ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪರಿಗಣಿಸಿ.

ಜಾಗತಿಕ ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ ಅನುಷ್ಠಾನಕ್ಕಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ನಿರ್ಮಿಸುವಾಗ, ಹಲವಾರು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿವೆ:

ತೀರ್ಮಾನ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ದಕ್ಷ ಮತ್ತು ಮಾಡ್ಯುಲರ್ ಹಿನ್ನೆಲೆ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವಲ್ಲಿ ಮಹತ್ವದ ಪ್ರಗತಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಟಾಸ್ಕ್ ಕ್ಯೂಗಳು, ಲೈಬ್ರರಿ ಆಫ್‌ಲೋಡಿಂಗ್, ನೈಜ-ಸಮಯದ ಸಿಂಕ್ರೊನೈಸೇಶನ್ ಮತ್ತು WebAssembly ಏಕೀಕರಣದಂತಹ ಮಾದರಿಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ವೈವಿಧ್ಯಮಯ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಸೇವೆ ಸಲ್ಲಿಸುವ ಹೆಚ್ಚು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು.

ಈ ಮಾದರಿಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದರಿಂದ ನೀವು ಗಣನಾತ್ಮಕವಾಗಿ ತೀವ್ರವಾದ ಕಾರ್ಯಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿಭಾಯಿಸಲು, ಸುಗಮ ಮತ್ತು ಆಕರ್ಷಕ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾಗುತ್ತಿದ್ದಂತೆ ಮತ್ತು ವೇಗ ಮತ್ತು ಸಂವಾದಾತ್ಮಕತೆಗಾಗಿ ಬಳಕೆದಾರರ ನಿರೀಕ್ಷೆಗಳು ಹೆಚ್ಚಾಗುತ್ತಲೇ ಇರುವುದರಿಂದ, ಮಾಡ್ಯೂಲ್ ವರ್ಕರ್ಸ್‌ನ ಶಕ್ತಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳುವುದು ಇನ್ನು ಮುಂದೆ ಐಷಾರಾಮಿಯಾಗಿಲ್ಲ, ಆದರೆ ವಿಶ್ವ-ದರ್ಜೆಯ ಡಿಜಿಟಲ್ ಉತ್ಪನ್ನಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಅವಶ್ಯಕತೆಯಾಗಿದೆ.

ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಹಿನ್ನೆಲೆ ಪ್ರಕ್ರಿಯೆಯ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಲು ಇಂದೇ ಈ ಮಾದರಿಗಳೊಂದಿಗೆ ಪ್ರಯೋಗವನ್ನು ಪ್ರಾರಂಭಿಸಿ.