সিঙ্গেল-পেজ অ্যাপ্লিকেশনে (SPA) ভিউয়ের মধ্যে ইনস্ট্যান্ট নেভিগেশন চালু করুন। এর জন্য ইনঅ্যাক্টিভ ভিউ নষ্ট না করে, রেন্ডার করা স্টেট ক্যাশে করুন।
এক নজরে
সাধারণত, কোনও ব্যবহারকারী SPA-তে ট্যাব বা ভিউয়ের মধ্যে নেভিগেট করলে, ডেভেলপাররা পুরনো ভিউ নষ্ট করে দেন অথবা display: none ব্যবহার করে সেটি লুকিয়ে রাখেন। ব্যবহারকারী সেই ভিউতে ফিরে এলে, দুটি পদ্ধতিতেই ব্রাউজারকে সম্পূর্ণ লেআউট এবং পেইন্ট আবার তৈরি বা গণনা করতে হয়।
ইনঅ্যাক্টিভ ভিউতে content-visibility: hidden ব্যবহার করে, ব্রাউজার লেআউট ফ্লো থেকে এলিমেন্টের কন্টেন্ট সরিয়ে দেয় এবং এটি আঁকা বন্ধ করে দেয়, কিন্তু মেমরিতে এর ক্যাশে করা রেন্ডারিং স্টেট রেখে দেয়। ব্যবহারকারী আবার আগের ভিউতে ফিরে গেলে, প্রায় সঙ্গে সঙ্গেই ভিউ রিস্টোর হয়ে যায়।
সিপিইউ বনাম র্যামের মধ্যে ভারসাম্য বজায় রাখা
এই পদ্ধতি পারফর্ম্যান্সের ক্ষেত্রে অনেক সুবিধা প্রদান করলেও, এটি একটি নির্দিষ্ট ট্রেড-অফ নিয়ে আসে যা আপনাকে সতর্কতার সাথে ম্যানেজ করতে হবে:
- CPU সাশ্রয়: প্রচুর। লুকানো ভিউয়ের জন্য ব্রাউজার লেআউট ও পেইন্ট পাস সম্পূর্ণভাবে এড়িয়ে যায়।
- RAM-এর খরচ: বেশি। ব্রাউজার সব DOM নোড, ইভেন্ট লিসনার এবং লুকানো ভিউয়ের জন্য স্টেট মেমরিতে রাখে।
এই ট্রেড-অফ কখন বিপজ্জনক হয়ে ওঠে
- ছোট, অনুমানযোগ্য সংখ্যক ভিউ (যেমন, ৩ থেকে ৫টি ট্যাবযুক্ত ইন্টারফেস) সহ সাধারণ অ্যাপ্লিকেশনের জন্য এই কৌশলটি ব্যবহার করুন।
- অত্যন্ত ডাইনামিক অ্যাপ্লিকেশন যা ডজন ডজন অনন্য রিপোর্ট তৈরি করে বা অসীম ডাইনামিক রুট ব্যবহার করে, সেখানে প্রতিটি ভিউকে শর্তহীনভাবে ক্যাশে করবেন না। এটি করলে, শেষ পর্যন্ত মেমরি ব্লট হয়ে যাবে এবং কম-এন্ড ডিভাইসে ব্রাউজার ক্র্যাশ করতে পারে।
- বাধ্যতামূলক: আপনার অ্যাপ্লিকেশন অত্যন্ত ডায়নামিক হলে, মেমরি থ্রেশহোল্ডে পৌঁছে গেলে পুরনো ভিউ ধ্বংস করার জন্য আপনাকে অবশ্যই একটি এভিকশন স্ট্র্যাটেজি (যেমন, সবচেয়ে কম সম্প্রতি ব্যবহৃত ক্যাশে) প্রয়োগ করতে হবে।
প্রয়োগ
১. ভিউ কন্টেনার কনফিগার করুন
বর্তমানে অ্যাক্টিভ নয় এমন ভিউতে content-visibility: hidden সেট করুন।
.spa-view.inactive {
/* MANDATORY: Use hidden to cache the rendering state of inactive views */
content-visibility: hidden;
/* Optional: Prevent hidden views from taking up physical space in layout flow */
position: absolute;
}
২. ফোকাস ম্যানেজ করুন
ভিউ সোয়্যাপ করার সময়, অ্যাক্সেসিবিলিটি বজায় রাখতে কীবোর্ড ফোকাস সঠিকভাবে ম্যানেজ করছেন কিনা তা নিশ্চিত করুন।
function switchToView(viewId) {
// Hide all views
document.querySelectorAll('.spa-view').forEach(view => {
view.classList.add('inactive');
view.setAttribute('aria-hidden', 'true');
});
// Show the target view
const activeView = document.getElementById(viewId);
activeView.classList.remove('inactive');
activeView.setAttribute('aria-hidden', 'false');
// MANDATORY: Move focus to the new view to ensure a logical tab-order
activeView.focus();
}
ফলব্যাক স্ট্র্যাটেজি
content-visibility প্রপার্টি ধীরে ধীরে হ্রাস পায়। যেসব ব্রাউজারে এটি কাজ করে না:
- প্রপার্টিটি উপেক্ষা করা হয়েছে।
- ফলব্যাক ব্রাউজার যাতে সব ভিউ একসাথে রেন্ডার না করে, তার জন্য আপনার CSS-এ
display: none-এর জন্য একটি ফলব্যাক প্রদান করা উচিত:
@supports not (content-visibility: hidden) {
.spa-view.inactive {
display: none;
}
}