কম্পোজিটিং হল যেখানে পৃষ্ঠার আঁকা অংশগুলিকে পর্দায় প্রদর্শনের জন্য একত্রিত করা হয়।
কম্পোজিটিং হল যেখানে পৃষ্ঠার আঁকা অংশগুলিকে পর্দায় প্রদর্শনের জন্য একত্রিত করা হয়।
এই ক্ষেত্রে দুটি মূল কারণ রয়েছে যা পৃষ্ঠার কার্যকারিতাকে প্রভাবিত করে: কম্পোজিটর স্তরগুলির সংখ্যা যা পরিচালনা করতে হবে এবং অ্যানিমেশনগুলির জন্য আপনি যে বৈশিষ্ট্যগুলি ব্যবহার করেন৷
সারাংশ
- আপনার অ্যানিমেশনগুলির জন্য রূপান্তর এবং অস্বচ্ছতা পরিবর্তনের সাথে থাকুন।
-
will-changeবাtranslateZদিয়ে চলমান উপাদানের প্রচার করুন। - প্রচারের নিয়মের অতিরিক্ত ব্যবহার এড়িয়ে চলুন; স্তরগুলির মেমরি এবং পরিচালনার প্রয়োজন।
অ্যানিমেশনের জন্য রূপান্তর এবং অস্বচ্ছতা পরিবর্তন ব্যবহার করুন
পিক্সেল পাইপলাইনের সেরা-পারফর্মিং সংস্করণটি লেআউট এবং পেইন্ট উভয়ই এড়িয়ে যায় এবং শুধুমাত্র সংমিশ্রণ পরিবর্তনের প্রয়োজন হয়:
এটি অর্জন করার জন্য আপনাকে পরিবর্তনশীল বৈশিষ্ট্যগুলিতে আটকে থাকতে হবে যা একা কম্পোজিটর দ্বারা পরিচালনা করা যেতে পারে। আজ শুধুমাত্র দুটি বৈশিষ্ট্য রয়েছে যার জন্য এটি সত্য - transform s এবং opacity :
transform s এবং opacity ব্যবহারের জন্য সতর্কতা হল যে উপাদানটির উপর আপনি এই বৈশিষ্ট্যগুলি পরিবর্তন করবেন তার নিজস্ব কম্পোজিটর স্তরে থাকা উচিত। একটি স্তর তৈরি করার জন্য আপনাকে উপাদানটি প্রচার করতে হবে, যা আমরা পরবর্তী কভার করব।
আপনি অ্যানিমেট করার পরিকল্পনা করছেন এমন উপাদানগুলিকে প্রচার করুন
যেমনটি আমরা " পেইন্টের জটিলতা সরলীকরণ করুন এবং রঙের ক্ষেত্রগুলি হ্রাস করুন " বিভাগে উল্লেখ করেছি, আপনি যে উপাদানগুলিকে অ্যানিমেট করার পরিকল্পনা করছেন (কারণে, এটি অতিরিক্ত করবেন না!) তাদের নিজস্ব স্তরে প্রচার করা উচিত:
.moving-element {
will-change: transform;
}
অথবা, পুরানো ব্রাউজারগুলির জন্য, বা যেগুলি সমর্থন করে না তাদের জন্য পরিবর্তন হবে:
.moving-element {
transform: translateZ(0);
}
স্তরগুলি পরিচালনা করুন এবং স্তর বিস্ফোরণ এড়ান
এটি সম্ভবত লোভনীয়, তাহলে, জেনে রাখা যে স্তরগুলি প্রায়শই কর্মক্ষমতাকে সাহায্য করে, আপনার পৃষ্ঠার সমস্ত উপাদানকে নিম্নলিখিতগুলির মতো কিছু দিয়ে প্রচার করতে:
* {
will-change: transform;
transform: translateZ(0);
}
যা আপনি পৃষ্ঠার প্রতিটি উপাদানকে প্রচার করতে চান তা বলার একটি বৃত্তাকার উপায়। এখানে সমস্যা হল আপনার তৈরি করা প্রতিটি স্তরের জন্য মেমরি এবং পরিচালনার প্রয়োজন, এবং এটি বিনামূল্যে নয়। প্রকৃতপক্ষে, সীমিত মেমরি সহ ডিভাইসগুলিতে কর্মক্ষমতার উপর প্রভাব একটি স্তর তৈরির যে কোনও সুবিধাকে ছাড়িয়ে যেতে পারে। প্রতিটি স্তরের টেক্সচারগুলিকে GPU-তে আপলোড করতে হবে, তাই CPU এবং GPU-এর মধ্যে ব্যান্ডউইথের ক্ষেত্রে আরও সীমাবদ্ধতা রয়েছে এবং GPU-তে টেক্সচারের জন্য মেমরি উপলব্ধ।
আপনার অ্যাপের স্তরগুলি বুঝতে Chrome DevTools ব্যবহার করুন৷
আপনার অ্যাপ্লিকেশনের স্তরগুলি বোঝার জন্য এবং একটি উপাদানের একটি স্তর কেন রয়েছে তা বোঝার জন্য আপনাকে অবশ্যই Chrome DevTools এর টাইমলাইনে পেইন্ট প্রোফাইলার সক্ষম করতে হবে:
এটি চালু করার সাথে আপনার একটি রেকর্ডিং নেওয়া উচিত। রেকর্ডিং শেষ হলে আপনি পৃথক ফ্রেমে ক্লিক করতে পারবেন, যা ফ্রেম-প্রতি-সেকেন্ড বার এবং বিশদ বিবরণগুলির মধ্যে পাওয়া যায়:
এটিতে ক্লিক করলে আপনাকে বিশদ বিবরণে একটি নতুন বিকল্প প্রদান করবে: একটি স্তর ট্যাব।
এই বিকল্পটি একটি নতুন ভিউ নিয়ে আসবে যা আপনাকে সেই ফ্রেমের সময় সমস্ত স্তরগুলিকে প্যান, স্ক্যান এবং জুম ইন করতে দেয়, সেই সাথে প্রতিটি স্তর তৈরি করা হয়েছিল।
এই ভিউ ব্যবহার করে আপনি আপনার কতগুলি স্তর আছে তা ট্র্যাক করতে পারেন। আপনি যদি স্ক্রলিং বা ট্রানজিশনের মতো পারফরম্যান্স-সমালোচনামূলক অ্যাকশনের সময় কম্পোজিটিংয়ে অনেক সময় ব্যয় করেন (আপনার লক্ষ্য করা উচিত প্রায় 4-5ms ), তাহলে আপনি এখানে তথ্য ব্যবহার করতে পারেন আপনার কতগুলি স্তর রয়েছে, কেন সেগুলি তৈরি করা হয়েছিল এবং সেখান থেকে আপনার অ্যাপে স্তর গণনা পরিচালনা করুন।