به‌تعویق انداختن پردازش محتوای سنگین

صفحه‌های وب با محتوای گسترده (مانند پیمایش‌های بی‌پایان، داشبوردهای پیچیده، یا مقاله‌های متراکم) ممکن است از پرداز زدن اولیه کند و تعاملات کُند رنج ببرند. فناوری‌های وب مدرن به شما امکان می‌دهند حجم کاری پردازش را برای محتوایی که بلافاصله قابل‌مشاهده نیست به‌تعویق بیندازید، که این امر عملکرد را به‌طور قابل‌توجهی افزایش می‌دهد بدون اینکه دسترس‌پذیری یا انتظارات کاربر را مختل کند.

برای بهینه‌سازی پردازش، می‌توانید از ویژگی CSS content-visibility و مشخصه HTML hidden="until-found" استفاده کنید. اگرچه هر دو به عملکرد کمک می‌کنند، اما موارد استفاده متمایزی دارند.

زمان استفاده از هرکدام

نحوه پیاده‌سازی content-visibility: auto

انتخاب محتوای خارج از صفحه

اجباری: باید با دقت مشخص کنید کدام عناصر content-visibility: auto را دریافت می‌کنند.

• باید بلوک‌های چیدمان بزرگ و مستقل را که دقیقاً زیر خط تا اولیه قرار دارند هدف قرار دهید (برای مثال، موارد کارتی در فید بی‌انتها، نظرات دنباله‌دار، یا بخش‌های چیدمان سنگین در پایین).
• این ویژگی را برای عناصر موجود در ناحیه نمایش اولیه بالای خط تا اعمال نکنید. انجام این کار مرورگر را مجبور می‌کند تا مرزهای رؤیت‌پذیری را قبل‌از بازپرداخت ارزیابی کند، که به‌طور متناقضی عملکرد بار کردن صفحه بحرانی را به‌تأخیر می‌اندازد.
• عناصر با ساختارهای DOM داخلی عمیق یا پیچیده را هدف قرار دهید تا صرفه‌جویی در هزینه پردازش به حداکثر برسد.

مراحل پیاده‌سازی

1. اجباری: بخش‌های سنگینی را که تأیید شده است در بارگیری اولیه خارج‌از صفحه هستند شناسایی کنید.
2. اجباری: content-visibility: auto را برای هرکدام از این عناصر خارج از صفحه اعمال کنید.
3. اجباری: اندازه ساختار چیدمان تخمینی را بااستفاده از contain-intrinsic-size در هر عنصر ارائه دهید.

نحوه استفاده از contain-intrinsic-size

اجباری: باید content-visibility: auto را با contain-intrinsic-size جفت کنید. درصورت عدم انجام این کار، مرورگر مجبور می‌شود عنصر را به ارتفاع ۰ پیکسل در خارج از صفحه جمع کند، که باعث تغییر شدید چیدمان و پرش نوار پیمایش هنگام پیمایش کاربر می‌شود.

ویژگی خلاصه CSS contain-intrinsic-size به‌عنوان یک بعد جای‌بان عمل می‌کند. استفاده از کلیدواژه auto به مرورگر امکان می‌دهد اندازه دقیق را پس‌از رندر شدن نهایی عنصر «به‌خاطر بسپارد» و اگر عنصر دوباره از صفحه خارج شود، از آن اندازه محاسبه‌شده به‌جای جای‌بان استفاده کند.

کد نمونه

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

نحوه پیاده‌سازی content-visibility: hidden

1. شناسایی بخش‌های سنگین: بلوک‌های چیدمان را که در ابتدا پنهان هستند (مثلاً ردیف‌های اضافی در جدول داده‌های بزرگ) پیدا کنید.
2. اعمال CSS: content-visibility: hidden را به عنصر اضافه کنید.
3. نمایان کردن عنصر: وقتی عنصر باید نمایان شود، خصوصیت content-visibility را به visible یا auto تغییر دهید.

کد نمونه

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

چون content-visibility: hidden عنصر و فرزندان آن را از درخت دسترس‌پذیری و جستجوی «یافتن در صفحه» مستثنی می‌کند، اگر محتوا باید درحین پنهان بودن قابل‌کشف باقی بماند، از آن استفاده نکنید. اگر لازم است محتوای پنهان ازطریق «یافتن در صفحه» بومی قابل‌جستجو باقی بماند، از hidden="until-found" همان‌طور که در جستجوی محتوای پنهان شرح داده شده است استفاده کنید.

روال‌های مطلوب

• باید از contain-intrinsic-size با content-visibility: auto استفاده کنید. انجام ندادن این کار باعث می‌شود ارتفاع در پیمایش مجدداً محاسبه شود و درنتیجه چیدمان ناحیه نمایش بپرد یا اشکالات دیداری ایجاد شود.
• content-visibility: auto را برای عناصر داخل ناحیه نمایش نیمه بالایی اولیه اعمال نکنید، زیرا این کار پرداز زدن صفحه بحرانی را به‌تأخیر می‌اندازد.
• درستی‌سنجی دسترس‌پذیری اجباری: هنگام اعمال content-visibility: auto، باید دسترسی‌پذیری متوالی صفحه‌کلید را درستی‌سنجی کنید. در برخی پیکربندی‌های فناوری کمکی، گره‌های خارج از صفحه که از content-visibility: auto استفاده می‌کنند ممکن است از درخت دسترس‌پذیری یا مسیرهای پیمایش متوالی حذف شوند تا زمانی که تمرکز به‌زور به داخل آن‌ها منتقل شود. پیمایش خطی را در مرزهای خارج از صفحه فقط بااستفاده از صفحه‌کلید آزمایش کنید.

راهبردهای جایگزین

گزینه جایگزین content-visibility

وقتی content-visibility پشتیبانی نشود، مرورگر آن را نادیده می‌گیرد. در بیشتر موارد، content-visibility: auto به بازگشت نیاز نخواهد داشت، هرچند بدون آن، بهبود عملکرد ازدست خواهد رفت. مرورگر پشتیبانی‌نشده عناصر content-visibility: hidden را کاملاً نمایان می‌گذارد. از تشخیص ویژگی برای پیاده‌سازی بازگشت استفاده کنید.

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}