প্রকাশিত: 8 অক্টোবর, 2025
একটি বড় DOM শৈলী গণনা এবং লেআউটের সময়কাল বাড়াতে পারে, যা পৃষ্ঠার প্রতিক্রিয়াশীলতাকে প্রভাবিত করে । একটি বড় DOM মেমরি ব্যবহার বাড়ায়।
একটি গভীর DOM গাছ নিজেই একটি কর্মক্ষমতা সমস্যা নয়, তবে এটি ডিজাইন প্যাটার্নের একটি উপসর্গ যা অপ্রয়োজনীয় উপাদান নেস্টিং ব্যবহার করে ।
এই অন্তর্দৃষ্টি ছায়া শিকড় সহ সমগ্র DOM বিবেচনা করে। এটি DOM নোডগুলিকে উপেক্ষা করে যা উপাদান নয়। এটি <iframe> বিষয়বস্তু উপেক্ষা করে।
কি দেখতে হবে:
- মোট উপাদান : আপনার পৃষ্ঠার DOM এ উপাদানগুলির সামগ্রিক সংখ্যা৷
- DOM গভীরতা : DOM গাছের সর্বোচ্চ গভীরতা।
- সর্বাধিক শিশু : সবচেয়ে শিশু উপাদান সহ উপাদান।
কিভাবে এই অন্তর্দৃষ্টি পাস
এই অন্তর্দৃষ্টি শুধুমাত্র ব্যর্থ হয় যদি একটি বড় লেআউট বা শৈলী পুনঃগণনা 40ms এর সময়কাল অতিক্রম করে।
- একটি বড় লেআউট আপডেটে 100 টিরও বেশি লেআউট অবজেক্ট জড়িত থাকে (যা মোটামুটি উপাদান)।
- একটি বড় শৈলী পুনর্গণনা 300 টিরও বেশি উপাদানকে প্রভাবিত করে।
ব্যর্থতার ক্ষেত্রে, পারফরম্যান্স প্যানেলে, এই অন্তর্দৃষ্টি ফ্লেম চার্টে এই ইভেন্টগুলিকে হাইলাইট করে৷
এই ইভেন্টের খরচ কমাতে:
- সিএসএস নির্বাচকদের খরচ পরিমাপ এবং শৈলী জটিলতা কমাতে শিখুন।
- অপ্রয়োজনীয় নেস্টিং কমিয়ে DOM এর গভীরতা কম করুন।
- শ্যাডো ডম ব্যবহার করার জন্য ওয়েব কম্পোনেন্ট গ্রহণ করার কথা বিবেচনা করুন-যদিও এটি DOM এর আকারকে কমাবে না, এটি স্টাইল রিকালকের খরচ কমিয়ে দেয়।
স্ট্যাক-নির্দিষ্ট নির্দেশিকা
এই অন্তর্দৃষ্টি নিম্নলিখিত প্রযুক্তিগুলি ব্যবহার করে পৃষ্ঠাগুলির জন্য স্ট্যাক-নির্দিষ্ট নির্দেশিকাও অফার করে:
কৌণিক
আপনি যদি বড় তালিকা রেন্ডার করছেন, তাহলে কম্পোনেন্ট ডেভ কিট (CDK) দিয়ে ভার্চুয়াল স্ক্রোলিং ব্যবহার করুন।
প্রতিক্রিয়া
- আপনি যদি পৃষ্ঠায় অনেকগুলি পুনরাবৃত্ত উপাদান রেন্ডার করছেন তবে তৈরি DOM নোডের সংখ্যা কমাতে
react-windowমতো একটি "উইন্ডোয়িং" লাইব্রেরি ব্যবহার করুন। -
shouldComponentUpdate,PureComponent, বাReact.memoব্যবহার করে অপ্রয়োজনীয় রি-রেন্ডার কম করুন। - আপনি যদি রানটাইম কর্মক্ষমতা উন্নত করতে
Effectহুক ব্যবহার করেন তবে নির্দিষ্ট নির্ভরতা পরিবর্তিত না হওয়া পর্যন্ত প্রভাবগুলি এড়িয়ে যান ।