5 טיפים שיהפכו את גלריית המובייל למהירה בהרבה

300 שורות קוד ויום עבודה אחד – זה כל מה שנדרש לנעם רוזנטל, ראש צוות ב-Mobile Editor של Wix Engineering, לייצר חוויית צפייה מהירה בגלריה של 8,000 תמונות

מאת נעם רוזנטל

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

לאתגר הזה יש אלטרנטיבה. בהרצאתו מסביר נעם רוזנטל, ראש צוות ב-Mobile Editor של Wix Engineering, כיצד בעזרת 5 “טריקים” תוכלו לשמור על חוויית המשתמש בעת ה-scrolling ולמנוע מהדפדפן לקרוס אפילו עם גלריה של למעלה מ-8,000 תמונות. איך בדיוק? הנה הצצה:

1. Prominent color

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

2. Layered Viewport Management

את הטריק הזה מומלץ ליישם בכל פעם שיש לנו “הרבה דברים על המסך”, וזה גם הפתרון החשוב ביותר שהוא מדבר עליו בהרצאה. לאחר שמחשבים בצורה האוריסטית היכן ה-viewport נמצא באותו רגע ועושים buffer למסך, מפרט נעם כיצד הוא יוצר layers עם buffers גדולים יותר, כדי שגם בגלילה מהירה מאוד המשתמשים יוכלו לראות את התמונות ולקבל חוויית משתמש איכותית, גם אם מדובר באיכות תמונה נמוכה יותר. ניהול נכון של viewport באמצעות scroll events עם מספר כזה של layers יכול לספק חוויה שמשתנה בהתאם למהירות הגלילה, והכל נעשה עם מספר קבוע ומקסימלי של DOM elements, ובמקרה הזה מקסימום 555.

3. Direct Compositing

את הטריק השלישי נעם עזר להכניס ל-safari, ובינתיים גם chrome צירפו אותו. הוא למעשה עוזר לדפדפן להשתמש בהרבה פחות זיכרון על ידי כך שהוא פוטר את הקומפוזיטור מהעתקה של תמונה על ה-cutout, ובמקום זאת מפנה אותו ישר לזיכרון של התמונה שכבר קיים. אבל היופי ב-direct compositing לא מוגבל רק לתמונות: כשהדפדפן מתייחס לתמונות, קנבס או וידאו באופן ישיר, לא די בכך שהוא לא יוצר עבורם זיכרון חדש, הוא גם לא מאפשר ציורים לתוך buffer, אלא נקודות ל-JPU.

4. Background image caching

ישנה טכנולוגיה חדשה שמאפשרת לנו לעשות caching חכם בתוך הדפדפן – service workers, אבל לרוע המזל היא לא עובדת על safari. בינתיים אפשר לעבוד בשיטה הישנה, על ידי הורדה של התמונה ב-worker כבלוב ושמירתה ל-IndexedDB. כאן, מדגיש נעם, יש שתי תועלות חשובות:

– ל-IndexedDB אין הגבלה של storage ולכן הוא מצוין כ-caching strategy.

– ה-IndexedDB עובד across workers. כלומר, אפשר להשתמש באותו data base ב-IndexedDB בין ה-main page לבין ה-workers שלו, ולמרות שה-IndexedDB בעצמו הוא לא בהכרח הכי מהיר, הוא בהחלט חוסך לנו קריאות לרשת ולכן שווה את המאמץ.

5. translate

הטריק האחרון בהרצאתו של נעם פותר בעיה חוזרת ב-viewport management, ומתקן את ה-body לגודל הנכון בעזרת translate לתמונה האחרונה. אבל זה לא הדבר היחיד שאפשר לעשות עם translate, ונעם גם מפרט איך הפך בעזרתו את הגלריה שלו לרספונסיבית, ללא גדלים קבועים.

הכתבה בחסות Wix Engineering

Wix היא פלטפורמה לפיתוח Online presence באינטרנט, עם למעלה מ-120 מיליון משתמשים ב-190 מדינות. אנחנו ב-Wix Engineering מפתחים אפליקציות ענן מהמתקדמות בעולם, מקדישים זמן להתפתחות מקצועית ולמידה ולוקחים גם את ההנאה שלנו באותה הרצינות. תרבות הפיתוח שלנו מבוססת על חדשנות, יצירתיות ועל הצורך והרצון להמשיך לאתגר את עצמנו ואת גבולות הטכנולוגיה. אנו משתמשים בטכנולוגיות המתקדמות ביותר (Scala, Node, React, and Angular), בפלטפורמות מבוססות ענן (Google, Amazon and Azure) ומיישמים מתודולוגיות כגון Continuous Delivery ו-TDD. ל-Wix, שני מרכזי פיתוח בישראל - בתל-אביב ובבאר-שבע. מוזמנים לעקוב אחרינו גם ב-Twitter וב-Facebook.

כתב אורח

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

הגב

Be the First to Comment!

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
wpDiscuz

תגיות לכתבה: