শৈলী গণনার সুযোগ এবং জটিলতা হ্রাস করুন

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

শৈলী গণনা

উপাদানগুলি যোগ করে এবং অপসারণ করে, বৈশিষ্ট্যগুলি, ক্লাসগুলি পরিবর্তন করে বা অ্যানিমেশনগুলি চালানোর মাধ্যমে DOM পরিবর্তন করার ফলে ব্রাউজারকে উপাদান শৈলী এবং অনেক ক্ষেত্রে, অংশ বা সমস্ত পৃষ্ঠার বিন্যাস পুনরায় গণনা করতে হয়। এই প্রক্রিয়াটিকে স্টাইল গণনা বলা হয়।

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

মিথস্ক্রিয়া বিলম্বে শৈলী পুনঃগণনার ভূমিকা

ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (আইএনপি) হল একটি ব্যবহারকারী-কেন্দ্রিক রানটাইম পারফরম্যান্স মেট্রিক যা ব্যবহারকারীর ইনপুটের প্রতি একটি পৃষ্ঠার সামগ্রিক প্রতিক্রিয়ার মূল্যায়ন করে। এটি ইন্টারঅ্যাকশন লেটেন্সি পরিমাপ করে যখন ব্যবহারকারী পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করে তখন পর্যন্ত ব্রাউজার পরবর্তী ফ্রেমটি পেইন্ট করে ব্যবহারকারী ইন্টারফেসের সাথে সম্পর্কিত ভিজ্যুয়াল আপডেটগুলি দেখায়।

একটি ইন্টারঅ্যাকশনের একটি উল্লেখযোগ্য উপাদান হল পরবর্তী ফ্রেমটি আঁকতে যে সময় লাগে। পরবর্তী ফ্রেমটি উপস্থাপন করার জন্য করা রেন্ডারিং কাজটি লেআউট, পেইন্ট এবং কম্পোজিটিং কাজের ঠিক আগে ঘটে যাওয়া পৃষ্ঠা শৈলীগুলির গণনা সহ অনেক অংশ নিয়ে গঠিত। এই নির্দেশিকাটি শৈলী গণনা খরচের উপর ফোকাস করে, তবে মিথস্ক্রিয়াটির মোট রেন্ডারিং সময়কালের যেকোন অংশ হ্রাস করা তার মোট বিলম্বিতাও হ্রাস করে।

আপনার নির্বাচকদের জটিলতা হ্রাস করুন

সিএসএস নির্বাচকদের সরলীকরণ আপনার পৃষ্ঠার শৈলী গণনার গতি বাড়াতে সাহায্য করতে পারে। সহজতম নির্বাচকরা CSS-এ শুধুমাত্র একটি শ্রেণির নাম দিয়ে একটি উপাদান উল্লেখ করে:

.title {
  /* styles */
}

কিন্তু, যেকোন প্রজেক্ট বাড়ার সাথে সাথে এর জন্য আরও জটিল সিএসএসের প্রয়োজন হয় এবং আপনি এইরকম দেখতে নির্বাচকদের সাথে শেষ করতে পারেন:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

এই শৈলীগুলি কীভাবে পৃষ্ঠায় প্রযোজ্য তা নির্ধারণ করতে, ব্রাউজারকে কার্যকরভাবে জিজ্ঞাসা করতে হবে "এটি কি একটি শ্রেণির title সহ একটি box অভিভাবক সহ একটি উপাদান যা এর মূল উপাদানটির বিয়োগ-নম-প্লাস-1 সন্তান? এই আউটটি ব্রাউজারটির জন্য কিছু সময় নিতে পারে এটিকে সহজ করার জন্য, আপনি নির্বাচকটিকে আরও নির্দিষ্ট শ্রেণির নাম হিসাবে পরিবর্তন করতে পারেন:

.final-box-title {
  /* styles */
}

এই প্রতিস্থাপন শ্রেণীর নামগুলি বিশ্রী মনে হতে পারে, তবে তারা ব্রাউজারের কাজটিকে অনেক সহজ করে তোলে। পূর্ববর্তী সংস্করণে, উদাহরণস্বরূপ, ব্রাউজারকে একটি উপাদানটি তার প্রকারের শেষটি জানার জন্য, এটির পরে আসা কোন উপাদানটি nth-last-child হতে পারে কিনা তা নির্ধারণ করতে প্রথমে এটিকে অন্যান্য সমস্ত উপাদান সম্পর্কে সবকিছু জানতে হবে। . এটি একটি নির্বাচককে তার শ্রেণীর নামের একমাত্র ভিত্তিতে একটি উপাদানের সাথে মেলানোর চেয়ে অনেক বেশি গণনামূলকভাবে ব্যয়বহুল হতে পারে।

স্টাইল করা উপাদানের সংখ্যা হ্রাস করুন

আরেকটি পারফরম্যান্স বিবেচনা—এবং প্রায়শই নির্বাচক জটিলতার চেয়ে বেশি গুরুত্বপূর্ণ—একটি উপাদান পরিবর্তিত হলে কাজের পরিমাণ যা ঘটতে হবে।

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

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

আপনার শৈলী পুনর্গণনা খরচ পরিমাপ

আপনি ব্রাউজারে শৈলী পুনর্গণনার খরচ পরিমাপ করতে পারেন এমন কয়েকটি উপায় রয়েছে। তাদের প্রত্যেকটি আপনার ডেভেলপমেন্ট এনভায়রনমেন্টে ব্রাউজারে এটি পরিমাপ করতে চান কিনা বা আপনি আপনার ওয়েবসাইটের প্রকৃত ব্যবহারকারীদের জন্য এই প্রক্রিয়াটি কতক্ষণ সময় নেয় তা পরিমাপ করতে চান কিনা তার উপর নির্ভর করে।

Chrome DevTools-এ শৈলী পুনঃগণনার খরচ পরিমাপ করুন

স্টাইল পুনঃগণনার খরচ পরিমাপ করার একটি উপায় হল Chrome DevTools-এ কর্মক্ষমতা প্যানেল ব্যবহার করা। শুরু করতে নিম্নলিখিতগুলি করুন:

  1. DevTools খুলুন।
  2. পারফরম্যান্স ট্যাবে নেভিগেট করুন।
  3. নির্বাচক পরিসংখ্যান চেকবক্স চেক করুন (ঐচ্ছিক)।
  4. রেকর্ড ক্লিক করুন.
  5. পৃষ্ঠার সাথে যোগাযোগ করুন।

আপনি রেকর্ডিং বন্ধ করলে, আপনি নিম্নলিখিত চিত্রের মতো কিছু দেখতে পাবেন:

DevTools শৈলী গণনা দেখাচ্ছে।
একটি DevTools রিপোর্ট শৈলী গণনা দেখাচ্ছে।

উপরের স্ট্রিপটি একটি ক্ষুদ্র শিখা চার্ট যা প্রতি সেকেন্ডে ফ্রেমগুলিও প্লট করে। ক্রিয়াকলাপটি স্ট্রিপের নীচের দিকে, ব্রাউজার দ্বারা দ্রুত ফ্রেমগুলি আঁকা হচ্ছে। আপনি যদি দেখেন যে শিখা চার্টটি উপরের দিকে লাল দণ্ড সহ সমতল করা হয়েছে, তাহলে আপনার কাছে এমন কাজ রয়েছে যা দীর্ঘ-চলমান ফ্রেমের কারণ হচ্ছে।

জুম ইন     ক্রোম DevTools-এ একটি সমস্যা এলাকা জনসংখ্যার কার্যকলাপের সারাংশে     Chrome DevTools-এ কর্মক্ষমতা প্যানেল।
DevTools অ্যাক্টিভিটির সারাংশে দীর্ঘ-চলমান ফ্রেম।

স্ক্রল করার মতো মিথস্ক্রিয়া চলাকালীন দীর্ঘ-চলমান ফ্রেমগুলি আরও ঘনিষ্ঠভাবে দেখার মূল্যবান। আপনি যদি একটি বড় বেগুনি ব্লক দেখতে পান, তাহলে কার্যকলাপে জুম করুন এবং সম্ভাব্য ব্যয়বহুল শৈলী পুনঃগণনা কাজের বিষয়ে আরও তথ্য পেতে রিক্যালকুলেট স্টাইল লেবেলযুক্ত যেকোনো কাজ নির্বাচন করুন।

পেয়ে     অত্যাবশ্যক তথ্য সহ দীর্ঘ-চলমান শৈলী গণনার বিবরণ     শৈলী পুনর্গণনার কাজ দ্বারা প্রভাবিত উপাদানের পরিমাণ হিসাবে.
DevTools সারাংশে মাত্র 25 ms এর বেশি সময় ধরে একটি দীর্ঘ-চলমান শৈলী পুনঃগণনা।

ইভেন্টে ক্লিক করলে তার কল স্ট্যাক দেখায়। যদি রেন্ডারিং কাজটি ব্যবহারকারীর মিথস্ক্রিয়া দ্বারা সৃষ্ট হয়, তবে এটি জাভাস্ক্রিপ্টকে কল করে যা শৈলী পরিবর্তনকে ট্রিগার করেছে। এটি পরিবর্তনটি প্রভাবিত করে এমন উপাদানগুলির সংখ্যাও দেখায় — এই ক্ষেত্রে মাত্র 900 টিরও বেশি উপাদান — এবং শৈলী গণনা কতক্ষণ সময় নেয়৷ আপনি আপনার কোডে একটি সমাধান খোঁজার চেষ্টা শুরু করতে এই তথ্য ব্যবহার করতে পারেন।

আপনি যদি একটি ট্রেস করার আগে পারফরম্যান্স প্যানেল সেটিংসে নির্বাচক পরিসংখ্যান চেকবক্সটি চেক করেন, তাহলে ট্রেসের নীচের প্যানেলে একই নামের একটি অতিরিক্ত ট্যাব থাকবে৷

এটি হিসাবে CSS নির্বাচক পরিসংখ্যান টেবিল     Chrome DevTools-এর কর্মক্ষমতা প্যানেলে প্রদর্শিত হয়। এই টেবিল ধারণ করে     অতিবাহিত সময়, ম্যাচের মতো জিনিসগুলির জন্য শিরোনাম এবং সংশ্লিষ্ট ডেটা     প্রচেষ্টা, ম্যাচ গণনা, অ-ম্যাচিং নোডের শতাংশ, নির্বাচক এবং     স্টাইল শীট তারা পাওয়া যাবে.
Chrome DevTools-এর পারফরম্যান্স প্যানেলে দেখানো হিসাবে নির্বাচক পরিসংখ্যান টেবিল।

এই প্যানেল প্রতিটি নির্বাচকের আপেক্ষিক খরচের উপর দরকারী ডেটা প্রদান করে, যা আপনাকে ব্যয়বহুল CSS নির্বাচকদের সনাক্ত করতে দেয়।

আরও তথ্যের জন্য, CSS নির্বাচক পরিসংখ্যান ডকুমেন্টেশন দেখুন।

বাস্তব ব্যবহারকারীদের জন্য শৈলী পুনর্গণনা খরচ পরিমাপ

আপনি যদি জানতে আগ্রহী হন যে আপনার ওয়েবসাইটের প্রকৃত ব্যবহারকারীদের জন্য স্টাইল পুনঃগণনা ঘটতে কতক্ষণ সময় লাগে, লং অ্যানিমেশন ফ্রেম API আপনাকে এটি করার জন্য প্রয়োজনীয় সরঞ্জাম দেয়। এই API থেকে ডেটা web-vitals জাভাস্ক্রিপ্ট লাইব্রেরিতে যোগ করা হয়েছে, শৈলী পুনর্গণনার সময় সহ।

আপনি যদি সন্দেহ করেন যে কোনও ইন্টারঅ্যাকশনের উপস্থাপনা বিলম্ব একটি পৃষ্ঠার INP-তে প্রাথমিক অবদানকারী, তাহলে আপনি পৃষ্ঠায় শৈলীগুলি পুনঃগণনা করতে কতটা সময় ব্যয় করেছেন তা বের করতে চাইবেন। আরও তথ্যের জন্য, ক্ষেত্রটিতে শৈলী পুনঃগণনার সময় কীভাবে পরিমাপ করা যায় সে সম্পর্কে পড়ুন।

সম্পদ

,

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

শৈলী গণনা

উপাদানগুলি যোগ করে এবং অপসারণ করে, বৈশিষ্ট্যগুলি, ক্লাসগুলি পরিবর্তন করে বা অ্যানিমেশনগুলি চালানোর মাধ্যমে DOM পরিবর্তন করার ফলে ব্রাউজারকে উপাদান শৈলী এবং অনেক ক্ষেত্রে, অংশ বা সমস্ত পৃষ্ঠার বিন্যাস পুনরায় গণনা করতে হয়। এই প্রক্রিয়াটিকে স্টাইল গণনা বলা হয়।

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

মিথস্ক্রিয়া বিলম্বে শৈলী পুনঃগণনার ভূমিকা

ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (আইএনপি) হল একটি ব্যবহারকারী-কেন্দ্রিক রানটাইম পারফরম্যান্স মেট্রিক যা ব্যবহারকারীর ইনপুটের প্রতি একটি পৃষ্ঠার সামগ্রিক প্রতিক্রিয়ার মূল্যায়ন করে। এটি ইন্টারঅ্যাকশন লেটেন্সি পরিমাপ করে যখন ব্যবহারকারী পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করে তখন পর্যন্ত ব্রাউজার পরবর্তী ফ্রেমটি পেইন্ট করে ব্যবহারকারী ইন্টারফেসের সাথে সম্পর্কিত ভিজ্যুয়াল আপডেটগুলি দেখায়।

একটি ইন্টারঅ্যাকশনের একটি উল্লেখযোগ্য উপাদান হল পরবর্তী ফ্রেমটি আঁকতে যে সময় লাগে। পরবর্তী ফ্রেমটি উপস্থাপন করার জন্য করা রেন্ডারিং কাজটি লেআউট, পেইন্ট এবং কম্পোজিটিং কাজের ঠিক আগে ঘটে যাওয়া পৃষ্ঠা শৈলীগুলির গণনা সহ অনেক অংশ নিয়ে গঠিত। এই নির্দেশিকাটি শৈলী গণনা খরচের উপর ফোকাস করে, তবে মিথস্ক্রিয়াটির মোট রেন্ডারিং সময়কালের যেকোন অংশ হ্রাস করা তার মোট বিলম্বিতাও হ্রাস করে।

আপনার নির্বাচকদের জটিলতা হ্রাস করুন

সিএসএস নির্বাচকদের সরলীকরণ আপনার পৃষ্ঠার শৈলী গণনার গতি বাড়াতে সাহায্য করতে পারে। সহজতম নির্বাচকরা CSS-এ শুধুমাত্র একটি শ্রেণির নাম দিয়ে একটি উপাদান উল্লেখ করে:

.title {
  /* styles */
}

কিন্তু, যেকোন প্রজেক্ট বাড়ার সাথে সাথে এর জন্য আরও জটিল সিএসএসের প্রয়োজন হয় এবং আপনি এইরকম দেখতে নির্বাচকদের সাথে শেষ করতে পারেন:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

এই শৈলীগুলি কীভাবে পৃষ্ঠায় প্রযোজ্য তা নির্ধারণ করতে, ব্রাউজারকে কার্যকরভাবে জিজ্ঞাসা করতে হবে "এটি কি একটি শ্রেণির title সহ একটি box অভিভাবক সহ একটি উপাদান যা এর মূল উপাদানটির বিয়োগ-নম-প্লাস-1 সন্তান? এই আউটটি ব্রাউজারটির জন্য কিছু সময় নিতে পারে এটিকে সহজ করার জন্য, আপনি নির্বাচকটিকে আরও নির্দিষ্ট শ্রেণির নাম হিসাবে পরিবর্তন করতে পারেন:

.final-box-title {
  /* styles */
}

এই প্রতিস্থাপন শ্রেণীর নামগুলি বিশ্রী মনে হতে পারে, তবে তারা ব্রাউজারের কাজটিকে অনেক সহজ করে তোলে। পূর্ববর্তী সংস্করণে, উদাহরণস্বরূপ, ব্রাউজারকে একটি উপাদানটি তার প্রকারের শেষটি জানার জন্য, এটির পরে আসা কোন উপাদানটি nth-last-child হতে পারে কিনা তা নির্ধারণ করতে প্রথমে এটিকে অন্যান্য সমস্ত উপাদান সম্পর্কে সবকিছু জানতে হবে। . এটি একটি নির্বাচককে তার শ্রেণীর নামের একমাত্র ভিত্তিতে একটি উপাদানের সাথে মেলানোর চেয়ে অনেক বেশি গণনামূলকভাবে ব্যয়বহুল হতে পারে।

স্টাইল করা উপাদানের সংখ্যা হ্রাস করুন

আরেকটি পারফরম্যান্স বিবেচনা—এবং প্রায়শই নির্বাচক জটিলতার চেয়ে বেশি গুরুত্বপূর্ণ—একটি উপাদান পরিবর্তিত হলে কাজের পরিমাণ যা ঘটতে হবে।

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

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

আপনার শৈলী পুনর্গণনা খরচ পরিমাপ

আপনি ব্রাউজারে শৈলী পুনর্গণনার খরচ পরিমাপ করতে পারেন এমন কয়েকটি উপায় রয়েছে। তাদের প্রত্যেকটি আপনার ডেভেলপমেন্ট এনভায়রনমেন্টে ব্রাউজারে এটি পরিমাপ করতে চান কিনা বা আপনি আপনার ওয়েবসাইটের প্রকৃত ব্যবহারকারীদের জন্য এই প্রক্রিয়াটি কতক্ষণ সময় নেয় তা পরিমাপ করতে চান কিনা তার উপর নির্ভর করে।

Chrome DevTools-এ শৈলী পুনঃগণনার খরচ পরিমাপ করুন

স্টাইল পুনঃগণনার খরচ পরিমাপ করার একটি উপায় হল Chrome DevTools-এ কর্মক্ষমতা প্যানেল ব্যবহার করা। শুরু করতে নিম্নলিখিতগুলি করুন:

  1. DevTools খুলুন।
  2. পারফরম্যান্স ট্যাবে নেভিগেট করুন।
  3. নির্বাচক পরিসংখ্যান চেকবক্স চেক করুন (ঐচ্ছিক)।
  4. রেকর্ড ক্লিক করুন.
  5. পৃষ্ঠার সাথে যোগাযোগ করুন।

আপনি রেকর্ডিং বন্ধ করলে, আপনি নিম্নলিখিত চিত্রের মতো কিছু দেখতে পাবেন:

DevTools শৈলী গণনা দেখাচ্ছে।
একটি DevTools রিপোর্ট শৈলী গণনা দেখাচ্ছে।

উপরের স্ট্রিপটি একটি ক্ষুদ্র শিখা চার্ট যা প্রতি সেকেন্ডে ফ্রেমগুলিও প্লট করে। ক্রিয়াকলাপটি স্ট্রিপের নীচের দিকে, ব্রাউজার দ্বারা দ্রুত ফ্রেমগুলি আঁকা হচ্ছে। আপনি যদি দেখেন যে শিখা চার্টটি উপরের দিকে লাল দণ্ড সহ সমতল করা হয়েছে, তাহলে আপনার কাছে এমন কাজ রয়েছে যা দীর্ঘ-চলমান ফ্রেমের কারণ হচ্ছে।

জুম ইন     ক্রোম DevTools-এ একটি সমস্যা এলাকা জনসংখ্যার কার্যকলাপের সারাংশে     Chrome DevTools-এ কর্মক্ষমতা প্যানেল।
DevTools অ্যাক্টিভিটির সারাংশে দীর্ঘ-চলমান ফ্রেম।

স্ক্রল করার মতো মিথস্ক্রিয়া চলাকালীন দীর্ঘ-চলমান ফ্রেমগুলি আরও ঘনিষ্ঠভাবে দেখার মূল্যবান। আপনি যদি একটি বড় বেগুনি ব্লক দেখতে পান, তাহলে কার্যকলাপে জুম করুন এবং সম্ভাব্য ব্যয়বহুল শৈলী পুনঃগণনা কাজের বিষয়ে আরও তথ্য পেতে রিক্যালকুলেট স্টাইল লেবেলযুক্ত যেকোনো কাজ নির্বাচন করুন।

পেয়ে     অত্যাবশ্যক তথ্য সহ দীর্ঘ-চলমান শৈলী গণনার বিবরণ     শৈলী পুনর্গণনার কাজ দ্বারা প্রভাবিত উপাদানের পরিমাণ হিসাবে.
DevTools সারাংশে মাত্র 25 ms এর বেশি সময় ধরে একটি দীর্ঘ-চলমান শৈলী পুনঃগণনা।

ইভেন্টে ক্লিক করলে তার কল স্ট্যাক দেখায়। যদি রেন্ডারিং কাজটি ব্যবহারকারীর মিথস্ক্রিয়া দ্বারা সৃষ্ট হয়, তবে এটি জাভাস্ক্রিপ্টকে কল করে যা শৈলী পরিবর্তনকে ট্রিগার করেছে। এটি পরিবর্তনটি প্রভাবিত করে এমন উপাদানগুলির সংখ্যাও দেখায় — এই ক্ষেত্রে মাত্র 900 টিরও বেশি উপাদান — এবং শৈলী গণনা কতক্ষণ সময় নেয়৷ আপনি আপনার কোডে একটি সমাধান খোঁজার চেষ্টা শুরু করতে এই তথ্য ব্যবহার করতে পারেন।

আপনি যদি একটি ট্রেস করার আগে পারফরম্যান্স প্যানেল সেটিংসে নির্বাচক পরিসংখ্যান চেকবক্সটি চেক করেন, তাহলে ট্রেসের নীচের প্যানেলে একই নামের একটি অতিরিক্ত ট্যাব থাকবে৷

এটি হিসাবে CSS নির্বাচক পরিসংখ্যান টেবিল     Chrome DevTools-এর কর্মক্ষমতা প্যানেলে প্রদর্শিত হয়। এই টেবিল ধারণ করে     অতিবাহিত সময়, ম্যাচের মতো জিনিসগুলির জন্য শিরোনাম এবং সংশ্লিষ্ট ডেটা     প্রচেষ্টা, ম্যাচ গণনা, অ-ম্যাচিং নোডের শতাংশ, নির্বাচক এবং     স্টাইল শীট তারা পাওয়া যাবে.
Chrome DevTools-এর পারফরম্যান্স প্যানেলে দেখানো হিসাবে নির্বাচক পরিসংখ্যান টেবিল।

এই প্যানেল প্রতিটি নির্বাচকের আপেক্ষিক খরচের উপর দরকারী ডেটা প্রদান করে, যা আপনাকে ব্যয়বহুল CSS নির্বাচকদের সনাক্ত করতে দেয়।

আরও তথ্যের জন্য, CSS নির্বাচক পরিসংখ্যান ডকুমেন্টেশন দেখুন।

বাস্তব ব্যবহারকারীদের জন্য শৈলী পুনর্গণনা খরচ পরিমাপ

আপনি যদি জানতে আগ্রহী হন যে আপনার ওয়েবসাইটের প্রকৃত ব্যবহারকারীদের জন্য স্টাইল পুনঃগণনা ঘটতে কতক্ষণ সময় লাগে, লং অ্যানিমেশন ফ্রেম API আপনাকে এটি করার জন্য প্রয়োজনীয় সরঞ্জাম দেয়। এই API থেকে ডেটা web-vitals জাভাস্ক্রিপ্ট লাইব্রেরিতে যোগ করা হয়েছে, শৈলী পুনর্গণনার সময় সহ।

আপনি যদি সন্দেহ করেন যে কোনও ইন্টারঅ্যাকশনের উপস্থাপনা বিলম্ব একটি পৃষ্ঠার INP-তে প্রাথমিক অবদানকারী, তাহলে আপনি পৃষ্ঠায় শৈলীগুলি পুনঃগণনা করতে কতটা সময় ব্যয় করেছেন তা বের করতে চাইবেন। আরও তথ্যের জন্য, ক্ষেত্রটিতে শৈলী পুনঃগণনার সময় কীভাবে পরিমাপ করা যায় সে সম্পর্কে পড়ুন।

সম্পদ

,

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

শৈলী গণনা

উপাদানগুলি যোগ করে এবং অপসারণ করে, বৈশিষ্ট্যগুলি, ক্লাসগুলি পরিবর্তন করে বা অ্যানিমেশনগুলি চালানোর মাধ্যমে DOM পরিবর্তন করার ফলে ব্রাউজারকে উপাদান শৈলী এবং অনেক ক্ষেত্রে, অংশ বা সমস্ত পৃষ্ঠার বিন্যাস পুনরায় গণনা করতে হয়। এই প্রক্রিয়াটিকে স্টাইল গণনা বলা হয়।

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

মিথস্ক্রিয়া বিলম্বে শৈলী পুনঃগণনার ভূমিকা

ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (আইএনপি) হল একটি ব্যবহারকারী-কেন্দ্রিক রানটাইম পারফরম্যান্স মেট্রিক যা ব্যবহারকারীর ইনপুটের প্রতি একটি পৃষ্ঠার সামগ্রিক প্রতিক্রিয়ার মূল্যায়ন করে। এটি ইন্টারঅ্যাকশন লেটেন্সি পরিমাপ করে যখন ব্যবহারকারী পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করে তখন পর্যন্ত ব্রাউজার পরবর্তী ফ্রেমটি পেইন্ট করে ব্যবহারকারী ইন্টারফেসের সাথে সম্পর্কিত ভিজ্যুয়াল আপডেটগুলি দেখায়।

একটি ইন্টারঅ্যাকশনের একটি উল্লেখযোগ্য উপাদান হল পরবর্তী ফ্রেমটি আঁকতে যে সময় লাগে। পরবর্তী ফ্রেমটি উপস্থাপন করার জন্য করা রেন্ডারিং কাজটি লেআউট, পেইন্ট এবং কম্পোজিটিং কাজের ঠিক আগে ঘটে যাওয়া পৃষ্ঠা শৈলীগুলির গণনা সহ অনেক অংশ নিয়ে গঠিত। এই নির্দেশিকাটি শৈলী গণনা খরচের উপর ফোকাস করে, তবে মিথস্ক্রিয়াটির মোট রেন্ডারিং সময়কালের যেকোন অংশ হ্রাস করা তার মোট বিলম্বিতাও হ্রাস করে।

আপনার নির্বাচকদের জটিলতা হ্রাস করুন

সিএসএস নির্বাচকদের সরলীকরণ আপনার পৃষ্ঠার শৈলী গণনার গতি বাড়াতে সাহায্য করতে পারে। সহজতম নির্বাচকরা CSS-এ শুধুমাত্র একটি শ্রেণির নাম দিয়ে একটি উপাদান উল্লেখ করে:

.title {
  /* styles */
}

কিন্তু, যেকোন প্রজেক্ট বাড়ার সাথে সাথে এর জন্য আরও জটিল সিএসএসের প্রয়োজন হয় এবং আপনি এইরকম দেখতে নির্বাচকদের সাথে শেষ করতে পারেন:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

এই শৈলীগুলি কীভাবে পৃষ্ঠায় প্রযোজ্য তা নির্ধারণ করতে, ব্রাউজারকে কার্যকরভাবে জিজ্ঞাসা করতে হবে "এটি কি একটি শ্রেণির title সহ একটি box অভিভাবক সহ একটি উপাদান যা এর মূল উপাদানটির বিয়োগ-নম-প্লাস-1 সন্তান? এই আউটটি ব্রাউজারটির জন্য কিছু সময় নিতে পারে এটিকে সহজ করার জন্য, আপনি নির্বাচকটিকে আরও নির্দিষ্ট শ্রেণির নাম হিসাবে পরিবর্তন করতে পারেন:

.final-box-title {
  /* styles */
}

এই প্রতিস্থাপন শ্রেণীর নামগুলি বিশ্রী মনে হতে পারে, তবে তারা ব্রাউজারের কাজটিকে অনেক সহজ করে তোলে। পূর্ববর্তী সংস্করণে, উদাহরণস্বরূপ, ব্রাউজারকে একটি উপাদানটি তার প্রকারের শেষটি জানার জন্য, এটির পরে আসা কোন উপাদানটি nth-last-child হতে পারে কিনা তা নির্ধারণ করতে প্রথমে এটিকে অন্যান্য সমস্ত উপাদান সম্পর্কে সবকিছু জানতে হবে। . এটি একটি নির্বাচককে তার শ্রেণীর নামের একমাত্র ভিত্তিতে একটি উপাদানের সাথে মেলানোর চেয়ে অনেক বেশি গণনামূলকভাবে ব্যয়বহুল হতে পারে।

স্টাইল করা উপাদানের সংখ্যা হ্রাস করুন

আরেকটি পারফরম্যান্স বিবেচনা—এবং প্রায়শই নির্বাচক জটিলতার চেয়ে বেশি গুরুত্বপূর্ণ—একটি উপাদান পরিবর্তিত হলে কাজের পরিমাণ যা ঘটতে হবে।

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

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

আপনার শৈলী পুনর্গণনা খরচ পরিমাপ

আপনি ব্রাউজারে শৈলী পুনর্গণনার খরচ পরিমাপ করতে পারেন এমন কয়েকটি উপায় রয়েছে। তাদের প্রত্যেকটি আপনার ডেভেলপমেন্ট এনভায়রনমেন্টে ব্রাউজারে এটি পরিমাপ করতে চান কিনা বা আপনি আপনার ওয়েবসাইটের প্রকৃত ব্যবহারকারীদের জন্য এই প্রক্রিয়াটি কতক্ষণ সময় নেয় তা পরিমাপ করতে চান কিনা তার উপর নির্ভর করে।

Chrome DevTools-এ শৈলী পুনঃগণনার খরচ পরিমাপ করুন

স্টাইল পুনঃগণনার খরচ পরিমাপ করার একটি উপায় হল Chrome DevTools-এ কর্মক্ষমতা প্যানেল ব্যবহার করা। শুরু করতে নিম্নলিখিতগুলি করুন:

  1. DevTools খুলুন।
  2. পারফরম্যান্স ট্যাবে নেভিগেট করুন।
  3. নির্বাচক পরিসংখ্যান চেকবক্স চেক করুন (ঐচ্ছিক)।
  4. রেকর্ড ক্লিক করুন.
  5. পৃষ্ঠার সাথে যোগাযোগ করুন।

আপনি রেকর্ডিং বন্ধ করলে, আপনি নিম্নলিখিত চিত্রের মতো কিছু দেখতে পাবেন:

DevTools শৈলী গণনা দেখাচ্ছে।
একটি DevTools রিপোর্ট শৈলী গণনা দেখাচ্ছে।

উপরের স্ট্রিপটি একটি ক্ষুদ্র শিখা চার্ট যা প্রতি সেকেন্ডে ফ্রেমগুলিও প্লট করে। ক্রিয়াকলাপটি স্ট্রিপের নীচের দিকে, ব্রাউজার দ্বারা দ্রুত ফ্রেমগুলি আঁকা হচ্ছে। আপনি যদি দেখেন যে শিখা চার্টটি উপরের দিকে লাল দণ্ড সহ সমতল করা হয়েছে, তাহলে আপনার কাছে এমন কাজ রয়েছে যা দীর্ঘ-চলমান ফ্রেমের কারণ হচ্ছে।

জুম ইন     ক্রোম DevTools-এ একটি সমস্যা এলাকা জনসংখ্যার কার্যকলাপের সারাংশে     Chrome DevTools-এ কর্মক্ষমতা প্যানেল।
DevTools অ্যাক্টিভিটির সারাংশে দীর্ঘ-চলমান ফ্রেম।

স্ক্রল করার মতো মিথস্ক্রিয়া চলাকালীন দীর্ঘ-চলমান ফ্রেমগুলি আরও ঘনিষ্ঠভাবে দেখার মূল্যবান। আপনি যদি একটি বড় বেগুনি ব্লক দেখতে পান, তাহলে কার্যকলাপে জুম করুন এবং সম্ভাব্য ব্যয়বহুল শৈলী পুনঃগণনা কাজের বিষয়ে আরও তথ্য পেতে রিক্যালকুলেট স্টাইল লেবেলযুক্ত যেকোনো কাজ নির্বাচন করুন।

পেয়ে     অত্যাবশ্যক তথ্য সহ দীর্ঘ-চলমান শৈলী গণনার বিবরণ     শৈলী পুনর্গণনার কাজ দ্বারা প্রভাবিত উপাদানের পরিমাণ হিসাবে.
DevTools সারাংশে মাত্র 25 ms এর বেশি সময় ধরে একটি দীর্ঘ-চলমান শৈলী পুনঃগণনা।

ইভেন্টে ক্লিক করলে তার কল স্ট্যাক দেখায়। যদি রেন্ডারিং কাজটি ব্যবহারকারীর মিথস্ক্রিয়া দ্বারা সৃষ্ট হয়, তবে এটি জাভাস্ক্রিপ্টকে কল করে যা শৈলী পরিবর্তনকে ট্রিগার করেছে। এটি পরিবর্তনটি প্রভাবিত করে এমন উপাদানগুলির সংখ্যাও দেখায় — এই ক্ষেত্রে মাত্র 900 টিরও বেশি উপাদান — এবং শৈলী গণনা কতক্ষণ সময় নেয়৷ আপনি আপনার কোডে একটি সমাধান খোঁজার চেষ্টা শুরু করতে এই তথ্য ব্যবহার করতে পারেন।

আপনি যদি একটি ট্রেস করার আগে পারফরম্যান্স প্যানেল সেটিংসে নির্বাচক পরিসংখ্যান চেকবক্সটি চেক করেন, তাহলে ট্রেসের নীচের প্যানেলে একই নামের একটি অতিরিক্ত ট্যাব থাকবে৷

এটি হিসাবে CSS নির্বাচক পরিসংখ্যান টেবিল     Chrome DevTools-এর কর্মক্ষমতা প্যানেলে প্রদর্শিত হয়। এই টেবিল ধারণ করে     অতিবাহিত সময়, ম্যাচের মতো জিনিসগুলির জন্য শিরোনাম এবং সংশ্লিষ্ট ডেটা     প্রচেষ্টা, ম্যাচ গণনা, অ-ম্যাচিং নোডের শতাংশ, নির্বাচক এবং     স্টাইল শীট তারা পাওয়া যাবে.
Chrome DevTools-এর পারফরম্যান্স প্যানেলে দেখানো হিসাবে নির্বাচক পরিসংখ্যান টেবিল।

এই প্যানেল প্রতিটি নির্বাচকের আপেক্ষিক খরচের উপর দরকারী ডেটা প্রদান করে, যা আপনাকে ব্যয়বহুল CSS নির্বাচকদের সনাক্ত করতে দেয়।

আরও তথ্যের জন্য, CSS নির্বাচক পরিসংখ্যান ডকুমেন্টেশন দেখুন।

বাস্তব ব্যবহারকারীদের জন্য শৈলী পুনর্গণনা খরচ পরিমাপ

আপনি যদি জানতে আগ্রহী হন যে আপনার ওয়েবসাইটের প্রকৃত ব্যবহারকারীদের জন্য স্টাইল পুনঃগণনা ঘটতে কতক্ষণ সময় লাগে, লং অ্যানিমেশন ফ্রেম API আপনাকে এটি করার জন্য প্রয়োজনীয় সরঞ্জাম দেয়। এই API থেকে ডেটা web-vitals জাভাস্ক্রিপ্ট লাইব্রেরিতে যোগ করা হয়েছে, শৈলী পুনর্গণনার সময় সহ।

আপনি যদি সন্দেহ করেন যে কোনও ইন্টারঅ্যাকশনের উপস্থাপনা বিলম্ব একটি পৃষ্ঠার INP-তে প্রাথমিক অবদানকারী, তাহলে আপনি পৃষ্ঠায় শৈলীগুলি পুনঃগণনা করতে কতটা সময় ব্যয় করেছেন তা বের করতে চাইবেন। আরও তথ্যের জন্য, ক্ষেত্রটিতে শৈলী পুনঃগণনার সময় কীভাবে পরিমাপ করা যায় সে সম্পর্কে পড়ুন।

সম্পদ

,

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

শৈলী গণনা

উপাদানগুলি যোগ করে এবং অপসারণ করে, বৈশিষ্ট্যগুলি, ক্লাসগুলি পরিবর্তন করে বা অ্যানিমেশনগুলি চালানোর মাধ্যমে DOM পরিবর্তন করার ফলে ব্রাউজারকে উপাদান শৈলী এবং অনেক ক্ষেত্রে, অংশ বা সমস্ত পৃষ্ঠার বিন্যাস পুনরায় গণনা করতে হয়। এই প্রক্রিয়াটিকে স্টাইল গণনা বলা হয়।

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

মিথস্ক্রিয়া বিলম্বে শৈলী পুনঃগণনার ভূমিকা

ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট (আইএনপি) হল একটি ব্যবহারকারী-কেন্দ্রিক রানটাইম পারফরম্যান্স মেট্রিক যা ব্যবহারকারীর ইনপুটের প্রতি একটি পৃষ্ঠার সামগ্রিক প্রতিক্রিয়ার মূল্যায়ন করে। এটি ইন্টারঅ্যাকশন লেটেন্সি পরিমাপ করে যখন ব্যবহারকারী পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করে তখন পর্যন্ত ব্রাউজার পরবর্তী ফ্রেমটি পেইন্ট করে ব্যবহারকারী ইন্টারফেসের সাথে সম্পর্কিত ভিজ্যুয়াল আপডেটগুলি দেখায়।

একটি ইন্টারঅ্যাকশনের একটি উল্লেখযোগ্য উপাদান হল পরবর্তী ফ্রেমটি আঁকতে যে সময় লাগে। পরবর্তী ফ্রেমটি উপস্থাপন করার জন্য করা রেন্ডারিং কাজটি লেআউট, পেইন্ট এবং কম্পোজিটিং কাজের ঠিক আগে ঘটে যাওয়া পৃষ্ঠা শৈলীগুলির গণনা সহ অনেক অংশ নিয়ে গঠিত। এই নির্দেশিকাটি শৈলী গণনা খরচের উপর ফোকাস করে, তবে মিথস্ক্রিয়াটির মোট রেন্ডারিং সময়কালের যেকোন অংশ হ্রাস করা তার মোট বিলম্বিতাও হ্রাস করে।

আপনার নির্বাচকদের জটিলতা হ্রাস করুন

সিএসএস নির্বাচকদের সরলীকরণ আপনার পৃষ্ঠার শৈলী গণনার গতি বাড়াতে সাহায্য করতে পারে। সহজতম নির্বাচকরা CSS-এ শুধুমাত্র একটি শ্রেণির নাম দিয়ে একটি উপাদান উল্লেখ করে:

.title {
  /* styles */
}

কিন্তু, যেকোন প্রজেক্ট বাড়ার সাথে সাথে এর জন্য আরও জটিল সিএসএসের প্রয়োজন হয় এবং আপনি এইরকম দেখতে নির্বাচকদের সাথে শেষ করতে পারেন:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

এই শৈলীগুলি কীভাবে পৃষ্ঠায় প্রযোজ্য তা নির্ধারণ করতে, ব্রাউজারকে কার্যকরভাবে জিজ্ঞাসা করতে হবে "এটি কি একটি শ্রেণির title সহ একটি box অভিভাবক সহ একটি উপাদান যা এর মূল উপাদানটির বিয়োগ-নম-প্লাস-1 সন্তান? এই আউটটি ব্রাউজারটির জন্য কিছু সময় নিতে পারে এটিকে সহজ করার জন্য, আপনি নির্বাচকটিকে আরও নির্দিষ্ট শ্রেণির নাম হিসাবে পরিবর্তন করতে পারেন:

.final-box-title {
  /* styles */
}

এই প্রতিস্থাপন শ্রেণীর নামগুলি বিশ্রী মনে হতে পারে, তবে তারা ব্রাউজারের কাজটিকে অনেক সহজ করে তোলে। পূর্ববর্তী সংস্করণে, উদাহরণস্বরূপ, ব্রাউজারকে একটি উপাদানটি তার প্রকারের শেষটি জানার জন্য, এটির পরে আসা কোন উপাদানটি nth-last-child হতে পারে কিনা তা নির্ধারণ করতে প্রথমে এটিকে অন্যান্য সমস্ত উপাদান সম্পর্কে সবকিছু জানতে হবে। . এটি একটি নির্বাচককে তার শ্রেণীর নামের একমাত্র ভিত্তিতে একটি উপাদানের সাথে মেলানোর চেয়ে অনেক বেশি গণনামূলকভাবে ব্যয়বহুল হতে পারে।

স্টাইল করা উপাদানের সংখ্যা হ্রাস করুন

আরেকটি পারফরম্যান্স বিবেচনা—এবং প্রায়শই নির্বাচক জটিলতার চেয়ে বেশি গুরুত্বপূর্ণ—একটি উপাদান পরিবর্তিত হলে কাজের পরিমাণ যা ঘটতে হবে।

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

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

আপনার শৈলী পুনর্গণনা খরচ পরিমাপ

আপনি ব্রাউজারে শৈলী পুনর্গণনার খরচ পরিমাপ করতে পারেন এমন কয়েকটি উপায় রয়েছে। তাদের প্রত্যেকটি আপনার ডেভেলপমেন্ট এনভায়রনমেন্টে ব্রাউজারে এটি পরিমাপ করতে চান কিনা বা আপনি আপনার ওয়েবসাইটের প্রকৃত ব্যবহারকারীদের জন্য এই প্রক্রিয়াটি কতক্ষণ সময় নেয় তা পরিমাপ করতে চান কিনা তার উপর নির্ভর করে।

Chrome DevTools-এ শৈলী পুনঃগণনার খরচ পরিমাপ করুন

স্টাইল পুনঃগণনার খরচ পরিমাপ করার একটি উপায় হল Chrome DevTools-এ কর্মক্ষমতা প্যানেল ব্যবহার করা। শুরু করতে নিম্নলিখিতগুলি করুন:

  1. DevTools খুলুন।
  2. পারফরম্যান্স ট্যাবে নেভিগেট করুন।
  3. নির্বাচক পরিসংখ্যান চেকবক্স চেক করুন (ঐচ্ছিক)।
  4. রেকর্ড ক্লিক করুন.
  5. পৃষ্ঠার সাথে যোগাযোগ করুন।

আপনি যখন রেকর্ডিং বন্ধ করেন, আপনি নিম্নলিখিত চিত্রের মতো কিছু দেখতে পাবেন:

স্টাইল গণনা দেখানো ডিভটুলগুলি।
স্টাইলের গণনা দেখানো একটি ডিভটুলস রিপোর্ট।

শীর্ষে স্ট্রিপটি একটি ক্ষুদ্রতর শিখা চার্ট যা প্রতি সেকেন্ডে ফ্রেমও প্লট করে। ক্রিয়াকলাপটি স্ট্রিপের নীচের অংশের কাছাকাছি, দ্রুত ফ্রেমগুলি ব্রাউজার দ্বারা আঁকা হচ্ছে। আপনি যদি শিখা চার্টটি উপরে লাল বারগুলির সাথে শীর্ষে সমতল হতে দেখেন তবে আপনার এমন কাজ রয়েছে যা দীর্ঘ-চলমান ফ্রেমের কারণ হয়ে দাঁড়িয়েছে।

জুম ইন     জনবহুল ক্রিয়াকলাপের সংক্ষিপ্তসারটিতে ক্রোম ডেভটুলগুলিতে একটি সমস্যা অঞ্চল     ক্রোম ডিভটুলসে পারফরম্যান্স প্যানেল।
ডিভটুলস ক্রিয়াকলাপের সংক্ষিপ্তসারটিতে দীর্ঘকাল ধরে চলমান ফ্রেম।

স্ক্রোলিংয়ের মতো মিথস্ক্রিয়া চলাকালীন দীর্ঘ-চলমান ফ্রেমগুলি আরও কাছাকাছি দেখার জন্য মূল্যবান। আপনি যদি একটি বৃহত বেগুনি ব্লক দেখতে পান তবে ক্রিয়াকলাপটি জুম করুন এবং সম্ভাব্য ব্যয়বহুল স্টাইলের পুনর্বিবেচনার কাজ সম্পর্কে আরও তথ্য পেতে যে কোনও কাজ পুনরায় গণনা শৈলী লেবেলযুক্ত নির্বাচন করুন।

পেয়ে     দীর্ঘকাল ধরে চলমান শৈলীর গণনার বিশদ, যেমন গুরুত্বপূর্ণ তথ্য সহ     স্টাইলের পুনর্বিবেচনার কাজ দ্বারা প্রভাবিত উপাদানগুলির পরিমাণ হিসাবে।
একটি দীর্ঘকাল ধরে চলমান শৈলীর পুনর্বিবেচনাটি ডিভটুলস সংক্ষিপ্তসারটিতে মাত্র 25 এমএসেরও বেশি সময় নিয়েছে।

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

আপনি যদি ট্রেস করার আগে পারফরম্যান্স প্যানেল সেটিংসে সিলেক্টর স্ট্যাটাস চেকবক্সটি পরীক্ষা করে দেখেন, তবে ট্রেসের নীচের প্যানেলের একই নামে একটি অতিরিক্ত ট্যাব থাকবে।

সিএসএস নির্বাচক পরিসংখ্যান টেবিল হিসাবে এটি     ক্রোম ডেভটুলসের পারফরম্যান্স প্যানেলে প্রদর্শিত হবে। এই টেবিলটিতে রয়েছে     সময়সীমা, ম্যাচের মতো জিনিসগুলির জন্য শিরোনাম এবং সংশ্লিষ্ট ডেটা     প্রচেষ্টা, ম্যাচ গণনা, অ-ম্যাচিং নোড, নির্বাচক এবং শতাংশের শতাংশ     তারা যে স্টাইল শীটটিতে পাওয়া যাবে।
ক্রোম ডিভটুলসের পারফরম্যান্স প্যানেলে প্রদর্শিত নির্বাচকের পরিসংখ্যান সারণী।

এই প্যানেলটি প্রতিটি নির্বাচকের আপেক্ষিক ব্যয়ের বিষয়ে দরকারী ডেটা সরবরাহ করে, আপনাকে ব্যয়বহুল সিএসএস নির্বাচকদের সনাক্ত করতে দেয়।

আরও তথ্যের জন্য, সিএসএস নির্বাচক পরিসংখ্যান ডকুমেন্টেশন দেখুন।

বাস্তব ব্যবহারকারীদের জন্য স্টাইল রিক্যালকুলেশন ব্যয় পরিমাপ করুন

আপনার ওয়েবসাইটের প্রকৃত ব্যবহারকারীদের জন্য স্টাইল রিক্যালকুলেশনটি কতক্ষণ সময় লাগে তা জানতে আগ্রহী হন, দীর্ঘ অ্যানিমেশন ফ্রেম এপিআই আপনাকে এটি করার জন্য প্রয়োজনীয় সরঞ্জামগুলি দেয়। এই এপিআই থেকে প্রাপ্ত ডেটাগুলি স্টাইল রিক্যালকুলেশন সময় সহ web-vitals জাভাস্ক্রিপ্ট লাইব্রেরিতে যুক্ত করা হয়েছিল।

যদি আপনি সন্দেহ করেন যে কোনও মিথস্ক্রিয়াটির উপস্থাপনা বিলম্ব কোনও পৃষ্ঠার আইএনপিতে প্রাথমিক অবদানকারী, আপনি পৃষ্ঠায় স্টাইলগুলি পুনরায় গণনা করতে কত সময় ব্যয় করা হয় তা নির্ধারণ করতে চাইবেন। আরও তথ্যের জন্য, ক্ষেত্রের স্টাইলের পুনঃ গণনা সময় কীভাবে পরিমাপ করা যায় সে সম্পর্কে পড়ুন।

সম্পদ