ব্রাউজারের প্রধান থ্রেড থেকে জাভাস্ক্রিপ্ট চালানোর জন্য ওয়েব কর্মীদের ব্যবহার করুন

একটি অফ-মেন-থ্রেড আর্কিটেকচার আপনার অ্যাপের নির্ভরযোগ্যতা এবং ব্যবহারকারীর অভিজ্ঞতাকে উল্লেখযোগ্যভাবে উন্নত করতে পারে।

সুরমা

বিগত 20 বছরে, ওয়েব কয়েকটি শৈলী এবং চিত্র সহ স্ট্যাটিক নথি থেকে জটিল, গতিশীল অ্যাপ্লিকেশনগুলিতে নাটকীয়ভাবে বিবর্তিত হয়েছে। যাইহোক, একটি জিনিস অনেকাংশে অপরিবর্তিত রয়েছে: আমাদের সাইটগুলি রেন্ডার করার এবং আমাদের জাভাস্ক্রিপ্ট চালানোর কাজ করার জন্য আমাদের কাছে প্রতি ব্রাউজার ট্যাবে একটি মাত্র থ্রেড রয়েছে (কিছু ব্যতিক্রম সহ)।

ফলস্বরূপ, প্রধান থ্রেড অবিশ্বাস্যভাবে overworked হয়ে গেছে. এবং ওয়েব অ্যাপের জটিলতা বাড়ার সাথে সাথে মূল থ্রেডটি কার্যক্ষমতার জন্য একটি উল্লেখযোগ্য বাধা হয়ে দাঁড়ায়। বিষয়গুলিকে আরও খারাপ করার জন্য, একটি প্রদত্ত ব্যবহারকারীর জন্য মূল থ্রেডে কোড চালানোর জন্য যে পরিমাণ সময় লাগে তা প্রায় সম্পূর্ণরূপে অনির্দেশ্য কারণ ডিভাইসের ক্ষমতা কার্যক্ষমতার উপর ব্যাপক প্রভাব ফেলে। এই অপ্রত্যাশিততা কেবল তখনই বৃদ্ধি পাবে যখন ব্যবহারকারীরা ক্রমবর্ধমান বিভিন্ন ডিভাইসের সেট থেকে হাইপার-কনস্ট্রেনড ফিচার ফোন থেকে উচ্চ-শক্তিসম্পন্ন, উচ্চ-রিফ্রেশ-রেট ফ্ল্যাগশিপ মেশিনগুলি থেকে ওয়েব অ্যাক্সেস করবে।

যদি আমরা চাই যে পরিশীলিত ওয়েব অ্যাপগুলি কোর ওয়েব ভাইটাল- এর মতো কার্যক্ষমতা নির্দেশিকাগুলি নির্ভরযোগ্যভাবে পূরণ করতে পারে — যা মানুষের উপলব্ধি এবং মনোবিজ্ঞান সম্পর্কে অভিজ্ঞতামূলক ডেটার উপর ভিত্তি করে তৈরি হয় — তাহলে আমাদের মূল থ্রেড (OMT) থেকে আমাদের কোড কার্যকর করার উপায় প্রয়োজন৷

কেন ওয়েব কর্মীরা?

JavaScript হল, ডিফল্টরূপে, একটি একক-থ্রেডেড ভাষা যা মূল থ্রেডে কাজ চালায়। যাইহোক, ওয়েব ওয়ার্কাররা মূল থ্রেডের বাইরে কাজ পরিচালনা করার জন্য ডেভেলপারদের আলাদা থ্রেড তৈরি করার অনুমতি দিয়ে মূল থ্রেড থেকে এক ধরনের এস্কেপ হ্যাচ প্রদান করে। যদিও ওয়েব কর্মীদের সুযোগ সীমিত এবং DOM-এ সরাসরি অ্যাক্সেসের অফার না করে, তারা যদি যথেষ্ট উপকারী হতে পারে যদি এমন যথেষ্ট কাজ করা দরকার যা অন্যথায় মূল থ্রেডকে আবিষ্ট করে।

যেখানে কোর ওয়েব ভাইটাল উদ্বিগ্ন, মূল থ্রেডের বাইরে কাজ চালানো উপকারী হতে পারে। বিশেষ করে, মূল থ্রেড থেকে ওয়েব কর্মীদের কাছে কাজ অফলোড করা মূল থ্রেডের জন্য বিরোধ কমাতে পারে, যা একটি পৃষ্ঠার ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) প্রতিক্রিয়া মেট্রিককে উন্নত করতে পারে। যখন প্রধান থ্রেড প্রক্রিয়া করার জন্য কম কাজ থাকে, তখন এটি ব্যবহারকারীর মিথস্ক্রিয়ায় আরও দ্রুত প্রতিক্রিয়া জানাতে পারে।

কম প্রধান থ্রেডের কাজ—বিশেষ করে স্টার্টআপের সময়—এছাড়াও দীর্ঘ কাজগুলি কমিয়ে সবচেয়ে বড় বিষয়বস্তু পেইন্ট (LCP)- এর জন্য একটি সম্ভাব্য সুবিধা বহন করে৷ একটি LCP উপাদান রেন্ডার করার জন্য প্রধান থ্রেড সময় প্রয়োজন - হয় পাঠ্য বা চিত্রগুলিকে রেন্ডার করার জন্য, যা ঘন ঘন এবং সাধারণ LCP উপাদান - এবং সামগ্রিকভাবে প্রধান থ্রেডের কাজ হ্রাস করে, আপনি নিশ্চিত করতে পারেন যে আপনার পৃষ্ঠার LCP উপাদানটি ব্যয়বহুল কাজের দ্বারা ব্লক হওয়ার সম্ভাবনা কম। একজন ওয়েব কর্মী পরিবর্তে পরিচালনা করতে পারে।

ওয়েব কর্মীদের সঙ্গে থ্রেডিং

অন্যান্য প্ল্যাটফর্মগুলি সাধারণত আপনাকে একটি থ্রেডকে একটি ফাংশন দেওয়ার অনুমতি দিয়ে সমান্তরাল কাজ সমর্থন করে, যা আপনার বাকি প্রোগ্রামের সাথে সমান্তরালভাবে চলে। আপনি উভয় থ্রেড থেকে একই ভেরিয়েবল অ্যাক্সেস করতে পারেন, এবং এই ভাগ করা সংস্থানগুলিতে অ্যাক্সেস মিউটেক্স এবং সেমাফোরের সাথে জাতিগত অবস্থা প্রতিরোধ করতে সিঙ্ক্রোনাইজ করা যেতে পারে।

জাভাস্ক্রিপ্টে, আমরা ওয়েব কর্মীদের কাছ থেকে মোটামুটি একই ধরনের কার্যকারিতা পেতে পারি, যা 2007 সাল থেকে এবং 2012 সাল থেকে সমস্ত প্রধান ব্রাউজারে সমর্থিত। ওয়েব কর্মীরা প্রধান থ্রেডের সাথে সমান্তরালে চলে, কিন্তু OS থ্রেডিংয়ের বিপরীতে, তারা ভেরিয়েবল শেয়ার করতে পারে না।

একটি ওয়েব ওয়ার্কার তৈরি করতে, কর্মী কনস্ট্রাক্টরের কাছে একটি ফাইল পাঠান, যা সেই ফাইলটিকে একটি পৃথক থ্রেডে চালানো শুরু করে:

const worker = new Worker("./worker.js");

postMessage API ব্যবহার করে বার্তা পাঠিয়ে ওয়েব কর্মীর সাথে যোগাযোগ করুন। postMessage কলে একটি প্যারামিটার হিসাবে বার্তা মানটি পাস করুন এবং তারপর কর্মীর কাছে একটি বার্তা ইভেন্ট শ্রোতা যোগ করুন:

main.js

const worker = new Worker('./worker.js');
worker.postMessage([40, 2]);

worker.js

addEventListener('message', event => {
  const [a, b] = event.data;

  // Do stuff with the message
  // ...
});

মূল থ্রেডে একটি বার্তা ফেরত পাঠাতে, ওয়েব ওয়ার্কারে একই postMessage API ব্যবহার করুন এবং প্রধান থ্রেডে একটি ইভেন্ট লিসেনার সেট আপ করুন:

main.js

const worker = new Worker('./worker.js');

worker.postMessage([40, 2]);
worker.addEventListener('message', event => {
  console.log(event.data);
});

worker.js

addEventListener('message', event => {
  const [a, b] = event.data;

  // Do stuff with the message
  postMessage(a + b);
});

স্বীকার্য, এই পদ্ধতি কিছুটা সীমিত। ঐতিহাসিকভাবে, ওয়েব কর্মীদের প্রধানত প্রধান থ্রেড থেকে একটি একক ভারী কাজ সরানোর জন্য ব্যবহৃত হয়েছে। একটি একক ওয়েব কর্মী দিয়ে একাধিক অপারেশন পরিচালনা করার চেষ্টা করা দ্রুত অপ্রয়োজনীয় হয়ে যায়: আপনাকে কেবলমাত্র প্যারামিটারগুলিই নয়, বার্তার অপারেশনটিও এনকোড করতে হবে এবং অনুরোধগুলির প্রতিক্রিয়াগুলি মেলানোর জন্য আপনাকে হিসাবরক্ষণ করতে হবে৷ এই জটিলতা সম্ভবত কেন ওয়েব কর্মীদের আরও ব্যাপকভাবে গ্রহণ করা হয়নি।

কিন্তু যদি আমরা মূল থ্রেড এবং ওয়েব কর্মীদের মধ্যে যোগাযোগের কিছু অসুবিধা দূর করতে পারি, তাহলে এই মডেলটি অনেক ব্যবহারের ক্ষেত্রে একটি দুর্দান্ত ফিট হতে পারে। এবং, সৌভাগ্যবশত, একটি লাইব্রেরি আছে যা ঠিক তাই করে!

কমলিংক হল একটি লাইব্রেরি যার লক্ষ্য হল আপনাকে postMessage বিস্তারিত চিন্তা না করেই ওয়েব কর্মীদের ব্যবহার করতে দেওয়া। কমলিংক আপনাকে ওয়েব কর্মীদের এবং মূল থ্রেডের মধ্যে ভেরিয়েবল শেয়ার করতে দেয় প্রায় অন্যান্য প্রোগ্রামিং ভাষার মতো যা থ্রেডিং সমর্থন করে।

আপনি একটি ওয়েব ওয়ার্কারে এটি আমদানি করে এবং মূল থ্রেডে প্রকাশ করার জন্য ফাংশনগুলির একটি সেট সংজ্ঞায়িত করে কমলিংক সেট আপ করেন। তারপরে আপনি প্রধান থ্রেডে কমলিঙ্ক আমদানি করুন, কর্মীকে মোড়ানো এবং উন্মুক্ত ফাংশনগুলিতে অ্যাক্সেস পান:

worker.js

import {expose} from 'comlink';

const api = {
  someMethod() {
    // ...
  }
}

expose(api);

main.js

import {wrap} from 'comlink';

const worker = new Worker('./worker.js');
const api = wrap(worker);

প্রধান থ্রেডের api ভেরিয়েবলটি ওয়েব ওয়ার্কারের মতোই আচরণ করে, ব্যতীত প্রতিটি ফাংশন মানের পরিবর্তে একটি মানের জন্য একটি প্রতিশ্রুতি প্রদান করে।

কোন কোড আপনি একটি ওয়েব ওয়ার্কার সরানো উচিত?

ওয়েব কর্মীদের DOM এবং WebUSB , WebRTC , বা ওয়েব অডিওর মতো অনেক API-এ অ্যাক্সেস নেই, তাই আপনি আপনার অ্যাপের এমন কিছু অংশ রাখতে পারবেন না যা একজন কর্মীতে এই ধরনের অ্যাক্সেসের উপর নির্ভর করে। তবুও, প্রতিটি ছোট ছোট কোড একজন কর্মীর কাছে স্থানান্তরিত হয় যা সেখানে থাকা জিনিসগুলির জন্য মূল থ্রেডে আরও হেডরুম কিনে নেয়-যেমন ইউজার ইন্টারফেস আপডেট করা।

ওয়েব ডেভেলপারদের জন্য একটি সমস্যা হল যে বেশিরভাগ ওয়েব অ্যাপগুলি অ্যাপের সমস্ত কিছু অর্কেস্ট্রেট করতে Vue বা প্রতিক্রিয়ার মতো একটি UI ফ্রেমওয়ার্কের উপর নির্ভর করে; সবকিছুই ফ্রেমওয়ার্কের একটি উপাদান এবং তাই অন্তর্নিহিতভাবে DOM-এর সাথে আবদ্ধ। এটি একটি OMT আর্কিটেকচারে স্থানান্তর করা কঠিন বলে মনে হবে।

যাইহোক, যদি আমরা এমন একটি মডেলে স্থানান্তর করি যেখানে UI উদ্বেগগুলি অন্যান্য উদ্বেগ থেকে আলাদা করা হয়, যেমন রাষ্ট্রীয় ব্যবস্থাপনা, ওয়েব কর্মীরা এমনকি ফ্রেমওয়ার্ক-ভিত্তিক অ্যাপগুলির সাথেও বেশ কার্যকর হতে পারে। এটি ঠিক PROXX এর সাথে নেওয়া পদ্ধতি।

PROXX: একটি OMT কেস স্টাডি

Google Chrome টিম PROXX কে একটি মাইনসুইপার ক্লোন হিসাবে ডেভেলপ করেছে যা অফলাইনে কাজ করা এবং একটি আকর্ষক ব্যবহারকারীর অভিজ্ঞতা সহ প্রগতিশীল ওয়েব অ্যাপের প্রয়োজনীয়তা পূরণ করে৷ দুর্ভাগ্যবশত, গেমের প্রাথমিক সংস্করণগুলি ফিচার ফোনের মতো সীমাবদ্ধ ডিভাইসগুলিতে খারাপভাবে পারফর্ম করেছিল, যা দলটিকে বুঝতে পেরেছিল যে মূল থ্রেডটি একটি বাধা ছিল।

দলটি তার যুক্তি থেকে গেমের চাক্ষুষ অবস্থাকে আলাদা করতে ওয়েব কর্মীদের ব্যবহার করার সিদ্ধান্ত নিয়েছে:

  • প্রধান থ্রেড অ্যানিমেশন এবং ট্রানজিশনের রেন্ডারিং পরিচালনা করে।
  • একজন ওয়েব কর্মী গেম লজিক পরিচালনা করে, যা সম্পূর্ণরূপে গণনামূলক।

PROXX-এর ফিচার ফোন পারফরম্যান্সে OMT-এর আকর্ষণীয় প্রভাব ছিল। নন-ওএমটি সংস্করণে, ব্যবহারকারী এটির সাথে ইন্টারঅ্যাক্ট করার পরে UI ছয় সেকেন্ডের জন্য হিমায়িত হয়। কোন প্রতিক্রিয়া নেই, এবং ব্যবহারকারীকে অন্য কিছু করতে সক্ষম হওয়ার আগে পুরো ছয় সেকেন্ডের জন্য অপেক্ষা করতে হবে।

PROXX-এর নন-OMT সংস্করণে UI প্রতিক্রিয়ার সময়।

OMT সংস্করণে, তবে, গেমটি একটি UI আপডেট সম্পূর্ণ করতে বারো সেকেন্ড সময় নেয়। যদিও এটি একটি কর্মক্ষমতা ক্ষতির মত মনে হয়, এটি আসলে ব্যবহারকারীর প্রতিক্রিয়া বৃদ্ধি করে। স্লোডাউন ঘটে কারণ অ্যাপটি নন-ওএমটি সংস্করণের চেয়ে বেশি ফ্রেম শিপিং করছে, যা কোনো ফ্রেমই শিপিং করছে না। তাই ব্যবহারকারী জানে যে কিছু ঘটছে এবং UI আপডেটের সাথে সাথে খেলা চালিয়ে যেতে পারে, গেমটিকে যথেষ্ট ভাল বোধ করে।

PROXX এর OMT সংস্করণে UI প্রতিক্রিয়া সময়।

এটি একটি সচেতন ট্রেডঅফ: আমরা সীমাবদ্ধ ডিভাইসের ব্যবহারকারীদের এমন একটি অভিজ্ঞতা দিই যা উচ্চ-সম্পন্ন ডিভাইসের ব্যবহারকারীদের শাস্তি না করেই আরও ভাল বোধ করে ।

একটি OMT আর্কিটেকচারের প্রভাব

যেমন PROXX উদাহরণ দেখায়, OMT আপনার অ্যাপকে নির্ভরযোগ্যভাবে বিস্তৃত ডিভাইসে চালায়, কিন্তু এটি আপনার অ্যাপকে দ্রুততর করে না:

  • আপনি শুধু মূল থ্রেড থেকে কাজ সরান, কাজ কমাতে না.
  • ওয়েব কর্মী এবং মূল থ্রেডের মধ্যে অতিরিক্ত যোগাযোগ ওভারহেড কখনও কখনও জিনিসগুলিকে কিছুটা ধীর করে দিতে পারে।

ট্রেডঅফ বিবেচনা করুন

যেহেতু মূল থ্রেডটি জাভাস্ক্রিপ্ট চলাকালীন স্ক্রোলিংয়ের মতো ব্যবহারকারীর ইন্টারঅ্যাকশন প্রক্রিয়া করার জন্য বিনামূল্যে, তাই কম ড্রপ করা ফ্রেম আছে যদিও মোট অপেক্ষার সময় সামান্য বেশি হতে পারে। ব্যবহারকারীকে একটু অপেক্ষা করা একটি ফ্রেম ড্রপ করার চেয়ে ভাল কারণ ড্রপ করা ফ্রেমের জন্য ত্রুটির মার্জিন ছোট হয়: একটি ফ্রেম ড্রপ করা মিলিসেকেন্ডে ঘটে, যখন ব্যবহারকারীর অপেক্ষার সময় বোঝার আগে আপনার কাছে শত শত মিলিসেকেন্ড থাকে৷

ডিভাইস জুড়ে পারফরম্যান্সের অপ্রত্যাশিততার কারণে, OMT আর্কিটেকচারের লক্ষ্য সত্যিই ঝুঁকি হ্রাস করা —অত্যন্ত পরিবর্তনশীল রানটাইম অবস্থার মুখোমুখি হয়ে আপনার অ্যাপকে আরও শক্তিশালী করে তোলা—সমান্তরালকরণের পারফরম্যান্স সুবিধা সম্পর্কে নয়। স্থিতিস্থাপকতা বৃদ্ধি এবং UX-এর উন্নতি গতিতে যেকোনো ছোট ট্রেডঅফের চেয়ে বেশি মূল্যবান।

টুলিং সম্পর্কে একটি নোট

ওয়েব কর্মীরা এখনও মূলধারার নন, তাই বেশিরভাগ মডিউল টুল-যেমন ওয়েবপ্যাক এবং রোলআপ —তাদেরকে বাক্সের বাইরে সমর্থন করে না। (যদিও পার্সেল করে!) ভাগ্যক্রমে, ওয়েব কর্মী তৈরি করার জন্য প্লাগইন রয়েছে, ভাল, ওয়েবপ্যাক এবং রোলআপের সাথে কাজ করুন :

সারসংক্ষেপ

আমাদের অ্যাপগুলি যতটা সম্ভব নির্ভরযোগ্য এবং অ্যাক্সেসযোগ্য তা নিশ্চিত করার জন্য, বিশেষ করে একটি ক্রমবর্ধমান বিশ্বায়িত মার্কেটপ্লেসে, আমাদের সীমাবদ্ধ ডিভাইসগুলিকে সমর্থন করতে হবে—যেভাবে বেশিরভাগ ব্যবহারকারী বিশ্বব্যাপী ওয়েব অ্যাক্সেস করছেন। হাই-এন্ড ডিভাইসের ব্যবহারকারীদের উপর বিরূপ প্রভাব না ফেলে এই ধরনের ডিভাইসে কর্মক্ষমতা বাড়ানোর জন্য OMT একটি প্রতিশ্রুতিশীল উপায় অফার করে।

এছাড়াও, OMT এর গৌণ সুবিধা রয়েছে:

ওয়েব কর্মীদের ভীতিকর হতে হবে না। কমলিঙ্কের মতো সরঞ্জামগুলি কর্মীদের কাছ থেকে কাজ করে নিচ্ছে এবং বিস্তৃত ওয়েব অ্যাপ্লিকেশনগুলির জন্য তাদের একটি কার্যকর পছন্দ করে তুলছে৷

আনস্প্ল্যাশ থেকে নায়কের ছবি, জেমস ময়ূর দ্বারা।