আধুনিক ব্রাউজারগুলি সস্তায় দুটি CSS বৈশিষ্ট্য অ্যানিমেট করতে পারে: transform এবং opacity । আপনি যদি অন্য কিছু অ্যানিমেট করেন, সম্ভাবনা আপনি একটি সিল্কি মসৃণ 60 ফ্রেম প্রতি সেকেন্ডে (FPS) আঘাত করতে যাচ্ছেন না। এই পোস্টটি ব্যাখ্যা করে যে কেন এমন হয়।
অ্যানিমেশন কর্মক্ষমতা এবং ফ্রেম হার
এটা ব্যাপকভাবে স্বীকৃত যে ওয়েবে যেকোনো কিছু অ্যানিমেট করার সময় 60 FPS এর একটি ফ্রেম রেট লক্ষ্য করা হয়। এই ফ্রেম রেট নিশ্চিত করবে যে আপনার অ্যানিমেশনগুলি মসৃণ দেখাচ্ছে। ওয়েবে একটি ফ্রেম হল সেই সময় যা স্ক্রীন আপডেট এবং পুনরায় রং করার জন্য প্রয়োজনীয় সমস্ত কাজ করতে লাগে। যদি প্রতিটি ফ্রেম 16.7ms (1000ms / 60 ≈ 16.7) এর মধ্যে সম্পূর্ণ না হয়, তাহলে ব্যবহারকারীরা বিলম্ব বুঝতে পারবেন।
রেন্ডারিং পাইপলাইন
একটি ওয়েবপেজে কিছু প্রদর্শন করতে ব্রাউজারকে নিম্নলিখিত ক্রমিক পদক্ষেপগুলি অতিক্রম করতে হবে:
- শৈলী : উপাদানগুলিতে প্রযোজ্য শৈলীগুলি গণনা করুন।
- লেআউট : প্রতিটি উপাদানের জন্য জ্যামিতি এবং অবস্থান তৈরি করুন।
- পেইন্ট : প্রতিটি উপাদানের জন্য পিক্সেল পূরণ করুন।
- কম্পোজিট : উপাদানগুলিকে স্তরগুলিতে আলাদা করুন এবং স্তরগুলিকে পর্দায় আঁকুন।
এই চারটি ধাপ ব্রাউজারের রেন্ডারিং পাইপলাইন হিসাবে পরিচিত।
আপনি যখন একটি পৃষ্ঠায় কিছু অ্যানিমেট করেন যা ইতিমধ্যে লোড হয়েছে এই পদক্ষেপগুলি আবার ঘটতে হবে। এই প্রক্রিয়াটি সেই ধাপ থেকে শুরু হয় যা অ্যানিমেশনটি ঘটতে দেওয়ার জন্য পরিবর্তন করতে হবে।
পূর্বে উল্লিখিত হিসাবে, এই পদক্ষেপগুলি ক্রমিক । উদাহরণস্বরূপ, যদি আপনি এমন কিছু অ্যানিমেট করেন যা লেআউট পরিবর্তন করে, পেইন্ট এবং যৌগিক পদক্ষেপগুলিও আবার চালাতে হবে। লেআউট পরিবর্তন করে এমন কিছু অ্যানিমেট করা তাই এমন কিছু অ্যানিমেট করার চেয়ে বেশি ব্যয়বহুল যা শুধুমাত্র কম্পোজিটিং পরিবর্তন করে।
অ্যানিমেটিং বিন্যাস বৈশিষ্ট্য
বিন্যাস পরিবর্তনগুলি পরিবর্তন দ্বারা প্রভাবিত সমস্ত উপাদানের জ্যামিতি (অবস্থান এবং আকার) গণনা জড়িত। আপনি যদি একটি উপাদান পরিবর্তন করেন, অন্য উপাদানগুলির জ্যামিতি পুনরায় গণনা করার প্রয়োজন হতে পারে। উদাহরণস্বরূপ, আপনি যদি <html> উপাদানটির প্রস্থ পরিবর্তন করেন তবে এর যে কোনও শিশু প্রভাবিত হতে পারে। উপাদানগুলি যেভাবে উপচে পড়ে এবং একে অপরকে প্রভাবিত করে তার কারণে, গাছের আরও নীচের পরিবর্তনের ফলে কখনও কখনও লেআউট গণনাগুলি উপরের দিকে ফিরে যেতে পারে।
দৃশ্যমান উপাদানের গাছ যত বড় হবে, লেআউট গণনা করতে তত বেশি সময় লাগবে।
অ্যানিমেটিং পেইন্ট বৈশিষ্ট্য
পেইন্ট হল পর্দায় কোন ক্রমে উপাদান আঁকা উচিত তা নির্ধারণ করার প্রক্রিয়া। এটি প্রায়শই পাইপলাইনের সমস্ত কাজের মধ্যে সবচেয়ে দীর্ঘস্থায়ী হয়৷
আধুনিক ব্রাউজারে বেশিরভাগ পেইন্টিং সফ্টওয়্যার রাস্টারাইজারগুলিতে করা হয়। আপনার অ্যাপের উপাদানগুলিকে কীভাবে স্তরগুলিতে গোষ্ঠীভুক্ত করা হয়েছে তার উপর নির্ভর করে, পরিবর্তিত একটি ছাড়াও অন্যান্য উপাদানগুলিও আঁকার প্রয়োজন হতে পারে।
অ্যানিমেটিং যৌগিক বৈশিষ্ট্য
কম্পোজিটিং হল পৃষ্ঠাটিকে স্তরগুলিতে বিভক্ত করার প্রক্রিয়া, পৃষ্ঠাটি কীভাবে পিক্সেলে দেখা উচিত সে সম্পর্কে তথ্য রূপান্তর করা (রাস্টারাইজেশন) এবং একটি পৃষ্ঠা তৈরি করার জন্য স্তরগুলিকে একত্রিত করা (কম্পোজিটিং)।
এই কারণেই opacity বৈশিষ্ট্যটি এমন জিনিসগুলির তালিকায় অন্তর্ভুক্ত করা হয়েছে যা অ্যানিমেট করার জন্য সস্তা। যতক্ষণ না এই সম্পত্তিটি তার নিজস্ব স্তরে থাকে, কম্পোজিটিং ধাপের সময় এটিতে পরিবর্তনগুলি GPU দ্বারা পরিচালনা করা যেতে পারে। Chromium-ভিত্তিক ব্রাউজার এবং WebKit যেকোন উপাদানের জন্য একটি নতুন স্তর তৈরি করে যার একটি CSS রূপান্তর বা opacity উপর অ্যানিমেশন রয়েছে।
একটি স্তর কি?
যে জিনিসগুলিকে অ্যানিমেটেড করা হবে বা একটি নতুন স্তরে স্থানান্তরিত করা হবে, ব্রাউজারটিকে শুধুমাত্র সেই আইটেমগুলিকে পুনরায় রং করতে হবে এবং অন্য সবকিছু নয়। আপনি ফটোশপের একটি স্তরের ধারণার সাথে পরিচিত হতে পারেন যাতে একগুচ্ছ উপাদান রয়েছে যা একসাথে সরানো যেতে পারে। ব্রাউজার রেন্ডারিং স্তরগুলি সেই ধারণার অনুরূপ।
যদিও ব্রাউজারটি একটি নতুন স্তরে কোন উপাদানগুলি থাকা উচিত সে সম্পর্কে সিদ্ধান্ত নেওয়ার জন্য একটি ভাল কাজ করে, যদি এটি একটি মিস করে তবে স্তর তৈরি করতে বাধ্য করার উপায় রয়েছে৷ আপনি কীভাবে উচ্চ-পারফরম্যান্স অ্যানিমেশন তৈরি করবেন তা সম্পর্কে জানতে পারেন। যাইহোক, নতুন স্তর তৈরি করা যত্ন সহকারে করা উচিত কারণ প্রতিটি স্তর মেমরি ব্যবহার করে। সীমিত মেমরি সহ ডিভাইসগুলিতে নতুন স্তর তৈরি করলে আপনি যেটি সমাধান করার চেষ্টা করছেন তার চেয়ে বেশি পারফরম্যান্স সমস্যার কারণ হতে পারে। এছাড়াও, প্রতিটি স্তরের টেক্সচারগুলিকে GPU-তে আপলোড করতে হবে। অতএব আপনি CPU এবং GPU-এর মধ্যে ব্যান্ডউইথের সীমাবদ্ধতাগুলিকে ভালভাবে আঘাত করতে পারেন।
CSS বনাম জাভাস্ক্রিপ্ট কর্মক্ষমতা
আপনি ভাবতে পারেন: অ্যানিমেশনের জন্য সিএসএস বা জাভাস্ক্রিপ্ট ব্যবহার করা কি পারফরম্যান্সের দৃষ্টিকোণ থেকে ভাল?
CSS-ভিত্তিক অ্যানিমেশন এবং ওয়েব অ্যানিমেশনগুলি (যে ব্রাউজারগুলিতে API সমর্থন করে), সাধারণত কম্পোজিটর থ্রেড নামে পরিচিত একটি থ্রেডে পরিচালনা করা হয়। এটি ব্রাউজারের প্রধান থ্রেড থেকে ভিন্ন, যেখানে স্টাইলিং, লেআউট, পেইন্টিং এবং জাভাস্ক্রিপ্ট চালানো হয়। এর মানে হল যে যদি ব্রাউজারটি মূল থ্রেডে কিছু ব্যয়বহুল কাজ চালায়, তবে এই অ্যানিমেশনগুলি বাধা ছাড়াই চলতে পারে।
এই নিবন্ধে ব্যাখ্যা করা হয়েছে, রূপান্তর এবং অস্বচ্ছতার অন্যান্য পরিবর্তনগুলি, অনেক ক্ষেত্রে, কম্পোজিটর থ্রেড দ্বারাও পরিচালনা করা যেতে পারে।
যদি কোনো অ্যানিমেশন পেইন্ট, লেআউট বা উভয়কেই ট্রিগার করে, তাহলে কাজ করার জন্য মূল থ্রেডের প্রয়োজন হবে। এটি সিএসএস এবং জাভাস্ক্রিপ্ট অ্যানিমেশন উভয়ের জন্যই সত্য, এবং লেআউট বা পেইন্টের ওভারহেড সম্ভবত সিএসএস বা জাভাস্ক্রিপ্ট এক্সিকিউশনের সাথে সম্পর্কিত যেকোন কাজকে বামন করবে, প্রশ্নটিকে বাদ দেবে।
,
আধুনিক ব্রাউজারগুলি সস্তায় দুটি CSS বৈশিষ্ট্য অ্যানিমেট করতে পারে: transform এবং opacity । আপনি যদি অন্য কিছু অ্যানিমেট করেন, সম্ভাবনা আপনি একটি সিল্কি মসৃণ 60 ফ্রেম প্রতি সেকেন্ডে (FPS) আঘাত করতে যাচ্ছেন না। এই পোস্টটি ব্যাখ্যা করে যে কেন এমন হয়।
অ্যানিমেশন কর্মক্ষমতা এবং ফ্রেম হার
এটা ব্যাপকভাবে স্বীকৃত যে ওয়েবে যেকোনো কিছু অ্যানিমেট করার সময় 60 FPS এর একটি ফ্রেম রেট লক্ষ্য করা হয়। এই ফ্রেম রেট নিশ্চিত করবে যে আপনার অ্যানিমেশনগুলি মসৃণ দেখাচ্ছে। ওয়েবে একটি ফ্রেম হল সেই সময় যা স্ক্রীন আপডেট এবং পুনরায় রং করার জন্য প্রয়োজনীয় সমস্ত কাজ করতে লাগে। যদি প্রতিটি ফ্রেম 16.7ms (1000ms / 60 ≈ 16.7) এর মধ্যে সম্পূর্ণ না হয়, তাহলে ব্যবহারকারীরা বিলম্ব বুঝতে পারবেন।
রেন্ডারিং পাইপলাইন
একটি ওয়েবপেজে কিছু প্রদর্শন করতে ব্রাউজারকে নিম্নলিখিত ক্রমিক পদক্ষেপগুলি অতিক্রম করতে হবে:
- শৈলী : উপাদানগুলিতে প্রযোজ্য শৈলীগুলি গণনা করুন।
- লেআউট : প্রতিটি উপাদানের জন্য জ্যামিতি এবং অবস্থান তৈরি করুন।
- পেইন্ট : প্রতিটি উপাদানের জন্য পিক্সেল পূরণ করুন।
- কম্পোজিট : উপাদানগুলিকে স্তরগুলিতে আলাদা করুন এবং স্তরগুলিকে পর্দায় আঁকুন।
এই চারটি ধাপ ব্রাউজারের রেন্ডারিং পাইপলাইন হিসাবে পরিচিত।
আপনি যখন একটি পৃষ্ঠায় কিছু অ্যানিমেট করেন যা ইতিমধ্যে লোড হয়েছে এই পদক্ষেপগুলি আবার ঘটতে হবে। এই প্রক্রিয়াটি সেই ধাপ থেকে শুরু হয় যা অ্যানিমেশনটি ঘটতে দেওয়ার জন্য পরিবর্তন করতে হবে।
পূর্বে উল্লিখিত হিসাবে, এই পদক্ষেপগুলি ক্রমিক । উদাহরণস্বরূপ, যদি আপনি এমন কিছু অ্যানিমেট করেন যা লেআউট পরিবর্তন করে, পেইন্ট এবং যৌগিক পদক্ষেপগুলিও আবার চালাতে হবে। লেআউট পরিবর্তন করে এমন কিছু অ্যানিমেট করা তাই এমন কিছু অ্যানিমেট করার চেয়ে বেশি ব্যয়বহুল যা শুধুমাত্র কম্পোজিটিং পরিবর্তন করে।
অ্যানিমেটিং বিন্যাস বৈশিষ্ট্য
বিন্যাস পরিবর্তনগুলি পরিবর্তন দ্বারা প্রভাবিত সমস্ত উপাদানের জ্যামিতি (অবস্থান এবং আকার) গণনা জড়িত। আপনি যদি একটি উপাদান পরিবর্তন করেন, অন্য উপাদানগুলির জ্যামিতি পুনরায় গণনা করার প্রয়োজন হতে পারে। উদাহরণস্বরূপ, আপনি যদি <html> উপাদানটির প্রস্থ পরিবর্তন করেন তবে এর যে কোনও শিশু প্রভাবিত হতে পারে। উপাদানগুলি যেভাবে উপচে পড়ে এবং একে অপরকে প্রভাবিত করে তার কারণে, গাছের আরও নীচের পরিবর্তনের ফলে কখনও কখনও লেআউট গণনাগুলি উপরের দিকে ফিরে যেতে পারে।
দৃশ্যমান উপাদানের গাছ যত বড় হবে, লেআউট গণনা করতে তত বেশি সময় লাগবে।
অ্যানিমেটিং পেইন্ট বৈশিষ্ট্য
পেইন্ট হল পর্দায় কোন ক্রমে উপাদান আঁকা উচিত তা নির্ধারণ করার প্রক্রিয়া। এটি প্রায়শই পাইপলাইনের সমস্ত কাজের মধ্যে সবচেয়ে দীর্ঘস্থায়ী হয়৷
আধুনিক ব্রাউজারে বেশিরভাগ পেইন্টিং সফ্টওয়্যার রাস্টারাইজারগুলিতে করা হয়। আপনার অ্যাপের উপাদানগুলিকে কীভাবে স্তরগুলিতে গোষ্ঠীভুক্ত করা হয়েছে তার উপর নির্ভর করে, পরিবর্তিত একটি ছাড়াও অন্যান্য উপাদানগুলিও আঁকার প্রয়োজন হতে পারে।
অ্যানিমেটিং যৌগিক বৈশিষ্ট্য
কম্পোজিটিং হল পৃষ্ঠাটিকে স্তরগুলিতে বিভক্ত করার প্রক্রিয়া, পৃষ্ঠাটি কীভাবে পিক্সেলে দেখা উচিত সে সম্পর্কে তথ্য রূপান্তর করা (রাস্টারাইজেশন) এবং একটি পৃষ্ঠা তৈরি করার জন্য স্তরগুলিকে একত্রিত করা (কম্পোজিটিং)।
এই কারণেই opacity বৈশিষ্ট্যটি এমন জিনিসগুলির তালিকায় অন্তর্ভুক্ত করা হয়েছে যা অ্যানিমেট করার জন্য সস্তা। যতক্ষণ না এই সম্পত্তিটি তার নিজস্ব স্তরে থাকে, কম্পোজিটিং ধাপের সময় এটিতে পরিবর্তনগুলি GPU দ্বারা পরিচালনা করা যেতে পারে। Chromium-ভিত্তিক ব্রাউজার এবং WebKit যেকোন উপাদানের জন্য একটি নতুন স্তর তৈরি করে যার একটি CSS রূপান্তর বা opacity উপর অ্যানিমেশন রয়েছে।
একটি স্তর কি?
যে জিনিসগুলিকে অ্যানিমেটেড করা হবে বা একটি নতুন স্তরে স্থানান্তরিত করা হবে, ব্রাউজারটিকে শুধুমাত্র সেই আইটেমগুলিকে পুনরায় রং করতে হবে এবং অন্য সবকিছু নয়। আপনি ফটোশপের একটি স্তরের ধারণার সাথে পরিচিত হতে পারেন যাতে একগুচ্ছ উপাদান রয়েছে যা একসাথে সরানো যেতে পারে। ব্রাউজার রেন্ডারিং স্তরগুলি সেই ধারণার অনুরূপ।
যদিও ব্রাউজারটি একটি নতুন স্তরে কোন উপাদানগুলি থাকা উচিত সে সম্পর্কে সিদ্ধান্ত নেওয়ার জন্য একটি ভাল কাজ করে, যদি এটি একটি মিস করে তবে স্তর তৈরি করতে বাধ্য করার উপায় রয়েছে৷ আপনি কীভাবে উচ্চ-পারফরম্যান্স অ্যানিমেশন তৈরি করবেন তা সম্পর্কে জানতে পারেন। যাইহোক, নতুন স্তর তৈরি করা যত্ন সহকারে করা উচিত কারণ প্রতিটি স্তর মেমরি ব্যবহার করে। সীমিত মেমরি সহ ডিভাইসগুলিতে নতুন স্তর তৈরি করলে আপনি যেটি সমাধান করার চেষ্টা করছেন তার চেয়ে বেশি পারফরম্যান্স সমস্যার কারণ হতে পারে। এছাড়াও, প্রতিটি স্তরের টেক্সচারগুলিকে GPU-তে আপলোড করতে হবে। অতএব আপনি CPU এবং GPU-এর মধ্যে ব্যান্ডউইথের সীমাবদ্ধতাগুলিকে ভালভাবে আঘাত করতে পারেন।
CSS বনাম জাভাস্ক্রিপ্ট কর্মক্ষমতা
আপনি ভাবতে পারেন: অ্যানিমেশনের জন্য সিএসএস বা জাভাস্ক্রিপ্ট ব্যবহার করা কি পারফরম্যান্সের দৃষ্টিকোণ থেকে ভাল?
CSS-ভিত্তিক অ্যানিমেশন এবং ওয়েব অ্যানিমেশনগুলি (যে ব্রাউজারগুলিতে API সমর্থন করে), সাধারণত কম্পোজিটর থ্রেড নামে পরিচিত একটি থ্রেডে পরিচালনা করা হয়। এটি ব্রাউজারের প্রধান থ্রেড থেকে ভিন্ন, যেখানে স্টাইলিং, লেআউট, পেইন্টিং এবং জাভাস্ক্রিপ্ট চালানো হয়। এর মানে হল যে যদি ব্রাউজারটি মূল থ্রেডে কিছু ব্যয়বহুল কাজ চালায়, তবে এই অ্যানিমেশনগুলি বাধা ছাড়াই চলতে পারে।
এই নিবন্ধে ব্যাখ্যা করা হয়েছে, রূপান্তর এবং অস্বচ্ছতার অন্যান্য পরিবর্তনগুলি, অনেক ক্ষেত্রে, কম্পোজিটর থ্রেড দ্বারাও পরিচালনা করা যেতে পারে।
যদি কোনো অ্যানিমেশন পেইন্ট, লেআউট বা উভয়কেই ট্রিগার করে, তাহলে কাজ করার জন্য মূল থ্রেডের প্রয়োজন হবে। এটি সিএসএস এবং জাভাস্ক্রিপ্ট অ্যানিমেশন উভয়ের জন্যই সত্য, এবং লেআউট বা পেইন্টের ওভারহেড সম্ভবত সিএসএস বা জাভাস্ক্রিপ্ট এক্সিকিউশনের সাথে সম্পর্কিত যেকোন কাজকে বামন করবে, প্রশ্নটিকে বাদ দেবে।