תאריך פרסום: 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 ו'שאילתות מדיה' כדי שנוכל לטפל בתרחישים לדוגמה הבאים:
<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, אבל עם עדיפות נמוכה יותר למשאבים שלא חוסמים.