וירטואליזציה ב-Html גדולים

[pcinfogmach]

יש לא מעט ספריות שמאפשרות לממש וירטואליזציה של רשימות בצד הלקוח.
חלקן טובות יותר וחלקן פחות.
למשל tan-stack מהווה בחירה מועדפת אצל הרבה מפתחים
אם אתם מפתחים ב-vue תוכלו ולמצוא רשימה עדכנית כאן

בכל אופן מה שחשוב לדעת הוא שב-CSS מודרני קיימת גם אפשרות פשוטה יותר, שבמקרים רבים עושה את העבודה בצורה טובה מאוד:

content-visibility: auto

למיטב הבנתי זה לא בדיוק אותו דבר כמו וירטואליזציה מלאה (כמו שעושות ספריות), כי האלמנטים עדיין קיימים ב-DOM. אבל מבחינת ביצועים במקרים רבים זה מספיק טוב ואף פשוט יותר ליישום.

[dovid]

לפחות לפי הפתרון, הכותרת צריכה להיות וירטואליזציה בHTML גדולים, לא? מה אשם מי שלא מפתח בvue שיכול לפספס את העצה הנפלאה הזו שלא הכרתי! תודה!

[יגעתי ומצאתי]

יפה מאוד.
אגב, כדי למנוע מה-Scrollbar 'לקפוץ' בזמן הגלילה (כי הדפדפן לא יודע מראש את הגובה של האלמנטים המוסתרים), כדאי להוסיף גם את המאפיין contain-intrinsic-size. זה נותן לדפדפן הערכת גובה זמנית ואמור לטפל בסקרולבר.

[pcinfogmach]

@יגעתי-ומצאתי
טיפ מצויין
שים לב זה פותר את הבעיה רק אם יש לך גודל קבוע באלמנטים

[חצקעלע]

האם וירטואליזציה מצד השרת עדיפה על פני שימוש בספריות בצד הלקוח, מבחינת ביצועים, במיוחד כשאני מיישם Infinite Scroll – טעינה דינמית של פריטים נוספים מהשרת בעת הגעה לתחתית הדף?

[dovid]

@חצקעלע בהחלט חוסך,
מדובר פה במקרים שלא רוצים למממש Infinite Scroll
או בשביל לשמור על הדברים פשוטים או בשביל חוויית משתמש מהירה בהרבה.