يتم تلقائيًا التعامل مع CSS كمورد لحظر العرض، ما يعني أنّ المتصفّح لن يعرض أي محتوى تمت معالجته إلى أن يتم إنشاء CSSOM. احرص على إبقاء خدمة CSS مفعّلة وعرض البيانات في أسرع وقت ممكن واستخدام أنواع الوسائط وطلبات البحث لإزالة حظر العرض.
في عملية إنشاء شجرة العرض، لاحظنا أنّ مسار العرض الحرج يتطلب كلاً من نموذج العناصر في المستند (DOM) وCSSOM لإنشاء العرض التدرّجي للعرض. وينتج عن ذلك تأثير مهم على الأداء: يُعدّ كل من HTML وCSS موارد حظر العرض. رمز HTML واضح، لأنّه بدون نموذج DOM، لن يكون لدينا أي محتوى لعرضه، ولكن قد يكون متطلبات CSS أقل وضوحًا. ماذا سيحدث إذا حاولنا عرض صفحة عادية بدون حظر العرض على CSS؟
ملخّص
- بشكل تلقائي، يتم التعامل مع CSS كمورد لحظر العرض.
- تتيح لنا أنواع الوسائط والاستعلامات عن الوسائط وضع علامة على بعض موارد CSS كحظر لعرض المحتوى.
- ينزّل المتصفح جميع موارد CSS، بغض النظر عن سلوك الحظر أو عدم الحظر.
![نيويورك تايمز مع CSS](https://web.dev/static/articles/critical-rendering-path/render-blocking-css/image/nytimes-css-de9a8a85f18fa.png?authuser=6&hl=ar)
![NYTimes بدون CSS](https://web.dev/static/articles/critical-rendering-path/render-blocking-css/image/nytimes-without-css-6d823cc9c8ea4.png?authuser=6&hl=ar)
يوضّح المثال أعلاه الذي يعرض موقع نيويورك تايمز الإلكتروني مع خدمة مقارنة الأسعار (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)" />
يتكون استعلام الوسائط من نوع وسائط وبدون تعبيرات أو أكثر تتحقق من شروط ميزات وسائط معينة. على سبيل المثال، لا يقدم إعلان ورقة الأنماط الأول نوع الوسائط أو طلب البحث، ولذلك ينطبق في جميع الحالات، أي أنه يعرض دائمًا الحظر. ومن ناحية أخرى، لا ينطبق تعريف ورقة الأنماط الثانية إلا عندما تتم طباعة المحتوى -- ربما ترغب في إعادة ترتيب التنسيق وتغيير الخطوط وما إلى ذلك، وبالتالي لا يحتاج إعلان ورقة الأنماط هذا إلى حظر عرض الصفحة عند تحميلها لأول مرة. وأخيرًا، يوفر بيان ورقة الأنماط الأخير "استعلام عن وسائط" يتم تنفيذه بواسطة المتصفح: في حالة تطابق الشروط، يحظر المتصفح العرض إلى أن يتم تنزيل ورقة الأنماط ومعالجتها.
وباستخدام استعلامات الوسائط، يمكننا تصميم العرض التقديمي ليلائم حالات استخدام معينة، مثل العرض مقابل الطباعة، وأيضًا وفقًا للظروف الديناميكية مثل التغييرات في اتجاه الشاشة، وتغيير حجم الأحداث، والمزيد. عند الإعلان عن مواد عرض أوراق الأنماط، انتبه جيدًا لنوع الوسائط وطلبات البحث، فهي تؤثر بشكل كبير في أداء مسار العرض الحرج.
لنفكر في بعض الأمثلة العملية:
<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" />
- التعريف الأول هو حظر العرض والمطابقات في جميع الشروط.
- ويعرض التعريف الثاني أيضًا الحظر: "الكل" هو النوع التلقائي، لذا إذا لم تحدِّد أي نوع، يتم ضبطه ضمنيًا على "الكل". ومن ثم، فإن التعريفين الأول والثاني متكافئان بالفعل.
- يتضمن الإعلان الثالث استعلامًا عن وسائط ديناميكية يتم تقييمه عند تحميل الصفحة. وبناءً على اتجاه الجهاز أثناء تحميل الصفحة، قد يتم أو لا يتم عرض حظر باستخدام portrait.css.
- لا يتم تطبيق البيان الأخير إلا عندما تتم طباعة الصفحة بحيث لا يتم حظر عرضها عند تحميل الصفحة لأول مرة في المتصفّح.
وأخيرًا، يشير "حظر العرض" إلى ما إذا كان على المتصفّح الاحتفاظ بالعرض الأولي للصفحة على ذلك المورد. وفي كلتا الحالتين، يواصل المتصفّح تنزيل مادة عرض CSS، ولكن مع إعطاء أولوية أقل للموارد التي لا تؤدي إلى الحظر.