בניית מודל האובייקטים

Ilya Grigorik
Ilya Grigorik
X דף הבית

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

סיכום

  • בייטים ← תווים ← אסימונים ← צמתים ← מודל האובייקט.
  • תגי עיצוב של HTML משתנים ל-Document Object Model (DOM); תגי עיצוב של CSS משתנים ל-CSS Object Model (CSSOM).
  • DOM ו-CSSOM הם מבני נתונים עצמאיים.
  • החלונית 'ביצועים של כלי פיתוח' ב-Chrome מאפשרת לנו לתעד ולבדוק את עלויות הבנייה והעיבוד של DOM ו-CSSOM.

מודל אובייקטי מסמך (DOM)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

רוצים לנסות?

נתחיל במקרה הפשוט ביותר האפשרי: דף HTML פשוט עם טקסט ותמונה אחת. איך הדפדפן מעבד את הדף הזה?

תהליך יצירת DOM

  1. Conversion:הדפדפן קורא את הבייטים של ה-HTML הגולמי מהדיסק או מהרשת, ומתרגם אותם לתווים נפרדים על סמך הקידוד שצוין בקובץ (לדוגמה, UTF-8).
  2. יצירת אסימונים: הדפדפן ממיר מחרוזות תווים לאסימונים נפרדים, כפי שמצוין בתקן W3C HTML5, לדוגמה, "<html>", "<body>" ומחרוזות אחרות בתוך סוגריים זוויתיים. לכל אסימון יש משמעות מיוחדת וסדרת כללים משלו.
  3. Lexing: האסימונים שהונפקו עוברים המרה ל "אובייקטים", שמגדירים את המאפיינים והכללים שלהם.
  4. בניית DOM: לבסוף, מכיוון שתגי העיצוב של HTML מגדירים קשרים בין תגים שונים (תגים מסוימים נכללים בתוך תגים אחרים), האובייקטים שנוצרו מקושרים במבנה נתונים מעץ שמתעד גם את קשרי ההורה-צאצא שהוגדרו בתגי העיצוב המקוריים: האובייקט HTML הוא הורה של האובייקט body, האובייקט body הוא הורה של האובייקט paragraph וכן הלאה.

עץ DOM

הפלט הסופי של התהליך כולו הוא ה-Document Object Model (DOM) של הדף הפשוט שלנו, שהדפדפן משתמש בו לכל עיבוד נוסף של הדף.

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

מעקב אחר בניית DOM בכלי פיתוח

אם תפתחו את כלי הפיתוח ל-Chrome ותקליטו ציר זמן בזמן שהדף נטען, תוכלו לראות כמה זמן נדרש בפועל לביצוע השלב הזה. בדוגמה שלמעלה נדרשו לנו בערך 5 אלפיות השנייה כדי להמיר מקטע HTML לעץ DOM. בדף גדול יותר, התהליך עשוי להימשך זמן רב יותר. כשיוצרים אנימציות חלקות, זה עלול בקלות להפוך לצוואר בקבוק אם הדפדפן צריך לעבד כמויות גדולות של HTML.

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

מודל אובייקטים של CSS (CSSOM)

בזמן שהדפדפן יצר את ה-DOM של הדף הפשוט שלנו, הוא נתקל בתג קישור בקטע head של המסמך שמפנה לגיליון סגנונות CSS חיצוני: style.css. בציפייה שיהיה צורך במשאב הזה כדי לעבד את הדף, היא תשלח מיד בקשה למשאב, שתחזיר את התוכן הבא:

body {
  font-size: 16px;
}
p {
  font-weight: bold;
}
span {
  color: red;
}
p span {
  display: none;
}
img {
  float: right;
}

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

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

שלבי הבנייה של CSSOM

הבייטים של CSS עוברים המרה לתווים, לאחר מכן לאסימונים, אחר כך לצמתים ולבסוף הם מקושרים למבנה עץ שנקרא "CSS Object Model" (CSSOM):

עץ CSSOM

למה ל-CSSOM יש מבנה עץ? בעת חישוב קבוצת הסגנונות הסופית לאובייקט כלשהו בדף, הדפדפן מתחיל עם הכלל הכללי ביותר שחל על הצומת הזה (לדוגמה, אם הוא צאצא של רכיב body, אז כל סגנונות ה-body חלים) ולאחר מכן מצמצם באופן רקורסיבי את הסגנונות המחושבים על ידי החלה של כללים ספציפיים יותר, כלומר הכללים "מחלחלים כלפי מטה".

כדי להמחיש זאת טוב יותר, נתייחס לעץ ה-CSSOM שלמעלה. לכל טקסט שנמצא בתוך התג <span> שממוקם בתוך הרכיב body, יש גופן בגודל 16 פיקסלים ובטקסט אדום. ההנחיה font-size יורדת למטה מ-body אל span. עם זאת, אם תג span הוא צאצא של תג פסקה (p), התוכן שלו לא יוצג.

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

כדי לבדוק כמה זמן נמשך עיבוד ה-CSS, אפשר לתעד ציר זמן ב-DevTools ולחפש אירוע "Recalculate Style": בניגוד לניתוח DOM, ציר הזמן לא מציג רשומה נפרדת של "Parse CSS", ובמקום זאת מתעד ניתוח ובניית עץ CSSOM, וכן את החישוב הרקורסיבי של סגנונות מחושבים במסגרת אירוע יחיד זה.

מעקב אחר בניית CSSOM בכלי פיתוח

העיבוד של גיליון הסגנונות הטריוויאלי שלנו נמשך בערך 0.6 אלפיות השנייה ומשפיע על שמונה רכיבים בדף - לא הרבה, אבל שוב, לא בחינם. אבל מאיפה הגיעו שמונת הרכיבים? ה-CSSOM וה-DOM הם מבני נתונים עצמאיים! מסתבר שהדפדפן מסתיר שלב חשוב. בשלב הבא נדון בעץ העיבוד שמקשר בין ה-DOM ל-CSSOM.

משוב