দীর্ঘ জাভাস্ক্রিপ্ট কাজগুলি কি ইন্টারেক্টিভ করতে আপনার সময়কে বিলম্বিত করছে?

ব্যবহারকারীর মিথস্ক্রিয়া প্রতিরোধে ব্যয়বহুল কাজ নির্ণয় করতে শিখুন।

আদ্দি ওসমানী
আদ্দি ওসমানী

দীর্ঘ কাজগুলি মূল থ্রেডকে ব্যস্ত রাখতে পারে, ব্যবহারকারীর মিথস্ক্রিয়া বিলম্বিত করে। Chrome DevTools এখন লং টাস্কগুলিকে কল্পনা করতে পারে, যাতে অপ্টিমাইজ করার জন্য কাজগুলি দেখতে সহজ হয়৷

আপনি যদি আপনার পৃষ্ঠাগুলি অডিট করার জন্য লাইটহাউস ব্যবহার করেন, তাহলে আপনি টাইম টু ইন্টারঅ্যাকটিভের সাথে পরিচিত হতে পারেন, একটি মেট্রিক যা প্রতিনিধিত্ব করে যখন ব্যবহারকারীরা আপনার পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করতে পারে এবং একটি প্রতিক্রিয়া পেতে পারে৷ কিন্তু আপনি কি জানেন লং (জাভাস্ক্রিপ্ট) টাস্কগুলি একটি দরিদ্র টিটিআইতে ব্যাপকভাবে অবদান রাখতে পারে?

লাইটহাউস রিপোর্টে ইন্টারেক্টিভের সময় দেখানো হয়েছে

দীর্ঘ টাস্ক কি?

একটি লং টাস্ক হল জাভাস্ক্রিপ্ট কোড যা মূল থ্রেডকে বর্ধিত সময়ের জন্য একচেটিয়া রাখে, যার ফলে UI "ফ্রিজ" হয়ে যায়।

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

CPU-ভারী লং টাস্কগুলি জটিল কাজের কারণে ঘটে যা 50ms এর বেশি সময় নেয়। কেন 50ms? RAIL মডেল আপনাকে 50ms এ ব্যবহারকারীর ইনপুট ইভেন্ট প্রক্রিয়া করার পরামর্শ দেয় যাতে 100ms এর মধ্যে দৃশ্যমান প্রতিক্রিয়া নিশ্চিত করা যায়। যদি আপনি না করেন, কর্ম এবং প্রতিক্রিয়া মধ্যে সংযোগ বিচ্ছিন্ন হয়.

আমার পৃষ্ঠায় কি দীর্ঘ টাস্ক আছে যা ইন্টারঅ্যাক্টিভিটি বিলম্বিত করতে পারে?

এখন পর্যন্ত, আপনাকে Chrome DevTools- এ 50ms দীর্ঘ স্ক্রিপ্টের "লম্বা হলুদ ব্লক" ম্যানুয়ালি খুঁজতে হবে অথবা কোন কাজগুলি ইন্টারঅ্যাক্টিভিটি বিলম্বিত করছে তা বের করতে লং টাস্ক API ব্যবহার করতে হবে। এই একটু কষ্টকর হতে পারে.

একটি DevTools পারফরম্যান্স প্যানেলের স্ক্রিনশট ছোট কাজ এবং দীর্ঘ কাজের মধ্যে পার্থক্য দেখায়

আপনার পারফরম্যান্স অডিটিং ওয়ার্কফ্লোকে সহজ করতে, DevTools এখন লং টাস্কগুলিকে কল্পনা করে ৷ টাস্কে (ধূসর রঙে দেখানো হয়েছে) লাল পতাকা আছে যদি সেগুলি লং টাস্ক হয়।

DevTools দীর্ঘ টাস্কগুলির জন্য একটি লাল পতাকা সহ পারফরম্যান্স প্যানেলে ধূসর বার হিসাবে দীর্ঘ টাস্কগুলিকে ভিজ্যুয়ালাইজ করছে

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

আমার দীর্ঘ টাস্কের কারণ কি?

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

DevTools-এ একটি দীর্ঘ টাস্ক ('টাস্ক' লেবেলযুক্ত) নির্বাচন করা আমাদেরকে এর জন্য দায়ী ক্রিয়াকলাপগুলিতে ড্রিল-ডাউন করতে দেয়।

দীর্ঘ টাস্ক অপ্টিমাইজ করার সাধারণ উপায় কি কি?

বড় স্ক্রিপ্টগুলি প্রায়ই দীর্ঘ টাস্কগুলির একটি প্রধান কারণ তাই সেগুলিকে বিভক্ত করার কথা বিবেচনা করুন৷ এছাড়াও তৃতীয় পক্ষের স্ক্রিপ্টগুলিতে নজর রাখুন; তাদের লং টাস্ক প্রাথমিক বিষয়বস্তুকে ইন্টারেক্টিভ হতে বিলম্ব করতে পারে।

আপনার সমস্ত কাজকে ছোট ছোট খণ্ডে বিভক্ত করুন (যেগুলি <50 মিসেসে চলে) এবং এই অংশগুলিকে সঠিক স্থানে এবং সময়ে চালান; সঠিক জায়গা এমনকি মূল থ্রেড বন্ধ হতে পারে, একটি কর্মীর মধ্যে. ফিল ওয়ালটনের Idle Until Urgent এই বিষয়ে ভালো পড়া। দীর্ঘ কাজগুলি পরিচালনা এবং ভাঙার জন্য সাধারণ কৌশলগুলির জন্য অপ্টিমাইজ লং টাস্ক নিবন্ধটিও দেখুন।

আপনার পেজ প্রতিক্রিয়াশীল রাখুন. আপনার ব্যবহারকারীরা যখন আপনার সাইটে ভিজিট করেন তখন তাদের একটি আনন্দদায়ক অভিজ্ঞতা নিশ্চিত করার জন্য দীর্ঘ কাজগুলিকে মিনিমাইজ করা একটি দুর্দান্ত উপায়। লং টাস্ক সম্পর্কে আরও জানতে, ব্যবহারকারী-কেন্দ্রিক পারফরম্যান্স মেট্রিক্স দেখুন।