hide או remove

[shpro654]

ב-js
יש לי הרבה דיבים בדף, המשתמש מחפש דיב מסוים - ואז אני מציג רק אותו
מה הדרך הנכונה?
hide לכל הדיבים. וכשמבטל את הסינון - show
או שיש עדיפות כלשהיא לעשות להם remove, ואחר-כך לצייר אותם מחדש

[dovid]

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

[WWW]

@dovid אין פה שיקול של זכרון?
בהרבה אתרים מודרניים עם כמות נתונים גבוהה, יש רינדור כל הזמן בגלילה.
(כמו כאן בפורום).

[shpro654]

אשמח לשמוע את תשובתו של @dovid
אבל גם אם עושים רינדור בגלילה, השאלה היתה על מה שכבר רונדר.

[yossiz]

@dovid אמר בhide או remove:

אבל זה מחשבה שלא נשענת על כלום חוץ מסברא

מה יכול להיות יותר טוב מסברא טובה? סברא דאורייתא!

@WWW אמר בhide או remove:

בהרבה אתרים מודרניים עם כמות נתונים גבוהה, יש רינדור כל הזמן בגלילה.

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

[avr416]

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

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

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

כאן יש תשובה שמסבירה את סדר הרינדור של הדפדפן (בניית הדום, פריסה וצביעה).

כאן יש דיון על השאלה הזאת, אבל מהערות שם נראה שהדברים אינם מוסכמים.. (למיטב הבנת האנגלית שלי..)

[dovid]

@avr416 אמר בhide או remove:

@yossiz הסרה מהדום זה לא שתי פעולות זה פעולה אחת.

@yossiz התכוון שהדפדפן יבצע יותר מפעולה אחת, שאם בהסתרה יש פעולת ציור, אז בהכרח גם בהסרה יש את הפעולה הזו של הציור מחדש. אז יוצא שיש גם ציור וגם עוד משהו.

[WWW]

@yossiz אמר בhide או remove:

נראה לי שהם עושים את זה רק כאשר מטעינים נתונים מהרשת, כדי להקל על תעבורת הרשת (ועל ה-DB, אולי?). אם הנתונים כבר קיימים נראה לי שיותר יעיל להשאיר אותם ורק להסתיר.

אני מדבר על נתונים שכבר נמצאים באוביקט JS.
ואני חושב שגם כאן בפורום כשאתה גולל מטה, החומר הישן באיזשהו שלב נעלם.

מה שברור שזה תלוי בכמה נתונים מדובר.

אני כתבתי אתר שהכיל טבלה עם כמה אלפי שורות, כל שורה בטבלה זה כמה דיבים, ולספריה שמה יש רינדור מלא גם בגלילה ימינה ושמאלה.
אם לא זה פשוט לא יעבוד על טאבלטים וכדו'.

[WWW]

@shpro654 אמר בhide או remove:

אבל גם אם עושים רינדור בגלילה, השאלה היתה על מה שכבר רונדר.

כפי שכתבתי.
גם כאן בפורום, גם לאחר שרונדר, זה נמחק בגלילה מטה, וחוזר ונכתב בגלילה חזרה מעלה.

[shpro654]

ואם כבר, אז, איך באמת עושים את הרינדור הזה?

[avr416]

@shpro654 קוראים לזה virtual-scroll או בעברית גלילה וירטואלית.

דהיינו מחשבים את הגודל של המסך, וכמה אלמנטים בערך נכנסים בו, ואז נניח טוענים פי 2 אלמנטים, כדי לתת לך תחושה של גלילה חלקה, ושלא תרגיש את הטעינה מהשרת הרבה. ואז כשאתה גולל, הוא טוען עוד וכן על זו הדרך.

אכן כמו ש@yossiz אמר עושים זאת מאחת מ2 סיבות: א. להקל על השרת, (לא לטעון סתם נתונים מיותרים, ולקצר את העבודה שלו).
ב. להקל על הדפדפן שלא יצטרך לרנדר סתם אלפי שורות שא"א לא צריך.. (לא שמעניין מישהו הדפדפן, אבל מעניין אותנו שהאתר יגיב מהר ללקוח).

כמו כן, אפשר להשתמש בגלילה וירטואלית גם לנתונים שכבר יש לך בJS ואתה לא צריך לטעון מהשרת.
באנגולר, יש לך רכיבים שמיועדים לזה, ומאמין שגם בעוד ספריות.