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