כדי להשיג קצב פריימים חלק כמו משי, חשוב מאוד להימנע מצבעים, במיוחד בניידים. עם זאת, לפעמים מופיעים צבעים במקומות הכי יוצאי דופן. במאמר הזה מוסבר למה קובצי GIF מונפשים יכולים לגרום להצגת צבעים מיותרים, ומה אפשר לעשות בקלות בעזרת הפתרון הזה.
שכבות של אהבה
כפי שאתה ודאי יודע, דפדפנים מודרניים עשויים לצבוע קבוצות של רכיבי DOM ל "תמונות" נפרדות, הנקראות שכבות. לפעמים יש שכבה אחת לכל הדף, ולפעמים יש מאות, או במקרים נדירים – אלפים.
כשרכיבי DOM מקובצים בשכבה ואחד מהאלמנטים משתנה מבחינה חזותית, בסופו של דבר אנחנו צריכים לצבוע לא רק את הרכיב שהשתנה, אלא גם את כל שאר הרכיבים בשכבה שחופפים לאלמנט שהשתנה. ציור של דבר אחד על אחר גורם לכך שהפיקסלים שהוחלפו "הולכים לאיבוד" לצמיתות. אם אתה רוצה להחזיר את הפיקסלים המקוריים, עליך לצבוע אותם מחדש.
לכן, לפעמים אנחנו רוצים לבודד רכיב אחד מהרכיבים האחרים כך שכאשר הוא נצבע, לא נצטרך לצבוע מחדש את הרכיבים האחרים שלא השתנו. לדוגמה, כשמשלבים כותרת דף קבועה עם תוכן שניתן לגלול, צריך לצבוע מחדש את הכותרת בכל פעם שהתוכן נגלל, וגם את התוכן החדש שמוצג. מיקום הכותרת בשכבה נפרדת מאפשר לדפדפן לבצע אופטימיזציה של הגלילה. בזמן הגלילה, הדפדפן יכול להזיז את השכבות - כנראה בעזרת ה-GPU - ולהימנע מצביעה מחדש של אחת מהשכבות.
כל שכבה נוספת מגדילה את צריכת הזיכרון ומוסיפה תקורת ביצועים, כך שהמטרה היא לקבץ את הדף בכמה שפחות שכבות, תוך שמירה על ביצועים טובים.
איך כל זה קשור לקובצי GIF מונפשים?
בואו נסתכל על התמונה הזו:
זוהי אפשרות להגדרת שכבות עבור אפליקציה פשוטה. יש כאן ארבע שכבות: שלוש מהן (שכבות 2 עד 4) הן רכיבים בממשק; השכבה האחורית היא רכיב טעינה, שהיא בעצם קובץ GIF מונפש. בתהליך הטעינה הרגיל, מציגים את הטוען (שכבה 1) בזמן שהאפליקציה נטענת, ובסיום יוצגו השכבות האחרות. אבל הנה המפתח: עליך להסתיר את ה-GIF המונפש.
אבל למה עלי להסתיר אותו?!
שאלה טובה. בעולם מושלם, הדפדפן פשוט יבדוק בשבילכם את החשיפה של ה-GIF וימנע יצירה אוטומטית. לצערנו, בדיקה אם ה-GIF המונפש מוסתר או גלוי במסך בדרך כלל יקר יותר מאשר סתם ציור שלו, לכן הוא נצבע.
במקרה הטוב ביותר, קובץ ה-GIF נמצא בשכבה משלו והדפדפן צריך רק לצבוע ולהעלות אותו ל-GPU. אבל במקרה הגרוע ביותר, כל האלמנטים שלכם יקובצו לשכבה אחת והדפדפן יצטרך לצבוע מחדש כל רכיב בודד. בסיום הפעולה, עדיין צריך להעלות את כל הנתונים ל-GPU. כל הפעולות האלה מתבצעות עבור כל פריים של GIF, למרות העובדה שהמשתמש אפילו לא יכול לראות את ה-GIF.
במחשבים שולחניים, סביר להניח שאפשר להתחמק מהתנהגות ציור מהסוג הזה, כי המעבדים (CPU) ומעבדי ה-GPU הם יותר חזקים, ויש רוחב פס גדול להעברת נתונים בין השניים. לעומת זאת בנייד, ציור הוא יקר מאוד ולכן צריך לנהוג בזהירות.
על אילו דפדפנים זה משפיע?
כמו בדרך כלל, ההתנהגות משתנה בין דפדפנים. כיום, כל הצבעים של Chrome, Safari ו-Opera מתבצעים מחדש, גם אם ה-GIF מוסתר. לעומת זאת, ב-Firefox, המערכת מזהה שקובץ ה-GIF מוסתר ואין צורך לצבוע אותו מחדש. Internet Explorer נותר סוג של קופסה שחורה, ואפילו ב-IE11 - מאחר שהכלים של F12 עדיין מפותחים - לא ניתן לדעת אם מתבצעת צביעה מחדש כלשהי.
איך אפשר לדעת אם נתקלתי בבעיה הזו?
הדרך הקלה ביותר היא להשתמש באפשרות 'הצגת מלבני צבע' בכלי הפיתוח ל-Chrome. טוענים את כלי הפיתוח ומקישים על גלגל השיניים בפינה השמאלית התחתונה (
) ובוחרים באפשרות הצגת מלבנים של צבע בקטע רינדור.
עכשיו כל מה שעליך לעשות הוא לחפש מלבן אדום כמו:
התיבה האדומה הקטנה במסך מראה ש-Chrome צובע מחדש משהו. חשוב לדעת שיש GIF של טוען שמוסתר מאחורי הרכיבים האחרים. לכן, כשאתם רואים תיבה אדומה כמו זו, עליכם להסתיר את האלמנטים הגלויים ולבדוק אם ה-GIF המונפש ממשיך להסתובב. במקרה כזה, צריך לפתוח קובץ CSS או JavaScript כדי להחיל את display: none או visibility: hidden עליו או על רכיב ההורה שלו. כמובן, אם זו רק תמונת רקע, צריך להסיר אותה.
אם אתם רוצים לראות דוגמה להתנהגות כזאת באתר פעיל, עיינו ב-Allegro, בתמונה של כל מוצר מופיע קובץ GIF לטעינה, מוסתר ולא מפורשות.
סיכום
כדי להגיע ל-60FPS, צריך לעשות רק את מה שנחוץ לעיבוד הדף ולא יותר. הסרת צבעים מיותרים היא שלב קריטי להשגת מטרה זו. קובצי GIF מונפשים שנשארים פועלים יכולים להפעיל צבעים מיותרים, שאפשר למצוא ולנפות באגים בקלות באמצעות הכלי 'הצגת מלבנים של צבע' של כלי הפיתוח.
עכשיו לא השארתם את קובץ ה-GIF המונפש של טעינת החתלתולים פועל לתמיד, נכון?