מה אתם יודעים על המנוע הגרפי של הדפדפן?

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

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

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

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

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

לנהל תהליכים בו זמנית

ההרצאה מתחילה בסקירת שלושת התהליכים המרכזיים שפועלים במנוע הגרפי. הראשון הוא הסגנון (style), הכולל את ה-Dom, ה-CSS שלנו וכן הגדרות לגבי התנהגות כמו מעברי עכבר וכדומה (state). המנוע מנתח את כלל המידע שנאסף ובאמצעותו קובע את הנראות הסגנונית של כל רכיב באתר.

התהליך השני הוא מבנה (layout). המבנה מביא בחשבון 3 דברים: הראשון הוא התוכן, השני הוא החוקים שהוגדרו ב-CSS והשלישי הוא המסך (viewport). המבנה הוא תהליך מורכב הכולל אינספור חישובים, ולמעשה אחראי על הגדרת היחסים בין האלמנטים השונים שעל המסך ותרגומם לנקודות אבסולוטיות. לתהליך הזה ניתן להתייחס כשכבת המורכבות (complexity) של רשת האינטרנט.

התהליך השלישי הוא ציור (paint), האחראי על שינוי הפיקסלים על המסך באמצעות LCD שמזרים וולטאז’ שונה לכל פיקסל ופיקסל. תהליך זה אחראי גם כיצד ייראה טקסט על המסך, על כל האפשרויות הבלתי נגמרות לשליטה ועל טיפול בטקסט ב-CSS. בפעולות מורכבות במיוחד בתהליך הצביעה בא לעזרתנו תהליך ה-compositing, שלוקח פעולות ציור מורכבות ועושה להן אופטימיזציה, למשל לקיחת אזור שלם על המסך והפיכתו לבלוק שניתן להעתיק.

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

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

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

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

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

כתב אורח

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

הגב

5 Comments on "מה אתם יודעים על המנוע הגרפי של הדפדפן?"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 
Sort by:   newest | oldest | most voted
אני
Guest

לא מבין אם כול הטכנולוגיה איך האתרים ב wix עולים כזה לאט….

אנונימי
Guest

לא שאני מומחה גדול לאנגלית אבל היה עדיף שהיה עושה את ההרצאה בעברית
היה יותר ברור.. הוא נשמע כאילו נגמר לו האוויר.

א ב
Guest

לפעמים המארגנים מפתיעים את המרצים, ואומרים להם באותו הרגע שצריך להרצות באנגלית ולא בעברית. וגם מתרגשים, אתה יודע…

מוגלי
Guest

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

נעמה
Guest

הייתי בסדנה הזו, היה מעולה, אז מה עם האנגלית לא שפת שלו…

wpDiscuz

תגיות לכתבה: