העצים CSSOM ו-DOM משתלבים לעץ עיבוד שמשמש לחישוב הפריסה של כל רכיב גלוי ומשמש כקלט לתהליך הצבע שמעבד את הפיקסלים למסך. כדי להשיג ביצועי רינדור אופטימליים, חשוב מאוד לבצע אופטימיזציה של כל אחד מהשלבים האלה.
בקטע הקודם על בניית מודל האובייקטים, בנינו את העצים DOM ו-CSSOM על סמך קלט ה-HTML וה-CSS. עם זאת, שני האובייקטים האלה הם אובייקטים עצמאיים שמתעדים היבטים שונים של המסמך: האחד מתאר את התוכן, והשני מתאר את כללי הסגנון שצריך להחיל על המסמך. איך אנחנו ממזגים את שניהם וגורמים לדפדפן לעבד פיקסלים במסך?
סיכום
- העצים DOM ו-CSSOM משולבים כדי ליצור את עץ העיבוד.
- עץ העיבוד מכיל רק את הצמתים הנדרשים לעיבוד הדף.
- הפריסה מחשבת את המיקום והגודל המדויקים של כל אובייקט.
- השלב האחרון הוא צבע, שמקבל את עץ העיבוד הסופי ומעבד את הפיקסלים במסך.
ראשית, הדפדפן משלב את DOM ו-CSSOM ל "עץ עיבוד", שמתעד את כל תוכן ה-DOM הגלוי בדף ואת כל פרטי סגנון ה-CSSOM של כל צומת.
כדי לבנות את עץ העיבוד, הדפדפן מבצע בערך את הפעולות הבאות:
החל מהשורש של עץ ה-DOM, חוצים כל צומת גלוי.
- צמתים מסוימים אינם גלויים (לדוגמה, תגי סקריפט, מטא תגים וכן הלאה) והם מושמטים מפני שהם לא באים לידי ביטוי בפלט המעובד.
- חלק מהצמתים מוסתרים באמצעות CSS וגם מושמטים מעץ העיבוד. לדוגמה, צומת ה-span (בדוגמה שלמעלה) חסר בעץ העיבוד כי יש לנו כלל מפורש המגדיר בו את המאפיין display: none.
עבור כל צומת גלוי, מוצאים את כללי CSSOM המתאימים ומחילים אותם.
פלט צמתים גלויים עם תוכן והסגנונות המחושבים שלהם.
הפלט הסופי הוא עץ עיבוד שמכיל את פרטי התוכן וגם את פרטי הסגנון של כל התוכן הגלוי במסך. אחרי שעץ העיבוד נמצא במקום, נוכל להמשיך לשלב ה "פריסה".
עד עכשיו, חישבנו אילו צמתים צריכים להיות גלויים ואת הסגנונות המחושבים שלהם, אבל לא חישבנו את המיקום והגודל המדויקים שלהם באזור התצוגה של המכשיר - זהו שלב ה"פריסה", שנקרא גם "הזרמה".
כדי לדעת מה הגודל והמיקום המדויקים של כל אובייקט בדף, הדפדפן מתחיל בשורש של עץ העיבוד וחוצה אותו. נבחן דוגמה פשוטה ומעשית:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
גוף הדף שלמעלה מכיל שני תווי div מקננים: הראשון (הורה) div מגדיר את גודל התצוגה של הצומת ל-50% מרוחב אזור התצוגה, וה-div השני, שהכיל על ידי ההורה, מגדיר את הרוחב שלו ל-50% מגודל ההורה שלו, כלומר 25% מרוחב התצוגה.
הפלט של תהליך הפריסה הוא "מודל תיבה", שמתעד במדויק את המיקום והגודל המדויקים של כל רכיב באזור התצוגה: כל המדידות היחסיות מומרות לפיקסלים מוחלטים במסך.
לבסוף, עכשיו כשאנחנו יודעים אילו צמתים גלויים, ואת הסגנונות והגיאומטריה המחושבים, אפשר להעביר את המידע הזה לשלב האחרון, שממיר כל צומת בעץ העיבוד לפיקסלים בפועל במסך. שלב זה נקרא בדרך כלל "ציור" או "יצירת רסטר".
הפעולה הזו עשויה להימשך זמן מה, כי הדפדפן צריך לעשות עבודה רבה. עם זאת, כלי הפיתוח ל-Chrome יכולים לספק תובנות מסוימות לגבי כל שלושת השלבים שמתוארים למעלה. נבחן את שלב הפריסה בדוגמה המקורית של "שלום עולם":
- האירוע 'Layout' (פריסה) מתעד את מבנה עץ העיבוד, המיקום וחישוב הגודל בציר הזמן.
- בסיום הפריסה, הדפדפן יוצר אירועים מסוג 'הגדרת צבע' ו'צבע', שממירים את עץ העיבוד לפיקסלים על המסך.
הזמן הנדרש לבנייה של עץ העיבוד, הפריסה והצביעה משתנה בהתאם לגודל המסמך, לסגנונות שהוחלו ולמכשיר שבו הוא מופעל: ככל שהמסמך גדול יותר, כך העבודה רבה יותר בדפדפן. ככל שהסגנונות מורכבים יותר, כך נדרש יותר זמן לצביעה (לדוגמה, צבע אחיד הוא 'זול' לצביעה ואילו הטלת צללית היא 'יקרה' מבחינת החישוב והעיבוד).
הדף מופיע סוף סוף באזור התצוגה:
הנה סיכום קצר של שלבי הדפדפן:
- לעבד תגי עיצוב של HTML ולבנות את עץ ה-DOM.
- מעבדים תגי עיצוב של CSS ויוצרים את עץ ה-CSSOM.
- משלבים את ה-DOM וה-CSSOM לעץ עיבוד.
- הפעל את הפריסה בעץ העיבוד כדי לחשב את הגיאומטריה של כל צומת.
- צובעים את הצמתים הספציפיים במסך.
דף ההדגמה שלנו אולי נראה פשוט, אבל הוא דורש לא מעט עבודה. אם ה-DOM או ה-CSSOM השתנו, יהיה עליך לחזור על התהליך כדי לקבוע אילו פיקסלים יהיה צורך לעבד מחדש במסך.
אופטימיזציה של נתיב הרינדור הקריטי היא התהליך של צמצום משך הזמן הכולל שהוקדש לביצוע שלבים 1 עד 5 ברצף שלמעלה. פעולה זו מאפשרת לעבד תוכן במסך במהירות האפשרית, ומפחיתה את משך הזמן שחולף בין עדכוני המסך לאחר העיבוד הראשוני. כלומר, קצב רענון גבוה יותר של תוכן אינטראקטיבי.