با ذخیره کردن حالت پردازش‌شده نماهای غیرفعال در حافظه پنهان به‌جای ازبین بردن آن‌ها، پیمایش فوری بین نماها را در «برنامه تک‌صفحه‌ای» (SPA) فعال کنید.
نمای کلی
به‌طور سنتی، وقتی کاربر بین برگه‌ها یا نماها در یک SPA پیمایش می‌کند، توسعه‌دهندگان یا نمای قدیمی را ازبین می‌برند یا آن را بااستفاده از display: none پنهان می‌کنند. هر دو رویکرد مستلزم این است که مرورگر هنگام بازگشت کاربر به آن نما، کل چیدمان و رنگ را بازآفرینی یا بازمحاسبه کند.
بااستفاده از content-visibility: hidden در نماهای غیرفعال، مرورگر محتوای عنصر را از جریان چیدمان برمی‌دارد و رنگ‌آمیزی آن را متوقف می‌کند، اما وضعیت پردازش ذخیره‌شده آن را در حافظه حفظ می‌کند. وقتی کاربر به حالت قبلی برمی‌گردد، نما تقریباً بلافاصله بازیابی می‌شود.
مبادله CPU دربرابر RAM
درحالی‌که این رویکرد مزایای عملکردی عظیمی را ارائه می‌دهد، یک مبادله خاص را معرفی می‌کند که باید با دقت مدیریت کنید:
- صرفه‌جویی در 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 به‌خوبی تنزل می‌کند. در مرورگرهایی که از آن پشتیبانی نمی‌کنند:
- این دارایی نادیده گرفته می‌شود.
- برای جلوگیری از اینکه مرورگرهای بازگشتی همه نماها را به‌طور هم‌زمان ارائه دهند، باید یک بازگشت به
display: noneدر CSS خود ارائه دهید:
@supports not (content-visibility: hidden) {
.spa-view.inactive {
display: none;
}
}