منتشر شده: ۳۱ مارس ۲۰۱۴
به طور پیشفرض، CSS به عنوان یک منبع مسدودکننده رندر در نظر گرفته میشود، به این معنی که مرورگر تا زمانی که CSSOM ساخته نشود، هیچ محتوای پردازششدهای را رندر نمیکند. مطمئن شوید که CSS خود را سبک نگه دارید، آن را در سریعترین زمان ممکن تحویل دهید و از انواع رسانه و کوئریها برای رفع انسداد رندر استفاده کنید.
در ساخت درخت رندر دیدیم که مسیر رندر بحرانی برای ساخت درخت رندر به DOM و CSSOM نیاز دارد. این یک پیامد مهم عملکرد ایجاد میکند: هم HTML و هم CSS منابع مسدودکننده رندر هستند. HTML واضح است، زیرا بدون DOM چیزی برای رندر کردن نخواهیم داشت، اما الزام CSS ممکن است کمتر واضح باشد. اگر سعی کنیم یک صفحه معمولی را بدون مسدود کردن رندر در CSS رندر کنیم، چه اتفاقی میافتد؟
خلاصه
- به طور پیشفرض، CSS به عنوان یک منبع مسدودکننده رندر در نظر گرفته میشود.
- انواع رسانه و کوئریهای رسانهای به ما این امکان را میدهند که برخی از منابع CSS را به عنوان منابع غیر مسدودکننده رندر علامتگذاری کنیم.
- مرورگر تمام منابع CSS را دانلود میکند، صرف نظر از اینکه رفتار مسدودکننده یا غیرمسدودکننده باشد.
مثال قبلی، که وبسایت نیویورک تایمز را با و بدون CSS نشان میدهد، نشان میدهد که چرا رندر کردن تا زمانی که CSS در دسترس باشد مسدود میشود - بدون CSS صفحه نسبتاً غیرقابل استفاده است. تجربه سمت راست اغلب به عنوان فلش محتوای بدون استایل (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)" />
یک کوئری رسانهای شامل یک نوع رسانه و صفر یا چند عبارت است که شرایط ویژگیهای خاص رسانه را بررسی میکنند. به عنوان مثال، اولین اعلان style sheet ما نوع یا کوئری رسانهای ارائه نمیدهد، بنابراین در همه موارد اعمال میشود؛ به عبارت دیگر، همیشه render-blocking است. از سوی دیگر، اعلان style sheet دوم فقط زمانی اعمال میشود که محتوا چاپ میشود - شاید بخواهید طرحبندی را دوباره مرتب کنید، فونتها را تغییر دهید و سایر ملاحظات مهم طراحی را برای چاپ انجام دهید. از این رو، این اعلان style sheet نیازی به مسدود کردن رندر صفحه هنگام اولین بارگذاری ندارد. در نهایت، آخرین اعلان style sheet یک "media query" ارائه میدهد که توسط مرورگر اجرا میشود: اگر شرایط مطابقت داشته باشد، مرورگر رندر را تا زمانی که style sheet دانلود و پردازش شود، مسدود میکند.
با استفاده از مدیا کوئریها، میتوانیم ارائه خود را با موارد استفاده خاص، مانند نمایش در مقابل چاپ، و همچنین با شرایط پویا مانند تغییرات در جهت صفحه نمایش، رویدادهای تغییر اندازه و موارد دیگر، تطبیق دهیم. هنگام اعلام داراییهای استایل شیت خود، به نوع رسانه و کوئریها توجه زیادی داشته باشید. آنها تأثیر زیادی بر عملکرد مسیر رندر بحرانی دارند.
به این مثالها توجه کنید:
<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" />
- اولین تعریف، render-blocking است و در همه شرایط مطابقت دارد.
- تعریف دوم نیز render-blocking است:
"all"نوع پیشفرض است، بنابراین اگر نوعی را مشخص نکنید، به طور ضمنی روی"all"تنظیم میشود. از این رو، تعریفهای اول و دوم در واقع معادل هستند. - سومین اعلان دارای یک پرسوجوی رسانهای پویا است که هنگام بارگذاری صفحه ارزیابی میشود. بسته به جهت دستگاه هنگام بارگذاری صفحه،
portrait.cssممکن است مسدودکننده رندر باشد یا نباشد. - آخرین تعریف فقط زمانی اعمال میشود که صفحه در حال چاپ باشد (
"print") بنابراین وقتی صفحه برای اولین بار در مرورگر بارگذاری میشود، رندر بلاکینگ انجام نمیشود.
در نهایت، توجه داشته باشید که «مسدود کردن رندر» فقط به این اشاره دارد که آیا مرورگر مجبور است رندر اولیه صفحه را روی آن منبع نگه دارد یا خیر. در هر صورت، مرورگر همچنان فایل CSS را دانلود میکند، البته با اولویت پایینتر برای منابع غیرمسدودکننده.