דף זה תורגם על ידי Cloud Translation API.

ביצועי הרינדור

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

פול לואיס

המשתמשים בימינו מצפים שהדפים שבהם הם מבקרים יהיו אינטראקטיביים וחלקים, וזה המקום שבו אתם צריכים להקדיש יותר ויותר זמן ומאמץ. דפים לא צריכים רק להיטען במהירות, אלא גם להגיב במהירות לקלט של משתמשים לכל אורך מחזור החיים שלהם. למעשה, ההיבט הזה בחוויית המשתמש הוא בדיוק מה מודד המדד Interaction to Next Paint (INP). המשמעות של INP טובה היא שדף הגיב באופן עקבי ואמין לצרכים של המשתמש.

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

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

הערה לגבי קצב הרענון של המכשיר

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

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

מסגרות כפי שמוצג בחלונית הביצועים של כלי הפיתוח ל-Chrome. כשהסמן עובר מעל רצועת השקפים בסמוך לחלק העליון, ייצוג מוגדל של כל פריים מוצג בתוך הסבר קצר, כשתפריט ניווט בנייד הופך למצב ה"פתוח" שלו.

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

מכיוון שתצוגה טיפוסית מרעננת 60 פעמים בשנייה, חישובים מתמטיים מהירים יגלו שלדפדפן יש 16.66 אלפיות השנייה ליצור כל פריים. אבל במציאות, לדפדפן יש תקורה משלו לכל פריים, כך שכל העבודה שלכם צריכה להסתיים תוך 10 אלפיות השנייה. אם לא תעמדו בתקציב, קצב הפריימים יירד ותוכן הדף ישתנה במסך. התופעה הזו נקראת בדרך כלל jank.

עם זאת, היעדים משתנים בהתאם לסוג העבודה שמנסים לעשות. עמידה בסף של 10 אלפיות השנייה היא חיונית לאנימציות, שבהן האובייקטים על המסך מאופיינים באינטרפולציה על סדרה של פריימים בין שתי נקודות. בכל הנוגע לשינויים מובחנים בממשק המשתמש - כלומר, מעבר ממצב אחד למצב אחר ללא תזוזה באמצע - מומלץ לבצע את השינויים האלה במסגרת זמן שנראית למשתמש באופן מיידי. במקרים כאלה, הערך של 100 אלפיות השנייה הוא נתון מצוטט לעיתים קרובות, אבל הסף 'הטוב' של מדד ה-INP הוא 200 אלפיות השנייה או פחות, על מנת להתאים למגוון רחב יותר של מכשירים עם יכולות שונות.

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

צינור עיבוד הנתונים של פיקסלים

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

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

JavaScript: בדרך כלל משתמשים ב-JavaScript לטיפול בפעולות שגורמות לשינויים חזותיים בממשק המשתמש. לדוגמה, זה יכול להיות הפונקציה animate של jQuery, מיון מערך נתונים או הוספת רכיבי DOM לדף. עם זאת, השימוש ב-JavaScript אינו הכרחי בהכרח כדי להפעיל שינויים חזותיים: הנפשות CSS, מעברי CSS ו-Web Animations API יכולים ליצור אנימציה של תוכן הדף.
חישובי סגנון: זהו התהליך שבו מבררים אילו כללי CSS חלים על רכיבי HTML על סמך סלקטורים תואמים. לדוגמה, .headline הוא דוגמה לסלקטור ב-CSS שחל על כל רכיב HTML עם ערך מאפיין class שמכיל מחלקה של headline. לאחר מכן, אחרי שמגדירים כללים, המערכת מחילה אותם ומחשבים את הסגנונות הסופיים של כל רכיב.
פריסה: אחרי שהדפדפן יודע אילו כללים חלים על רכיב, הוא יכול להתחיל לחשב את הגיאומטריה של הדף, למשל כמה רכיבים נכללים במרחב ואיפה הם מופיעים על המסך. המשמעות של מודל הפריסה של האינטרנט היא שרכיב אחד יכול להשפיע על אחרים. לדוגמה, הרוחב של הרכיב <body> בדרך כלל משפיע על המידות של רכיבי הצאצא שלו לאורך ולאורך העץ, כך שהתהליך יכול להיות מעורב במידה רבה בדפדפן.
צבע: ציור הוא תהליך המילוי של פיקסלים. התהליך כרוך בשרטוט טקסט, צבעים, תמונות, גבולות וצלליות, ולמעשה כל היבט ויזואלי של האלמנטים לאחר חישוב הפריסה בדף. בדרך כלל השרטוט מתבצע על פני מספר משטחים, שנקראים לעיתים קרובות שכבות.
מורכב: יכול להיות שחלקים בדף נמשכו אל מספר שכבות, ולכן צריך להחיל אותם על המסך בסדר הנכון כדי שהדף יוצג כצפוי. הדבר חשוב במיוחד לרכיבים שחופפים לרכיבים אחרים, מכיוון שטעות עלולה לגרום לכך שרכיב אחד יופיע מעליו באופן שגוי.

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

ייתכן ששמעתם את המונח "rasterize" (יצירת רסטר) בשילוב עם "ציור". הסיבה לכך היא שציור הוא למעשה שתי משימות:

יצירת רשימה של קריאות ציור.
הפיקסלים ממלאים.

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

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

1. JS / CSS > סגנון > פריסה > צבע > מרוכב

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

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

2. JS / CSS > סגנון > צבע > מרוכב

צינור עיבוד הנתונים של הפיקסלים ששלב הפריסה הושמט.

אם שיניתם מאפיין לצביעה בלבד של רכיב ב-CSS – לדוגמה, מאפיינים כמו background-image, color או box-shadow – שלב הפריסה לא הכרחי על מנת ליצור עדכון חזותי בדף. על ידי השמטת שלב הפריסה, כשהדבר אפשרי, נמנעים מעבודה על פריסה שעלולה להיות יקרה, אחרת זמן האחזור היה משמעותי כדי ליצור את הפריים הבא.

3. JS / CSS > סגנון > מרוכב

צינור עיבוד הנתונים של הפיקסלים ללא שלבי הפריסה ושלבי הצבע.

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

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

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

אופטימיזציות לעיבוד בדפדפן

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

זהו קורס חינמי שמוצע דרך Udacity ואפשר להשתתף בו מתי שרוצים.