"ফ্রন্টএন্ড অপ্টিমাইজেশন" শুনলে আপনার মনে কী আসে? আমাদের অধিকাংশের জন্য এটি নেটওয়ার্ক অনুরোধ কমানো, বান্ডল ছোট করা, বা ক্যাশের ভালো ব্যবহার করা জিনিসগুলো। এর পাশাপাশি, হয়তো রি-রেন্ডার কমানো বা রিসোর্স লোড হওয়ার সময় টিউন করা। মেইন থ্রেড সাধারণত सामने আসে না, এবং এর জন্য একটি কারণ আছে: অধিকাংশ স্ক্রিনে এটি কখনো সমস্যা হয় না। কিন্তু অনেক ইন্টারঅ্যাকশন वाली স্ক্রিনে, যেখানে ডেটা লাইভ স্ট্রিম হয় এবং স্ক্রোলিং, অ্যানিমেশন, এবং ইনপুট সব একসাথে জড়িয়ে থাকে, ছবি পরিবর্তন হয়। আপনি নেটওয়ার্ক এবং বান্ডল আকারে যতটুকু বাঁচান, স্ক্রিন ঠিক তখন জমে যায় যখন মেইন থ্রেড ব্লক হয়। আপনি সম্ভবত এমন একটি ওয়েবসাইটের সাথে সাক্ষাত করেছেন যেখানে স্ক্রোলিং কখনো কখনো হকলে, একটি বাটন কিছুটা দেরিতে প্রতিক্রিয়া জানায়, বা সার্চ বক্সে টাইপ করা অক্ষরগুলো অর্ধেক বিট পিছনে দেখায়। এটি খারাপ হওয়ায় বিরক্ত করছে না, কিন্তু এটি একটি সূক্ষ্ম উপায়ে আপনার স্নায়ুতে চাপ দেয়। সেই ধরনের জ্যাঙ্কই হলো ব্লক করা মেইন থ্রেডের চেহারা। ডেভেলপাররা যখন এই ধরনের জ্যাঙ্কে পড়ে, তখন সাধারণ প্রতিক্রিয়া হলো চিন্তা করা "আমার কোড কি ধীর?" এবং অ্যালগরিদম ভাঙা বা বর্জিত গণনা খুঁজে বের করা শুরু করা। তবে অধিকাংশ ক্ষেত্রে, কোডের গতি সমস্যা নয়। কোড ধীর নয়। এটি কেবল সেটি হচ্ছে মেইন থ্রেড ধরে রাখা কোড। ব্রাউজারের একাধিক থ্রেড আছে, কিন্তু কোড থেকে যা কিছু আমরা স্পর্শ করতে পারি সেটি প্রায়শই মেইন থ্রেডে কেন্দ্রীভূত। গণনা, রেন্ডারিং, ইভেন্ট হ্যান্ডলিং, নেটওয়ার্ক রেসপন্স হ্যান্ডলিং, এবং আপনার ফ্রেমওয়ার্কের ইন্টারনাল সবই সেখানে প্রসেস হয়। একটু রিসোর্স, কাজের পাহাড়। ব্রাউজারের মেইন থ্রেড ব্যয়বহুল। অধিকাংশ সময় এটি সমস্যা তৈরি করে না, কিন্তু একবার আপনি কিছু উদ্দেশ্যমূলক কিছু করার চেষ্টা করলে, মেইন থ্রেড হ্যান্ডল করা গুরুত্বপূর্ণ অংশ হয়ে যায়। এই আর্টিকেলটি সেটি কীভাবে হ্যান্ডল করতে হয় তার সম্পর্কে। আসুন শুরু করি মেইন থ্রেড আসলে কী করে সেটি নিয়ে। এর কাজ দুটি বিস্তৃত ক্যাটাগরিতে পড়ে। প্রথমটি হলো জাভাস্ক্রিপ্ট রান করা। আমরা যে কোড লিখি, ইভেন্ট হ্যান্ডলার, টাইমার, নেটওয়ার্ক রেসপন্স কলব্যাক, এবং ফ্রেমওয়ার্কের ইন্টারনাল, সবই এখানে চলে। এই টাস্কগুলো কিউতে প্রবেশ করার ক্রমে এক্সিকিউট হয়, যখনই একটি গ্যাপ থাকে, স্ক্রিন রিফ্রেশ সাইকেলের সাথে কোনো সম্পর্ক নেই। দ্বিতীয়টি হলো স্ক্রিন ড্র করা। যখন DOM বা স্টাইল পরিবর্তন হয় এবং স্ক্রিন আপডেট করার প্রয়োজন হয়, ব্রাউজার একটি ফ্রেম তৈরি করতে প্রায় এই ধাপগুলো অনুসরণ করে, ক্রমে। রিকোয়েস্ট অ্যানিমেশন ফ্রেম কলব্যাক চালান — ফ্রেম ড্র হওয়ার ঠিক আগে চালানোর জন্য রেজিস্টার্ড জাভাস্ক্রিপ্ট স্টাইল ক্যালকুলেশন — প্রতিটি এলিমেন্টের জন্য চূড়ান্ত CSS মান গণনা লে আউট — প্রতিটি এলিমেন্টের পজিশন এবং সাইজ গণনা (রিফ্লোও বলা হয়) পেইন্ট — পেইন্ট কমান্ড জেনারেট করা যা বর্ণনা করে কী ড্র করা হবে, কোন রঙে যদি কিছুই না বদলে, এই ধাপগুলো সম্পূর্ণরূপে স্কিপ করা হয়, তাই এগুলো প্রতিটি ফ্রেমে চালানোর প্রয়োজন নেই। শুধু চূড়ান্ত কম্পোজিটিং ধাপটি, যা প্রোডিউস করা আউটপুট নেয় এবং সেটি স্ক্রিনে অ্যাসেম্বল করে, কম্পোজিটর থ্রেডকে হস্তান্তরিত করা হয়। অন্য কথায়, স্ক্রিন ড্র করার পাইপলাইনের অধিকাংশ ফ্রন্ট হাফ মেইন থ্রেডের দায়িত্ব। স্ক্রিন আপডেট করার জন্য রেন্ডারিং পাইপলাইন স্ক্রিনকে স্মুথ দেখানোর জন্য, ফ্রেমগুলো ডিসপ্লে এর রিফ্রেশ রেটে ড্র করা হবে। সবচেয়ে সাধারণ 60Hz ডিসপ্লেতে, এর মানে ৬০ ফ্রেম পার সেকেন্ড, বা প্রায় ১৬.৬ মিলিসেকেন্ড পার ফ্রেম। এবং আপনি সেটি সম্পূর্ণরূপে ব্যবহার করতে পারবেন না। একবার ব্রাউজারের নিজস্ব প্রসেসিং খরচ বাদ দিলে, প্র্যাকটিক্যাল বাজেট সাধারণত প্রায় ১০ মিলিসেকেন্ড মाना হয়, এবং 120Hz ডিভাইসে বাজেটটি আধা হয়ে যায়। সমস্যা হলো উপরের দুটি ধরনের কাজ একই থ্রেডে এক লাইনে দাঁড়িয়ে আছে। জাভাস্ক্রিপ্ট সিঙ্গেল-থ্রেডেড ইভেন্ট লুপ মডেলের চারদিকেই ডিজাইন করা হয়েছিল। মেইন থ্রেড একবারে একটি টাস্ক প্রসেস করে, এবং সেই টাস্ক চলাকালীন অন্য কিছুই হয় না। যদি একটি জাভাস্ক্রিপ্ট ফাংশন ২০০ মিলিসেকেন্ড চলে, তবে সেই ২০০ মিলিসেকেন্ডের জন্য ব্রাউজার না স্ক্রিন রিপেইন্ট করতে পারে না ইউজারের ক্লিক রিসিভ করতে পারে। প্রায় ১০ মিলিসেকেন্ডের ফ্রেম বাজেটের বিপরীতে, এটি একটি фаতাল পরিমাণ সময়। একটি টাস্ক যা রু...