بهینه‌سازی تعاملات در چیدمان‌های پیچیده

نرخ فریم بالا (۶۰ فریم در ثانیه) را حفظ کنید و تأخیر تعامل را درطول کشیدن و رها کردن یا تغییرات سنگین در چیدمان‌های پیچیده و چندستونی مانند تابلوهای کانبان یا شبکه‌های داده عظیم حذف کنید.

نمای کلی

در چیدمان‌های پیچیده، انجام تغییری جزئی در یک مورد (مثلاً کشیدن کارت یا ویرایش سلول) می‌تواند واکنش زنجیره‌ای از محاسبات سبک و چیدمان را راه‌اندازی کند که مرورگر را مجبور می‌کند کل صفحه را بازآرایی کند. این امر منجر به افت فریم و تأخیر بالای «تعامل تا ترسیم بعدی» (INP) می‌شود.

با اعمال content-visibility: auto به مناطق چیدمان مستقل (مانند ستون‌ها در تابلوی کانبان)، می‌توانید کار پردازش را جدا کنید.

سازوکار عناصر روی صفحه

مهم است که بدانید content-visibility: auto چگونه به عناصری که ازقبل در صفحه نمایان هستند کمک می‌کند:

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

پیاده‌سازی

۱. شناسایی مناطق مهار

content-visibility: auto را برای محفظه‌های بزرگ و مستقل که واحدهای چیدمان مجزا را نشان می‌دهند (مثلاً ستون‌های جدولی، فهرست‌های تابلو) اعمال کنید.

.board-column {
  /* Apply containment boundaries */
  content-visibility: auto;
  
  /* Mandatory: Provide a placeholder size to prevent layouts shifts.
     For a vertical column, define a reasonable width and height. 
     - '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.
     - '300px' is the estimated width of this element. This can be any valid
      CSS <length> value. Replace it with the expected width of your
      component.
     - '800px' is the estimated height of this element. This can be any valid
      CSS <length> value. Replace it with the expected height of your
      component.
   */
  contain-intrinsic-size: auto 300px auto 800px;
}

۲. مدیریت تعامل‌ها

مطمئن شوید که تعاملات درون ستون از محصور شدن بهره می‌برند.

// Example: Drag and drop item movement
function moveItemToColumn(itemId, columnId) {
  const item = document.getElementById(itemId);
  const column = document.getElementById(columnId);
  
  // The browser will only reflow this specific column, 
  // not the entire board layout!
  column.appendChild(item);
}

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

این خصوصیت به‌خوبی تنزل می‌کند. در مرورگرهای پشتیبانی‌نشده:

• این ویژگی نادیده گرفته می‌شود و جهش‌ها باعث بازچینی استاندارد سراسری می‌شود.
• برای دستیابی به جلوه جداسازی مشابه در مرورگرهای قدیمی‌تر، می‌توانید به اعمال دستی مهار برگردید:

@supports not (content-visibility: auto) {
  .board-column {
    /* Manual fallback for containment */
    contain: layout style paint;
  }
}