অ্যানিমেশন এবং কর্মক্ষমতা

অ্যানিমেশনগুলি অবশ্যই ভাল পারফর্ম করবে, অন্যথায় তারা ব্যবহারকারীর অভিজ্ঞতাকে নেতিবাচকভাবে প্রভাবিত করবে।

স্যাম থরোগুড

আপনি যখনই অ্যানিমেটিং করছেন তখন 60fps বজায় রাখুন, কারণ কম হলে তোতলামি বা স্টল দেখা যাবে যা আপনার ব্যবহারকারীদের কাছে লক্ষণীয় হবে এবং তাদের অভিজ্ঞতাকে নেতিবাচকভাবে প্রভাবিত করবে।

  • আপনার অ্যানিমেশনগুলি যাতে পারফরম্যান্সের সমস্যার কারণ না হয় সেদিকে খেয়াল রাখুন; নিশ্চিত করুন যে আপনি একটি প্রদত্ত CSS সম্পত্তি অ্যানিমেট করার প্রভাব জানেন।
  • অ্যানিমেটিং বৈশিষ্ট্য যা পৃষ্ঠার জ্যামিতি (লেআউট) পরিবর্তন করে বা পেইন্টিং সৃষ্টি করে তা বিশেষভাবে ব্যয়বহুল।
  • যেখানে আপনি পারেন, পরিবর্তন এবং অস্বচ্ছতা পরিবর্তন করতে থাকুন।
  • আপনি কি অ্যানিমেট করার পরিকল্পনা করছেন তা ব্রাউজার জানে তা নিশ্চিত করতে will-change ব্যবহার করুন।

অ্যানিমেটিং বৈশিষ্ট্য বিনামূল্যে নয়, এবং কিছু বৈশিষ্ট্য অন্যদের তুলনায় অ্যানিমেট করা সস্তা। উদাহরণস্বরূপ, একটি উপাদানের width এবং height অ্যানিমেট করলে এর জ্যামিতি পরিবর্তন হয় এবং পৃষ্ঠার অন্যান্য উপাদানগুলি সরানো বা আকার পরিবর্তন করতে পারে। এই প্রক্রিয়াটিকে লেআউট বলা হয় (বা ফায়ারফক্সের মতো গেকো-ভিত্তিক ব্রাউজারগুলিতে রিফ্লো ) এবং আপনার পৃষ্ঠায় অনেক উপাদান থাকলে এটি ব্যয়বহুল হতে পারে। যখনই লেআউটটি ট্রিগার করা হয়, পৃষ্ঠা বা এর অংশটি সাধারণত পেইন্ট করতে হবে, যা সাধারণত লেআউট অপারেশনের চেয়েও বেশি ব্যয়বহুল।

যেখানে আপনি পারেন, আপনার অ্যানিমেটিং বৈশিষ্ট্যগুলি এড়ানো উচিত যা লেআউট বা পেইন্টকে ট্রিগার করে। বেশিরভাগ আধুনিক ব্রাউজারগুলির জন্য, এর অর্থ হল অ্যানিমেশনগুলিকে opacity বা transform মধ্যে সীমাবদ্ধ করা, উভয়ই ব্রাউজার অত্যন্ত অপ্টিমাইজ করতে পারে; অ্যানিমেশন জাভাস্ক্রিপ্ট বা CSS দ্বারা পরিচালিত হয় কিনা তা কোন ব্যাপার না।

উচ্চ কার্যক্ষমতার অ্যানিমেশন তৈরি করার জন্য একটি সম্পূর্ণ নির্দেশিকা পড়ুন।

will-change সম্পত্তি ব্যবহার

ব্রাউজার সমর্থন

  • ক্রোম: 36।
  • প্রান্ত: 79।
  • ফায়ারফক্স: 36.
  • সাফারি: 9.1।

উৎস

ব্রাউজার জানে যে আপনি একটি উপাদানের সম্পত্তি পরিবর্তন করতে চান তা নিশ্চিত করতে will-change ব্যবহার করুন। আপনি যখন পরিবর্তন করবেন তখন এটি ব্রাউজারটিকে সবচেয়ে উপযুক্ত অপ্টিমাইজেশানগুলিকে সামনে রাখতে দেয়৷ তবে will-change অত্যধিক ব্যবহার করবেন না, কারণ এটি করার ফলে ব্রাউজার সম্পদ নষ্ট করতে পারে, যার ফলস্বরূপ আরও বেশি পারফরম্যান্স সমস্যা সৃষ্টি করে।

সাধারণ নিয়ম হল যে যদি অ্যানিমেশনটি পরবর্তী 200ms-এর মধ্যে ট্রিগার হতে পারে, হয় ব্যবহারকারীর মিথস্ক্রিয়া বা আপনার অ্যাপ্লিকেশনের অবস্থার কারণে, তাহলে অ্যানিমেটিং উপাদানগুলিতে will-change করা একটি ভাল ধারণা। বেশিরভাগ ক্ষেত্রে, তারপরে, আপনার অ্যাপের বর্তমান দৃশ্যের যেকোন উপাদান যা আপনি অ্যানিমেট করতে চান তার জন্য আপনি যে বৈশিষ্ট্যগুলি পরিবর্তন করতে চান তার জন্য will-change সক্ষম হওয়া উচিত। বাক্সের নমুনার ক্ষেত্রে আমরা পূর্ববর্তী গাইড জুড়ে ব্যবহার করে আসছি, রূপান্তর এবং অস্বচ্ছতার জন্য will-change যোগ করা এইরকম দেখায়:

.box {
  will-change: transform, opacity;
}

এখন যে ব্রাউজারগুলি এটিকে সমর্থন করে, বর্তমানে বেশিরভাগ আধুনিক ব্রাউজার , সেই বৈশিষ্ট্যগুলি পরিবর্তন বা অ্যানিমেটিং সমর্থন করার জন্য হুডের নীচে উপযুক্ত অপ্টিমাইজেশন করবে৷

CSS বনাম জাভাস্ক্রিপ্ট কর্মক্ষমতা

ওয়েবে অনেক পৃষ্ঠা এবং মন্তব্যের থ্রেড রয়েছে যা পারফরম্যান্সের দৃষ্টিকোণ থেকে CSS এবং JavaScript অ্যানিমেশনের আপেক্ষিক যোগ্যতা নিয়ে আলোচনা করে। এখানে মনে রাখতে কয়েকটি পয়েন্ট রয়েছে:

  • CSS-ভিত্তিক অ্যানিমেশন, এবং ওয়েব অ্যানিমেশনগুলি যেখানে স্থানীয়ভাবে সমর্থিত, সাধারণত "কম্পোজিটর থ্রেড" নামে পরিচিত একটি থ্রেডে পরিচালনা করা হয়। এটি ব্রাউজারের "প্রধান থ্রেড" থেকে ভিন্ন, যেখানে স্টাইলিং, লেআউট, পেইন্টিং এবং জাভাস্ক্রিপ্ট চালানো হয়। এর মানে হল যে যদি ব্রাউজারটি মূল থ্রেডে কিছু ব্যয়বহুল কাজ চালায়, তবে এই অ্যানিমেশনগুলি বাধা ছাড়াই চলতে পারে।

  • রূপান্তর এবং অস্বচ্ছতার অন্যান্য পরিবর্তনগুলি, অনেক ক্ষেত্রে, কম্পোজিটর থ্রেড দ্বারাও পরিচালনা করা যেতে পারে।

  • যদি কোনো অ্যানিমেশন পেইন্ট, লেআউট বা উভয়ই ট্রিগার করে, তাহলে কাজ করার জন্য "প্রধান থ্রেড" প্রয়োজন হবে। এটি CSS- এবং JavaScript-ভিত্তিক অ্যানিমেশন উভয়ের ক্ষেত্রেই সত্য, এবং লেআউট বা পেইন্টের ওভারহেড সম্ভবত CSS বা JavaScript এক্সিকিউশনের সাথে সম্পর্কিত যেকোন কাজকে বামন করে, প্রশ্নটিকে বাদ দিয়ে দেয়।