אופטימיזציה של אינטראקציות בפריסות מורכבות

לשמור על קצב פריימים גבוה (60FPS) ולמנוע זמן אחזור באינטראקציה במהלך גרירה ושחרור או שינויים כבדים בפריסות מורכבות של עמודות מרובות, כמו לוחות 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;
  }
}