লো-এন্ড ফোনে বা যখন প্রধান থ্রেডে পারফরম্যান্স-ভারী কাজ চলছে তখন নন-কম্পোজিড অ্যানিমেশনগুলি জ্যাঙ্কি (মসৃণ নয়) প্রদর্শিত হতে পারে। Janky অ্যানিমেশন আপনার পৃষ্ঠার Cumulative Layout Shift (CLS) বাড়াতে পারে। CLS হ্রাস করা আপনার বাতিঘর কর্মক্ষমতা স্কোর উন্নত করবে।
পটভূমি
HTML, CSS, এবং JavaScript কে পিক্সেলে রূপান্তর করার জন্য ব্রাউজারের অ্যালগরিদমগুলি সমষ্টিগতভাবে রেন্ডারিং পাইপলাইন হিসাবে পরিচিত।
রেন্ডারিং পাইপলাইনের প্রতিটি ধাপের অর্থ কী তা আপনি বুঝতে না পারলে ঠিক আছে। এখনই বোঝার মূল বিষয় হল রেন্ডারিং পাইপলাইনের প্রতিটি ধাপে ব্রাউজার নতুন ডেটা তৈরি করতে আগের অপারেশনের ফলাফল ব্যবহার করে। উদাহরণস্বরূপ, যদি আপনার কোড এমন কিছু করে যা লেআউটকে ট্রিগার করে, পেইন্ট এবং কম্পোজিট ধাপগুলি আবার চালানো দরকার। একটি নন-কম্পোজিটেড অ্যানিমেশন হল এমন কোনো অ্যানিমেশন যা রেন্ডারিং পাইপলাইনের (স্টাইল, লেআউট বা পেইন্ট) এর আগের ধাপগুলির একটিকে ট্রিগার করে। অ-কম্পোজিড অ্যানিমেশনগুলি আরও খারাপ কাজ করে কারণ তারা ব্রাউজারকে আরও কাজ করতে বাধ্য করে৷
রেন্ডারিং পাইপলাইন সম্পর্কে গভীরভাবে জানতে নিম্নলিখিত সংস্থানগুলি দেখুন:
- আধুনিক ওয়েব ব্রাউজারগুলির ভিতরে দেখুন (পার্ট 3)
- পেইন্ট জটিলতা সরলীকরণ এবং পেইন্ট এলাকা হ্রাস
- কম্পোজিটর-শুধুমাত্র বৈশিষ্ট্যে লেগে থাকুন এবং স্তর গণনা পরিচালনা করুন
কিভাবে Lighthouse অ-কম্পোজিট অ্যানিমেশন সনাক্ত করে
যখন একটি অ্যানিমেশন কম্পোজ করা যায় না, তখন ক্রোম DevTools ট্রেসে ব্যর্থতার কারণগুলি রিপোর্ট করে, যা Lighthouse পড়ে৷ লাইটহাউস DOM নোডগুলি তালিকাভুক্ত করে যার মধ্যে অ্যানিমেশন রয়েছে যা প্রতিটি অ্যানিমেশনের ব্যর্থতার কারণ(গুলি) সহ কম্পোজ করা হয়নি৷
কীভাবে অ্যানিমেশনগুলি সংমিশ্রিত হয় তা নিশ্চিত করবেন
কম্পোজিটর-শুধুমাত্র বৈশিষ্ট্যগুলিতে আটকে থাকুন এবং স্তর গণনা এবং উচ্চ-পারফরম্যান্স অ্যানিমেশনগুলি পরিচালনা করুন।