כברירת מחדל, ה-CSS נחשב למשאב שחוסם עיבוד, ומשמעות הדבר היא שהדפדפן לא יעבד תוכן מעובד עד ליצירת ה-CSSOM. חשוב להקפיד ששירות ה-CSS שלכם יהיה רזה, לספק אותו במהירות האפשרית ולהשתמש בסוגי מדיה ובשאילתות כדי לבטל את חסימת הרינדור.
בתהליך יצירת עץ העיבוד, גילינו שנתיב העיבוד הקריטי מחייב גם את ה-DOM וגם את ה-CSSOM כדי ליצור את עץ העיבוד. יש לכך השפעה חשובה על הביצועים: גם HTML וגם CSS הם משאבים שחוסמים עיבוד. ה-HTML הוא מובן מאליו, מאחר שללא ה-DOM לא יהיה לנו דבר לעבד, אבל דרישת ה-CSS עשויה להיות פחות ברורה. מה יקרה אם ננסה לעבד דף רגיל בלי לחסום את הרינדור ב-CSS?
סיכום
- כברירת מחדל, CSS נחשב למשאב שחוסם עיבוד.
- סוגי מדיה ושאילתות מדיה מאפשרים לנו לסמן משאבי CSS מסוימים כחסימת עיבוד.
- הדפדפן מוריד את כל משאבי ה-CSS, ללא קשר להתנהגות של חסימה או ללא חסימה.
הדוגמה שלמעלה, הצגת האתר NYTimes עם או בלי CSS, ממחישה מדוע העיבוד חסום עד ש-CSS יהיה זמין – ללא CSS, לא ניתן להשתמש בדף באופן יחסי. החוויה שמשמאל נקראת לעיתים קרובות "Flash של תוכן ללא עיצוב" (FOUC). הדפדפן חוסם את העיבוד עד שיש בו גם את ה-DOM וגם את ה-CSSOM.
שירות CSS הוא משאב שחוסם את העיבוד. עליכם לספק את הפתרון ללקוח בהקדם האפשרי כדי לקצר ככל האפשר את משך הזמן לרינדור הראשון.
אבל מה קורה אם יש לנו סגנונות CSS מסוימים שנעשה בהם שימוש רק בתנאים מסוימים, למשל, כשהדף מודפס או מוקרן על גבי צג גדול? היה נחמד אם לא היינו צריכים לחסום את העיבוד של המשאבים האלה.
'סוגי מדיה' ו'שאילתות מדיה' בשירות ה-CSS מאפשרים לנו לטפל בתרחישים הבאים:
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
שאילתת מדיה מורכבת מסוג מדיה ומאפס ביטויים או יותר שבודקים את התנאים של תכונות מדיה מסוימות. לדוגמה, ההצהרה הראשונה שלנו לגבי גיליון סגנונות אינה מספקת סוג מדיה או שאילתה, ולכן היא חלה בכל המקרים. כלומר, היא תמיד חוסמת עיבוד. מצד שני, ההצהרה השנייה של גיליון סגנונות חלה רק בעת הדפסת התוכן-- ייתכן שתרצו לשנות את הפריסה, לשנות את הגופנים וכן הלאה, ולכן הצהרת גיליון הסגנונות הזו לא צריכה לחסום את הרינדור של הדף כשהוא נטען לראשונה. לבסוף, ההצהרה האחרונה בגיליון הסגנונות מספקת "שאילתת מדיה", שהדפדפן מפעיל: אם התנאים תואמים, הדפדפן חוסם את העיבוד עד להורדה ולעיבוד של גיליון הסגנונות.
באמצעות שאילתות מדיה אנחנו יכולים להתאים את המצגת לתרחישים לדוגמה ספציפיים, כמו תצוגה לעומת הדפסה, וגם לתנאים דינמיים כמו שינויים בכיוון המסך, שינוי גודל אירועים ועוד. כשמצהירים על הנכסים בגיליון הסגנונות, חשוב לשים לב לסוג המדיה ולשאילתות. יש להם השפעה רבה על הביצועים של נתיב העיבוד הקריטי.
נביא בחשבון כמה דוגמאות מעשיות:
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- ההצהרה הראשונה היא חסימה והתאמות בכל התנאים.
- ההצהרה השנייה היא גם חסימה של עיבוד: 'all' הוא סוג ברירת המחדל, כך שאם לא מציינים סוג כלשהו, הוא מוגדר באופן מרומז כ'הכול'. לכן, ההצהרה הראשונה והשנייה הן למעשה מקבילות.
- בהצהרה השלישית יש שאילתת מדיה דינמית, שנבדקת כשהדף נטען. בהתאם לכיוון המכשיר בזמן שהדף נטען, ייתכן שהעיבוד של portrait.css ייחסם, או לא.
- ההצהרה האחרונה חלה רק בזמן הדפסת הדף, כך שהיא לא תחסום את העיבוד כשהדף נטען בפעם הראשונה בדפדפן.
לסיום, חשוב לזכור שהאפשרות 'חסימת עיבוד' מתייחסת רק לשאלה האם הדפדפן צריך להחזיק את הרינדור הראשוני של הדף במשאב הזה. בכל מקרה, הדפדפן עדיין יוריד את נכס ה-CSS, אם כי בעדיפות נמוכה יותר למשאבים שאינם חוסמים.