המדריך למתחילים ל- CSS Object Object (CSSOM)

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

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

בהודעה זו, אני הולך לכסות את היסודות של מודל אובייקט CSS, ולהראות לך איך זה עובד.

מהו CSSOM??

המונח CSS Object Model מתאר א מפה של כל בוררי CSS & מאפיינים רלוונטיים עבור כל בורר. סגנונות אלה יכולים להיות רכיבי שורש או שיש להם ילדים מקוננים.

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

אז למה CSSOM חשוב? זוהי המפה שבה משתמש הדפדפן כראוי לעבד סגנונות CSS בדף אינטרנט. אין דרך קלה לספר למחשב כי כל פסקאות ב .תוכן עיקרי div חייב להיות גובה קו נוסף.

הפתרון הוא מודל אובייקט CSS מפות את כל האלמנטים ואת המאפיינים מקוד ה- CSS שלך.

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

איך זה עובד

שניהם DOM ו CSSOM הם בשימוש נרחב על ידי כל דפדפני האינטרנט כדי לפרש ולעבד דפי אינטרנט. התרשים הבא מופיע במדריך היסודות של Google Developers Web, ומסביר כיצד DOM מוצג בדפדפן אינטרנט.

הן ב- DOM והן ב- CSSOM, כל המידע הוא המרה מבתים למפות דיגיטליות המעבירים כל אלמנט במסמך אינטרנט. התהליך פועל כך:

1. הדפדפן מוריד את ה- HTML עבור דף אינטרנט.
2. בעת עיבוד ה- HTML, המנתח עלול להיתקל באלמנט קישור התייחסות לגיליון סגנונות חיצוני.
3. גיליון סגנונות CSS זה הוא מחוצה למפה באמצעות מפרט CSS אובייקט דגם.
4. הקוד המתקבל יכול להיות הוחל על אלמנטים ב- DOM.

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

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

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

CSSOM ו- DOM הם לחלוטין מודלים נתונים נפרדים, ולכן הם מנותקים זה מזה בנפרד. אבל שניהם מבני עץ דומים, ושניהם משרתים את אותה מטרה: לתת לדפדפן מבנה לעבד ולזהות אלמנטים שונים בדף.

למה מפתחי אינטרנט צריך לטפל

מאז כל טיוח קורה על backend, אתה באמת לא צריך לדאוג הרבה על עץ CSSOM. אבל זה יכול להיות שימושי כדי להבין איך זה עובד.

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

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

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

אני ממליץ בחום לקרוא מאמר זה כדי ללמוד עוד על משאבים חיצוניים CSS / JS וזמני הטעינה שלהם.

הדרך הטובה ביותר כדי לייעל את האתר שלך היא על ידי crafting מפל טבעי של משאבים אשר נטענים במקביל.

ניתן לתפעל את CSSOM באמצעות JavaScript כי זה מבחינה טכנית JS API. אבל זה לא משרת הרבה מטרה לעומת מניפולציה DOM JavaScript.

הסיבה הגדולה יותר ללמוד על CSSOM היא להמשיך לחנך את עצמך לגבי איך אתרי אינטרנט באמת עובד.

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

לקריאה נוספת

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

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

ישנם משאבים רבים אחרים לדון CSSOM, ואיך זה עובד. אם אתה מעוניין ללמוד עוד, הנה כמה הודעות שאני ממליץ עליהן:

• סקירה כללית של אובייקט CSS
• היכרות עם CSSOM: יצירת Analyzer אובייקט CSS
• מה כל מפתח Frontend צריך לדעת על עיבוד דף אינטרנט