תאריך פרסום: 31 במרץ 2014
עצי ה-CSSOM ו-DOM משולבים בעץ רינדור, שמשמשים לאחר מכן לחישוב הפריסה של כל רכיב גלוי, ומשמש כקלט לתהליך הציור שמרינדור את הפיקסלים למסך. האופטימיזציה של כל אחת מהאפשרויות האלה הם קריטיים להשגת ביצועי עיבוד אופטימליים.
בקטע הקודם על בניית מודל האובייקטים, בנינו את עצי ה-DOM ו-CSSOM על סמך הקלט של ה-HTML וה-CSS. עם זאת, שני הקבצים האלה הם אובייקטים עצמאיים שמתעדים היבטים שונים של המסמך: אחד מתאר את התוכן והשני מתאר את כללי הסגנון שצריך להחיל על המסמך. איך משלבים את השניים ומאפשרים לדפדפן ליצור פיקסלים במסך?
סיכום
- עצי ה-DOM וה-CSSOM משתלבים כדי ליצור את עץ העיבוד.
- עץ הרינדור מכיל רק את הצמתים הנדרשים לרינדור הדף.
- Layout מחשבת את המיקום והגודל המדויקים של כל אובייקט.
- השלב האחרון הוא הצבע, שמקבל את עץ העיבוד הסופי ומציג את הפיקסלים במסך.
קודם, הדפדפן משלב את ה-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>
ה-<body> מהדוגמה הקודמת מכיל שני רכיבי <div> בתצוגת עץ: ה-<div> הראשון (הורה) מגדיר את גודל התצוגה של הצומת כ-50% מרוחב אזור התצוגה, וה-<div> השני – שמכיל את ההורה – מגדיר את width שלו כ-50% מההורה, כלומר 25% מרוחב אזור התצוגה.
הפלט של תהליך הפריסה הוא "מודל תיבה", שמציג באופן מדויק את המיקום והגודל של כל רכיב באזור התצוגה: כל המדידות היחסיות מומרות לפיקסלים מוחלטים במסך.
עכשיו, אחרי שאנחנו יודעים אילו צמתים גלויים ואת הסגנונות והגיאומטריה המחושבים שלהם, אנחנו יכולים להעביר את המידע הזה לשלב האחרון, שבו כל צומת בעץ הרינדור מומר לפיקסלים בפועל במסך. השלב הזה נקרא בדרך כלל 'ציור' או 'יצירת רשת נקודות'.
הפעולה הזו עשויה לקחת זמן, כי הדפדפן צריך להעסיק לא מעט. עם זאת, הכלים למפתחים של Chrome יכולים לספק תובנות לגבי כל שלושת השלבים שתוארו למעלה. בודקים את שלב הפריסה בדוגמה המקורית שלנו ל-'hello world':
- השדה "פריסה" האירוע הזה מתאר את המבנה של עץ העיבוד, המיקום והגודל שלו בציר הזמן.
- כשהפריסה תושלם, בדפדפן תוצג הבעיה 'הגדרת צבע' ו'צבע' שממירים את עץ העיבוד לפיקסלים במסך.
הזמן הנדרש ליצירת עץ הרינדור, לפריסה ולצביעה משתנה בהתאם לגודל המסמך, לסגנונות שהוחלו ולמכשיר שבו הוא פועל: ככל שהמסמך גדול יותר, כך יש יותר עבודה לדפדפן. ככל שהסגנונות מורכבים יותר, כך זמן הציור ארוך יותר (לדוגמה, קל יותר לצייר צבע אחיד, אבל חישוב ויצירת צללית 'יקרים' יותר).
הדף מופיע סוף סוף באזור התצוגה:
זהו סיכום קצר של השלבים בדפדפן:
- עיבוד תגי עיצוב HTML ויצירת עץ ה-DOM.
- עיבוד של רכיבי ה-CSS וליצור של עץ ה-CSSOM.
- משלבים את ה-DOM וה-CSSOM לעץ עיבוד.
- מריצים את הפריסה בעץ הרינדור כדי לחשב את הגיאומטריה של כל צומת.
- מציירים על המסך את הצמתים הספציפיים.
דף ההדגמה נראה פשוט, אבל הוא דורש עבודה רבה מצד הדפדפן. אם ה-DOM או ה-CSSOM היה שינוי, תצטרכו לחזור על התהליך כדי להבין אילו פיקסלים צריך לעבד מחדש במסך.
אופטימיזציה של נתיב העיבוד הקריטי הוא התהליך של צמצום משך הזמן הכולל לביצוע שלבים 1 עד 5 ברצף שלמעלה. כך אפשר להציג את התוכן במסך מהר ככל האפשר, וגם לקצר את משך הזמן בין עדכוני המסך אחרי העיבוד הראשוני. כלומר, אפשר להשיג קצב רענון גבוה יותר של תוכן אינטראקטיבי.