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