פורסם: 31 במרץ 2014
כברירת מחדל, CSS נחשב למשאב שחוסם את העיבוד, כלומר הדפדפן לא יעבד תוכן עד שייבנה CSSOM. חשוב לוודא שקובץ ה-CSS שלכם קטן, שהוא נטען כמה שיותר מהר, ושאתם משתמשים בסוגי מדיה ובשאילתות כדי לבטל את החסימה של הרינדור.
בבניית עץ העיבוד ראינו שנדרשים גם DOM וגם CSSOM כדי לבנות את עץ העיבוד בנתיב העיבוד הקריטי. הדבר יוצר השלכה חשובה על הביצועים: קובצי HTML ו-CSS הם משאבים שחוסמים את העיבוד. ה-HTML ברור, כי בלי ה-DOM לא יהיה לנו מה לעבד, אבל הדרישה ל-CSS עשויה להיות פחות ברורה. מה יקרה אם ננסה לעבד דף טיפוסי בלי לחסום את העיבוד ב-CSS?
סיכום
- כברירת מחדל, CSS נחשב למשאב שחוסם את העיבוד.
- סוגי מדיה ושאילתות מדיה מאפשרים לנו לסמן משאבי CSS מסוימים כמשאבים שלא חוסמים את העיבוד.
- הדפדפן מוריד את כל משאבי ה-CSS, ללא קשר להתנהגות החסימה או אי-החסימה.
בדוגמה הקודמת, שבה מוצג אתר New York Times עם CSS ובלי CSS, אפשר לראות למה העיבוד נחסם עד שקובץ ה-CSS זמין – בלי CSS אי אפשר להשתמש בדף. החוויה שמוצגת בצד שמאל נקראת לעיתים קרובות Flash of Unstyled Content (FOUC). הדפדפן חוסם את העיבוד עד שיש לו גם את ה-DOM וגם את ה-CSSOM.
CSS הוא משאב שחוסם עיבוד. כדאי להעביר אותו ללקוח בהקדם האפשרי כדי לקצר את הזמן עד להצגה הראשונה.
אבל מה קורה אם יש לנו סגנונות CSS שמשמשים רק בתנאים מסוימים, למשל כשהדף מודפס או מוקרן על מסך גדול? יהיה נחמד אם לא נצטרך לחסום את העיבוד של המשאבים האלה.
התכונות CSS media types ו-CSS media queries מאפשרות לנו לטפל בתרחישי השימוש הבאים:
<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"הוא סוג ברירת המחדל, כך שאם לא מציינים סוג, הוא מוגדר באופן מרומז ל-"all". לכן, ההצהרה הראשונה וההצהרה השנייה שקולות. - בהצהרה השלישית יש שאילתת מדיה דינמית, שהמערכת מעריכה כשהדף נטען. בהתאם לכיוון המכשיר בזמן טעינת הדף, יכול להיות ש-
portrait.cssיחסום את העיבוד או לא. - ההצהרה האחרונה חלה רק כשמדפיסים את הדף (
"print"), ולכן היא לא חוסמת את הרינדור כשהדף נטען לראשונה בדפדפן.
לבסוף, חשוב לציין שהמונח 'חסימת רינדור' מתייחס רק לשאלה אם הדפדפן צריך להשהות את הרינדור הראשוני של הדף במשאב הזה. בכל מקרה, הדפדפן עדיין מוריד את נכס ה-CSS, אם כי עם עדיפות נמוכה יותר למשאבים שלא חוסמים את הטעינה.