تحسين التفاعلات في التنسيقات المعقّدة

الحفاظ على معدلات عالية لعدد اللقطات في الثانية (60 لقطة في الثانية) والتخلص من وقت استجابة التفاعل أثناء السحب والإفلات أو التغييرات الكبيرة في التصميمات المعقدة المتعددة الأعمدة، مثل لوحات Kanban أو شبكات البيانات الضخمة

نظرة عامة

في التنسيقات المعقّدة، يمكن أن يؤدي إجراء تغيير بسيط على عنصر واحد، مثل سحب بطاقة أو تعديل خلية، إلى سلسلة من عمليات حساب الأنماط والتنسيقات التي تجبر المتصفّح على إعادة تدفق الصفحة بأكملها. ويؤدي ذلك إلى إسقاط اللقطات وزيادة وقت استجابة مدى استجابة الصفحة لتفاعلات المستخدم (INP).

من خلال تطبيق السمة content-visibility: auto على مناطق التنسيق المستقلة (مثل الأعمدة في لوحة Kanban)، يمكنك عزل عمل العرض.

آلية العناصر التي تظهر على الشاشة

من المهم فهم كيف تفيد ميزة content-visibility: auto العناصر الظاهرة على الشاشة:

• بالنسبة إلى العناصر المرئية، لا يتخطّى المتصفّح عملية العرض.
• بدلاً من ذلك، تأتي ميزة الأداء بالكامل من احتواء CSS الذي تفرضه السمة تلقائيًا (أي التنسيق والنمط والطلاء).
• يعمل هذا الاحتواء كحدود. إذا حدثت طفرة داخل حاوية تم تطبيق الاحتواء عليها، يعرف المتصفّح أنّ التغييرات لا يمكن أن تؤثر في هندسة العناصر أو أنماطها خارج تلك الحاوية. يتم عزل إعادة تدفق الصفحة، مما يمنع إعادة حساب التخطيط العام.

التنفيذ

1. تحديد مناطق الاحتواء

استخدِم 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;
}

2. إدارة التفاعلات

تأكَّد من أنّ التفاعلات التي تحدث داخل العمود تستفيد من الاحتواء.

// 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;
  }
}