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