একটি লং টাস্ক হল জাভাস্ক্রিপ্ট কোড যা মূল থ্রেডকে বর্ধিত সময়ের জন্য একচেটিয়া রাখে, যার ফলে UI "ফ্রিজ" হয়ে যায়।
একটি পৃষ্ঠার পৃষ্ঠা লোড হওয়ার সময়, লং টাস্কগুলি মূল থ্রেডকে বেঁধে দিতে পারে এবং পৃষ্ঠাটিকে ব্যবহারকারীর ইনপুটের প্রতি প্রতিক্রিয়াহীন করে তুলতে পারে, এমনকি এটি প্রস্তুত দেখালেও৷ ক্লিক এবং ট্যাপগুলি প্রায়ই কাজ করে না কারণ ইভেন্ট শ্রোতা এবং ক্লিক হ্যান্ডলারের মতো ইন্টারেক্টিভ বৈশিষ্ট্যগুলি এখনও UI উপাদানগুলির সাথে সংযুক্ত করা হয়নি৷ এই কারণে, লং টাস্কগুলি আপনার ইন্টারঅ্যাকটিভের সময়কে ব্যাপকভাবে বাড়িয়ে দিতে পারে।
Chrome DevTools এখন লং টাস্কগুলিকে কল্পনা করতে পারে, যাতে অপ্টিমাইজ করা প্রয়োজন এমন কাজগুলি দেখতে সহজ করে৷
একটি দীর্ঘ টাস্ক হিসাবে গণনা কি?
CPU-ভারী লং টাস্কগুলি জটিল কাজের কারণে ঘটে যা 50 ms এর বেশি সময় নেয়। RAIL মডেল আপনাকে 100 ms এর মধ্যে দৃশ্যমান প্রতিক্রিয়া নিশ্চিত করতে এবং ক্রিয়া এবং প্রতিক্রিয়ার মধ্যে সংযোগ রক্ষা করতে 50 ms- এ ব্যবহারকারীর ইনপুট ইভেন্টগুলি প্রক্রিয়া করার পরামর্শ দেয়।
মূল পয়েন্ট: যদিও RAIL মডেলটি 100 ms এর মধ্যে ব্যবহারকারীর ইনপুটকে একটি ভিজ্যুয়াল প্রতিক্রিয়া প্রদানের পরামর্শ দেয়, তখন ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (INP) মেট্রিকের থ্রেশহোল্ডগুলি 200 ms পর্যন্ত আরও অর্জনযোগ্য প্রত্যাশা সেট করার অনুমতি দেয়, বিশেষ করে ধীর ডিভাইসগুলির জন্য।
আমার পৃষ্ঠায় কি দীর্ঘ টাস্ক আছে যা ইন্টারঅ্যাক্টিভিটি বিলম্বিত করতে পারে?
এখন পর্যন্ত, আপনাকে Chrome DevTools- এ 50ms দীর্ঘ স্ক্রিপ্টের "লম্বা হলুদ ব্লক" ম্যানুয়ালি খুঁজতে হবে অথবা কোন কাজগুলি ইন্টারঅ্যাক্টিভিটি বিলম্বিত করছে তা বের করতে লং টাস্ক API ব্যবহার করতে হবে।
আপনার পারফরম্যান্স অডিটিং ওয়ার্কফ্লোকে সহজ করতে, DevTools এখন লং টাস্কগুলিকে কল্পনা করে ৷ টাস্কে (ধূসর রঙে দেখানো হয়েছে) লাল পতাকা আছে যদি সেগুলি লং টাস্ক হয়।
নতুন ভিজ্যুয়ালাইজেশন টুল ব্যবহার করতে:
- একটি ওয়েব পৃষ্ঠা লোড করার পারফরম্যান্স প্যানেলে একটি ট্রেস রেকর্ড করুন৷
- মূল থ্রেড ভিউতে একটি লাল পতাকা দেখুন। আপনি দেখতে পাবেন যে কাজগুলি এখন ধূসর রঙে চিহ্নিত এবং টাস্ক লেবেল করা হয়েছে৷
- একটি ধূসর বারের উপরে আপনার পয়েন্টার ধরে রাখুন। আপনি টাস্কের সময়কাল এবং এটি একটি দীর্ঘ টাস্ক হিসাবে বিবেচিত কিনা তা দেখানো একটি ডায়ালগ দেখতে পাবেন।
আমার দীর্ঘ টাস্কের কারণ কি?
একটি দীর্ঘ টাস্কের কারণ আবিষ্কার করতে, ধূসর টাস্ক বার নির্বাচন করুন। নীচে ড্রয়ারে, নীচে-উপর এবং কার্যকলাপ দ্বারা গ্রুপ নির্বাচন করুন। এটি আপনাকে দেখতে দেয় যে কোন ক্রিয়াকলাপগুলি কাজটি সম্পূর্ণ করতে এত সময় নিয়ে সবচেয়ে বেশি অবদান রেখেছে (মোট)। নিম্নলিখিত উদাহরণে, বিলম্বের কারণটি DOM প্রশ্নের একটি ব্যয়বহুল সেটের মতো দেখায়৷
দীর্ঘ টাস্ক অপ্টিমাইজ করার সাধারণ উপায় কি কি?
বড় স্ক্রিপ্ট প্রায়ই দীর্ঘ টাস্ক একটি প্রধান কারণ. তাদের বিভক্ত করার কথা বিবেচনা করুন। এছাড়াও থার্ড-পার্টি স্ক্রিপ্টগুলির উপর নজর রাখুন, যাতে লং টাস্কগুলিও থাকতে পারে যা প্রাথমিক বিষয়বস্তুকে ইন্টারেক্টিভ হতে বিলম্ব করে।
আপনার সমস্ত কাজকে খণ্ডে ভাগ করুন যা <50 ms এ চলে এবং এই খণ্ডগুলিকে সঠিক স্থানে এবং সময়ে চালান। তাদের মধ্যে কিছু জন্য সঠিক জায়গা মূল থ্রেড বন্ধ হতে পারে, একটি সেবা কর্মীর মধ্যে. দীর্ঘ টাস্কগুলি ভাঙার বিষয়ে নির্দেশনার জন্য, অপ্টিমাইজ লং টাস্ক এবং ফিল ওয়ালটনের আইডল আনটিল আর্জেন্ট দেখুন।
আপনার পেজ প্রতিক্রিয়াশীল রাখুন. আপনার ব্যবহারকারীরা যখন আপনার সাইটে ভিজিট করেন তখন তাদের একটি আনন্দদায়ক অভিজ্ঞতা নিশ্চিত করার জন্য দীর্ঘ কাজগুলিকে মিনিমাইজ করা একটি দুর্দান্ত উপায়। লং টাস্ক সম্পর্কে আরও তথ্যের জন্য, ব্যবহারকারী-কেন্দ্রিক পারফরম্যান্স মেট্রিক্স পড়ুন।