המשתמשים רואים אם האתרים והאפליקציות לא פועלים כמו שצריך, ולכן חשוב מאוד שביצועי הרינדור יעברו אופטימיזציה!
משתמשי האינטרנט של היום מצפים שהדפים שבהם הם מבקרים יהיו אינטראקטיביים בצורה חלקה, וכאן צריך להשקיע יותר ויותר זמן ומאמצים. דפים לא אמורים להיטען במהירות, אלא גם להגיב במהירות לקלט של המשתמשים לכל אורך מחזור החיים שלהם. למעשה, ההיבט הזה של חוויית המשתמש הוא בדיוק מה שמודד את המדד Interaction to Next Paint (INP). טובה המשמעות של INP היא שדף מגיב באופן עקבי ואמין לבקשות המשתמשים לצרכים שלכם.
למרות שמרכיב עיקרי בגורם שגורם לדף להרגיש מהיר הוא, JavaScript שמפעילים בתגובה לאינטראקציות של משתמשים, מהם המשתמשים הצפויים הם שינויים חזותיים בממשק המשתמש. שינויים חזותיים של משתמש ממשקים הם תוצאה של מספר סוגי עבודה, שלרוב מכונים יחד לעיבוד, והעבודה הזו צריכה להתרחש בהקדם האפשרי כדי וחוויית המשתמש נראית מהירה ואמינה.
כדי לכתוב דפים שמגיבים במהירות לאינטראקציות של משתמשים, צריך להבין האופן שבו הדפדפן מטפל ב-HTML, ב-JavaScript וב-CSS, ולהבטיח שאתם כותבים, וכן כל קוד אחר של צד שלישי שהוספתם, פועל בצורה יעילה ככל האפשר.
הערה לגבי קצב הרענון של המכשיר
רוב המכשירים מרעננים היום את המסכים 60 פעמים בשנייה. בכל רענון יוצרת את הפלט החזותי שרואים, ונקרא בדרך כלל מסגרת. ב הדגמה של המושג 'פריימים':
למרות שמסך המכשיר מתרענן תמיד בקצב עקבי, אפליקציות יכול להיות שלא תמיד תצליח לייצר מספיק פריימים תואמים לקצב הרענון הזה. לדוגמה, אם יש אנימציה או מעבר פועל, הדפדפן צריך להתאים לקצב הרענון של המכשיר כדי ליצור בכל פעם שהמסך מתרענן.
בהתחשב בעובדה שתצוגה רגילה מתרעננת 60 פעמים בשנייה, יחשוף שלדפדפן יש 16.66 אלפיות שנייה כדי להפיק כל פריים. אך במציאות, לדפדפן יש תקורה משלו לכל פריים, כך שכל העבודה שלך צריכה להסתיים בתוך 10 אלפיות שנייה. אם לא ניתן מתאימים לתקציב הזה, קצב הפריימים יורד ומשתנה של תוכן הדף במסך. הזה התופעה הזו נקראת בדרך כלל jank.
עם זאת, היעדים שלכם משתנים בהתאם לסוג העבודה שאתם מנסים לבצע. עמידה בסף של 10 אלפיות שנייה היא חיונית לאנימציות, שבהן של אובייקטים במסך עוברים אינטרפולציה על פני סדרה של פריימים בין שני פריימים נקודות. כשמדובר בשינויים נפרדים בממשק המשתמש - כלומר, שעוברים ממצב אחד למצב אחר בלי תנועה באמצע – לבצע את השינויים האלה במסגרת זמן שמרגישה מיידית למשתמש. במקרים כאלה, המונח '100 אלפיות שנייה' הוא לעיתים קרובות, אבל ערך ה-INP הוא 'טוב' הוא 200 אלפיות שנייה או פחות כדי לספק מגוון רחב יותר של מכשירים עם יכולות שונות.
לא משנה מה המטרה שלכם, בין אם מדובר בהפקה של הפריימים הרבים שהאנימציות נדרשות כדי למנוע עומס יתר או רק ליצור שינוי חזותי מובחן בממשק המשתמש במהירות האפשרית — הבנה איך הפיקסל של הדפדפן היא חיונית לעבודה שלכם.
צינור עיבוד הנתונים של הפיקסלים
יש חמישה תחומים עיקריים שצריך להכיר ולשים לב אליהם עובדים כמפתחי אתרים. חמשת התחומים האלה הם הרלוונטיים ביותר וכל אחת מהן מייצגת נקודת מפתח בצינור עיבוד הנתונים של פיקסלים למסך:
- JavaScript:JavaScript בדרך כלל משמש לטיפול בעבודה
שינויים חזותיים בממשק המשתמש. לדוגמה, זו יכולה להיות כתובת ה-URL של jQuery
animate, מיון מערך נתונים או הוספת רכיבי DOM לדף. עם זאת, JavaScript אינו הכרחי אך ורק כדי להפעיל שינויים חזותיים: שירות CSS אנימציות , מעברי CSS ו-ממשק ה-API של Web Animations API יכולים להוסיף אנימציה של תוכן הדף. - חישובי סגנון: זהו התהליך של מציאת כללי ה-CSS.
להחיל אילו רכיבי HTML מבוססים על סלקטורים תואמים. לדוגמה,
.headlineהוא דוגמה לסלקטור ב-CSS שחל על כל רכיב HTML עם ערך מאפייןclassשמכיל מחלקה שלheadline. מאת שם, לאחר שהכללים ידועים, הם מוחלים, והסגנונות הסופיים של כל אחד מהם של רכיבים מחושבים. - פריסה: לאחר שהדפדפן יודע אילו כללים חלים על רכיב, הוא יכול
מתחילים לחשב את הגיאומטריה של הדף, למשל את שטח הרכיבים
ואיפה הם מופיעים על המסך. המשמעות של מודל הפריסה של האינטרנט
שרכיב אחד יכול להשפיע על אחרים. לדוגמה, הרוחב של
<body>לרוב משפיע על הממדים של רכיבי הצאצא שלו עד הסוף במורד העץ, כך שהתהליך עשוי להיות מעורב במידה מסוימת בדפדפן. - צבע: ציור הוא תהליך של מילוי פיקסלים. זה כולל שרטוט טקסט, צבעים, תמונות, גבולות, צלליות ולמעשה כל תמונה היבט של הרכיבים לאחר חישוב הפריסה שלהם בדף. בדרך כלל, השרטוט מבוצע על מספר משטחים, שנקראים בדרך כלל שכבות.
- מורכב: מאחר שחלקי הדף עשויים להיות מוצגים כמה שכבות, צריך להחיל אותן על המסך בסדר הנכון שהדף מעובד כמצופה. זה חשוב במיוחד בנוגע לאלמנטים שחופפות לרכיב אחר, כי טעות עלולה לגרום להופעה של רכיב אחד מעל אחרת באופן שגוי.
כל אחד מהחלקים האלה בצינור עיבוד הנתונים של הפיקסלים מייצג הזדמנות להציג איטיות באנימציות או לעכב את ציור הפריימים גם ברכיבים חזותיים מובחנים שינויים בממשק המשתמש. לכן חשוב להבין במדויק אילו חלקים בצינור עיבוד הנתונים מפעילים, ולבדוק אם אפשר להגביל את השינויים רק לחלקים בצינור עיבוד הנתונים של הפיקסלים שנחוצים לעבד אותם.
אולי שמעת את המונח 'יצירת רשת נקודות' משמש בשילוב עם " Paint". הזה כי ציור הוא למעשה שתי משימות:
- נוצרת רשימה של שיחות משיכה.
- מילוי הפיקסלים.
השיטה השנייה נקראת 'רסטרזציה', כך שבכל פעם שרואים רשומות צבע כלי פיתוח, מבחינתכם, הם כוללים יצירת רשת נקודות. בחלק מהמקרים של ארכיטקטורת רסטר, אבל זה לא בשליטתכם כמפתח.
לא תמיד צריך לגעת בכל חלק בצינור עיבוד הנתונים בכל פריים. למעשה, יש שלוש דרכים שבהן צינור עיבוד הנתונים פועל בדרך כלל כשאתם מבצעים שינוי חזותי באמצעות JavaScript, CSS או אתר האינטרנט ממשק API של אנימציות.
1. JS / CSS > סגנון > פריסה > צבע > קלט מורכב
אם אתם משנים 'פריסה' מאפיין, כמו שמשנה את המאפיינים
גיאומטריה כמו רוחב, גובה או המיקום (למשל left או top CSS).
מאפיינים), הדפדפן צריך לבדוק את כל הרכיבים האחרים ולבצע "הזרמה חוזרת" ה
הדף הזה. צריך לצבוע מחדש את האזורים המושפעים ולצבוע אותם מחדש
יהיה צורך להרכיב בחזרה אותם.
2. JS / CSS > סגנון > צבע > קלט מורכב
אם ביצעתם שינויים במצב 'ציור בלבד' לרכיב ב-CSS, לדוגמה,
כמו background-image, color או box-shadow – שלב הפריסה
אין צורך לבצע עדכון חזותי בדף. השמטת הפריסה
כשאפשר, נמנעים מעבודת פריסה שעלולה להיות יקרה
אחרת תרם לזמן אחזור משמעותי ביצירת הפריים הבא.
3. JS / CSS > סגנון > קלט מורכב
אם אתם משנים נכס שלא דורש פריסה או צבע, הדפדפן יכולים לקפוץ ישירות לשלב היצירה. זהו הפריט הזול ביותר לנתיב הרצוי דרך צינור עיבוד הנתונים של פיקסלים לנקודות לחץ גבוה במחזור החיים של הדף, כמו אנימציות או גלילה. עובדה משעשעת: Chromium מבצע אופטימיזציה של הדף כך שהיא תתבצע אך ורק בשרשור של המחבר, כלומר, גם אם דף לא מגיב, עדיין ייתכן לגלול את הדף כדי לראות חלקים ממנו שצוירו קודם לכן אל המסך.
ביצועים באינטרנט הם אומנות להימנע מעבודה, תוך הגברת היעילות בכל עבודה נחוצה ככל האפשר. במקרים רבים, מדובר בעבודה באמצעות הדפדפן, לא כנגדו. כדאי לזכור שהעבודה שהוצגו קודם לכן בצינור עיבוד הנתונים, שונה מבחינת העלות החישובית. חלק מטבען, משימות יקרות יותר מאחרות!
בואו נתעמק בחלקים השונים של צינור עיבוד הנתונים. נבדוק את הבעיות הנפוצות, וגם איך לאבחן ולפתור אותן.
אופטימיזציות של רינדור דפדפן
ביצועים חשובים למשתמשים, וכדי לבנות חוויות משתמש טובות, מפתחי אתרים צריך לבנות אתרים שמגיבים במהירות לאינטראקציות של המשתמשים ולרינדור בצורה חלקה. מומחה הביצועים Paul Lewis נמצא כאן כדי לעזור לכם להרוס את jank ליצור אפליקציות אינטרנט ששומרות על ביצועים של 60FPS. יציאה בקורס הזה עם הכלים הנדרשים כדי ליצור פרופילים לאפליקציות ולזהות את הגורמים וביצועי רינדור לא אופטימליים. אפשר גם לבדוק את העיבוד של הדפדפן ולחשוף דפוסים שמקלים על הבנייה של אתרים מהירים שהמשתמשים יאהבו להשתמש בהם.
זהו קורס חינמי שמוצע דרך Udacity, ואפשר להשתתף בו מתי שרוצים.