জাভাস্ক্রিপ্ট প্রায়ই ভিজ্যুয়াল পরিবর্তনের জন্য একটি ট্রিগার। কখনও কখনও এটি স্টাইল ম্যানিপুলেশনের মাধ্যমে সরাসরি সেই পরিবর্তনগুলি করে, এবং কখনও কখনও গণনার মাধ্যমে যা ভিজ্যুয়াল পরিবর্তনগুলি ঘটায়, যেমন ডেটা অনুসন্ধান বা বাছাই করা। খারাপ সময় বা দীর্ঘ-চলমান জাভাস্ক্রিপ্ট পারফরম্যান্স সমস্যার একটি সাধারণ কারণ হতে পারে এবং আপনি যেখানে পারেন তার প্রভাব কমিয়ে আনার দিকে নজর দেওয়া উচিত।
শৈলী গণনা
উপাদানগুলি যোগ করে এবং অপসারণ করে, বৈশিষ্ট্যগুলি, ক্লাসগুলি পরিবর্তন করে বা অ্যানিমেশনগুলি চালানোর মাধ্যমে DOM পরিবর্তন করার ফলে ব্রাউজারকে উপাদান শৈলী এবং অনেক ক্ষেত্রে, অংশ বা সমস্ত পৃষ্ঠার বিন্যাস পুনরায় গণনা করতে হয়। এই প্রক্রিয়াটিকে গণিত শৈলী গণনা বলা হয়।
ব্রাউজার কোন প্রদত্ত উপাদানের জন্য কোন শ্রেণী, ছদ্ম-নির্বাচক এবং আইডি প্রযোজ্য তা নির্ধারণ করতে মিলিত নির্বাচকদের একটি সেট তৈরি করে শৈলী গণনা করা শুরু করে। তারপর, এটি ম্যাচিং নির্বাচকদের কাছ থেকে শৈলীর নিয়মগুলি প্রক্রিয়া করে এবং উপাদানটির চূড়ান্ত শৈলীগুলি কী তা নির্ধারণ করে।
শৈলী পুনঃগণনা সময় এবং মিথস্ক্রিয়া বিলম্বিত
ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (আইএনপি) হল একটি ব্যবহারকারী-কেন্দ্রিক রানটাইম পারফরম্যান্স মেট্রিক যা ব্যবহারকারীর ইনপুটের প্রতি একটি পৃষ্ঠার সামগ্রিক প্রতিক্রিয়ার মূল্যায়ন করে। এটি ইন্টারঅ্যাকশন লেটেন্সি পরিমাপ করে যখন ব্যবহারকারী পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করে তখন পর্যন্ত ব্রাউজার পরবর্তী ফ্রেমটি পেইন্ট করে ব্যবহারকারী ইন্টারফেসের সাথে সম্পর্কিত ভিজ্যুয়াল আপডেটগুলি দেখায়।
একটি ইন্টারঅ্যাকশনের একটি উল্লেখযোগ্য উপাদান হল পরবর্তী ফ্রেমটি আঁকতে যে সময় লাগে। পরবর্তী ফ্রেমটি উপস্থাপন করার জন্য করা রেন্ডারিং কাজটি লেআউট, পেইন্ট এবং কম্পোজিটিং কাজের ঠিক আগে ঘটে যাওয়া পৃষ্ঠা শৈলীগুলির গণনা সহ অনেক অংশ নিয়ে গঠিত। এই পৃষ্ঠাটি শৈলী গণনা খরচের উপর ফোকাস করে, তবে মিথস্ক্রিয়া সম্পর্কিত রেন্ডারিং পর্বের যেকোন অংশ হ্রাস করাও শৈলী গণনা সহ এর মোট বিলম্বিতা হ্রাস করে।
আপনার নির্বাচকদের জটিলতা হ্রাস করুন
আপনার নির্বাচক নাম সরলীকরণ আপনার পৃষ্ঠার শৈলী গণনা দ্রুত সাহায্য করতে পারে. সহজতম নির্বাচকরা CSS-এ শুধুমাত্র একটি শ্রেণির নাম দিয়ে একটি উপাদান উল্লেখ করে:
.title {
/* styles */
}
কিন্তু, যেকোন প্রজেক্ট বাড়ার সাথে সাথে এর জন্য আরও জটিল সিএসএসের প্রয়োজন হয় এবং আপনি এইরকম দেখতে নির্বাচকদের সাথে শেষ করতে পারেন:
.box:nth-last-child(-n+1) .title {
/* styles */
}
এই শৈলীগুলি পৃষ্ঠায় কীভাবে প্রযোজ্য তা নির্ধারণ করতে, ব্রাউজারকে কার্যকরভাবে জিজ্ঞাসা করতে হবে "এটি কি একটি শ্রেণির title সহ একটি উপাদান যার অভিভাবক হল একটি শ্রেণির box সহ বিয়োগ-নম-প্লাস-1 চাইল্ড উপাদান?" ব্যবহৃত নির্বাচক এবং সেইসাথে প্রশ্নে থাকা ব্রাউজারের উপর নির্ভর করে এটি বের করতে অনেক সময় লাগতে পারে। এটি সহজ করার জন্য, আপনি নির্বাচককে শুধুমাত্র একটি শ্রেণীর নাম হিসাবে পরিবর্তন করতে পারেন:
.final-box-title {
/* styles */
}
এই প্রতিস্থাপন শ্রেণীর নামগুলি বিশ্রী মনে হতে পারে, তবে তারা ব্রাউজারের কাজটিকে অনেক সহজ করে তোলে। পূর্ববর্তী সংস্করণে, উদাহরণস্বরূপ, ব্রাউজারকে একটি উপাদানটি তার প্রকারের শেষটি জানার জন্য, এটির পরে আসা কোন উপাদানটি nth-last-child হতে পারে কিনা তা নির্ধারণ করতে প্রথমে এটিকে অন্যান্য সমস্ত উপাদান সম্পর্কে সবকিছু জানতে হবে। . এটি একটি নির্বাচককে একটি উপাদানের সাথে মেলানোর চেয়ে গণনাগতভাবে অনেক বেশি ব্যয়বহুল হতে পারে কারণ এটির ক্লাস মেলে।
স্টাইল করা উপাদানের সংখ্যা হ্রাস করুন
আরেকটি পারফরম্যান্স বিবেচনা, এবং প্রায়শই নির্বাচক জটিলতার চেয়ে আরও গুরুত্বপূর্ণ, একটি উপাদান পরিবর্তিত হলে কাজের পরিমাণ যা ঘটতে হবে।
সাধারণ পরিভাষায়, গণনা করা উপাদান শৈলী গণনা করার সবচেয়ে খারাপ ক্ষেত্রে খরচ হল নির্বাচক গণনা দ্বারা গুণিত উপাদানের সংখ্যা, কারণ ব্রাউজারকে প্রতিটি উপাদানের সাথে মেলে কিনা তা দেখতে প্রতিটি শৈলীর বিপরীতে অন্তত একবার পরীক্ষা করতে হবে।
শৈলী গণনা পুরো পৃষ্ঠাটিকে অবৈধ করার পরিবর্তে সরাসরি কয়েকটি উপাদানকে লক্ষ্য করতে পারে। আধুনিক ব্রাউজারগুলিতে, এটি একটি সমস্যা কম হওয়ার প্রবণতা থাকে কারণ ব্রাউজারকে সর্বদা পরিবর্তনের প্রভাব ফেলতে পারে এমন সমস্ত উপাদান পরীক্ষা করার প্রয়োজন হয় না। অন্যদিকে, পুরানো ব্রাউজারগুলি সবসময় এই ধরনের কাজের জন্য অপ্টিমাইজ করা হয় না। যেখানে আপনি পারেন, আপনার অবৈধ উপাদানের সংখ্যা হ্রাস করা উচিত।
আপনার শৈলী পুনর্গণনা খরচ পরিমাপ
স্টাইল পুনঃগণনার খরচ পরিমাপ করার একটি উপায় হল Chrome DevTools-এ কর্মক্ষমতা প্যানেল ব্যবহার করা। শুরু করতে নিম্নলিখিতগুলি করুন:
- DevTools খুলুন।
- পারফরম্যান্স ট্যাবে নেভিগেট করুন।
- রেকর্ড ক্লিক করুন.
- পৃষ্ঠার সাথে যোগাযোগ করুন।
আপনি রেকর্ডিং বন্ধ করলে, আপনি নিম্নলিখিত চিত্রের মতো কিছু দেখতে পাবেন:
উপরের স্ট্রিপটি একটি ক্ষুদ্র শিখা চার্ট যা প্রতি সেকেন্ডে ফ্রেমগুলিও প্লট করে। ক্রিয়াকলাপটি স্ট্রিপের নীচের দিকে, ব্রাউজার দ্বারা দ্রুত ফ্রেমগুলি আঁকা হচ্ছে। আপনি যদি দেখেন যে শিখা চার্টটি উপরের দিকে লাল দণ্ড সহ সমতল করা হয়েছে, তাহলে আপনার কাছে এমন কাজ রয়েছে যা দীর্ঘ-চলমান ফ্রেমের কারণ হচ্ছে।
স্ক্রল করার মতো মিথস্ক্রিয়া চলাকালীন দীর্ঘ-চলমান ফ্রেমগুলি আরও ঘনিষ্ঠভাবে দেখার মূল্যবান। আপনি যদি একটি বড় বেগুনি ব্লক দেখতে পান, তাহলে কার্যকলাপে জুম করুন এবং সম্ভাব্য ব্যয়বহুল শৈলী পুনঃগণনা কাজের বিষয়ে আরও তথ্য পেতে রিক্যালকুলেট স্টাইল লেবেলযুক্ত যেকোনো কাজ নির্বাচন করুন।
ইভেন্টে ক্লিক করলে তার কল স্ট্যাক দেখায়। যদি রেন্ডারিং কাজটি ব্যবহারকারীর মিথস্ক্রিয়া দ্বারা সৃষ্ট হয়, তবে এটি জাভাস্ক্রিপ্টকে কল করে যা শৈলী পরিবর্তনকে ট্রিগার করেছে। এটি পরিবর্তনটি প্রভাবিত করে এমন উপাদানগুলির সংখ্যাও দেখায় — এই ক্ষেত্রে মাত্র 900 টিরও বেশি উপাদান — এবং শৈলী গণনা কতক্ষণ সময় নেয়৷ আপনি আপনার কোডে একটি সমাধান খোঁজার চেষ্টা শুরু করতে এই তথ্য ব্যবহার করতে পারেন।
ব্লক, এলিমেন্ট, মডিফায়ার ব্যবহার করুন
বিইএম (ব্লক, এলিমেন্ট, মডিফায়ার) মত কোডিং করার পদ্ধতি নির্বাচক মেলে কর্মক্ষমতা সুবিধার মধ্যে বেক। BEM সুপারিশ করে যে সবকিছুর একটি একক শ্রেণী থাকতে হবে, এবং যেখানে আপনার অনুক্রমের প্রয়োজন, সেই শ্রেণিবিন্যাসটিও শ্রেণির নামে বেক করা হয়:
.list {
/* Styles */
}
.list__list-item {
/* Styles */
}
আপনার যদি একটি মডিফায়ারের প্রয়োজন হয়, যেমন শেষ-শিশু উদাহরণে, আপনি এটির মতো যুক্ত করতে পারেন:
.list__list-item--last-child {
/* Styles */
}
BEM আপনার CSS সংগঠিত করার জন্য একটি ভাল সূচনা বিন্দু, উভয় কাঠামোর দৃষ্টিকোণ থেকে, এবং স্টাইল লুকআপ সরলীকরণের কারণে এটি প্রচার করে।
আপনি যদি BEM পছন্দ না করেন তবে আপনার CSS এর সাথে যোগাযোগ করার অন্যান্য উপায় আছে, তবে আপনি শুরু করার আগে তাদের কর্মক্ষমতা এবং তাদের কর্মক্ষমতা মূল্যায়ন করা উচিত।
সম্পদ
আনস্প্ল্যাশ থেকে হিরো ইমেজ, মার্কাস স্পিসকে ।