content-visibility: خاصيّة CSS الجديدة التي تحسِّن أداء العرض

يمكنك تحسين وقت التحميل الأولي من خلال تخطي عرض المحتوى خارج الشاشة.

Jeremy Wagner
Una Kravets
Vladimir Levin
Vladimir Levin

قد تكون خاصية content-visibility، التي يتم إطلاقها في الإصدار 85 من Chromium، من بين أكثر مواقع CSS الجديدة تأثيرًا في تحسين أداء تحميل الصفحات. تتيح السمة content-visibility لوكيل المستخدم إمكانية تخطي عمل عرض العنصر، بما في ذلك التنسيق والطلاء، إلى أن تكون هناك حاجة إليه. بسبب تخطّي العرض، إذا كان جزء كبير من المحتوى خارج الشاشة، ستزيد الاستفادة من السمة content-visibility في التحميل الأولي للمستخدم. تسمح أيضًا بتفاعلات أسرع مع المحتوى المعروض على الشاشة. أنيق جدًا.

عرض توضيحي مع أشكال تمثّل نتائج الشبكة
في العرض التوضيحي للمقالة، إنّ تطبيق القيمة content-visibility: auto على مناطق المحتوى المُقتطَع يؤدي إلى تعزيز أداء العرض 7 مرات عند تحميل البيانات الأولية. يُرجى مواصلة القراءة لمعرفة المزيد.

المتصفحات المتوافقة

التوافق مع المتصفح

  • 85
  • 85
  • 124

المصدر

تعتمد content-visibility على البيانات الأساسية ضمن مواصفات احتواء CSS. بالرغم من أنّ content-visibility لا تتوافق إلا في Chromium 85 في الوقت الحالي (ويتم اعتباره "نماذج أولية تستحق" لـ Firefox)، فإن مواصفات الاحتواء متاحة في معظم المتصفحات الحديثة.

احتواء خدمة مقارنة الأسعار (CSS)

يتمثّل الهدف الرئيسي والشامل لاحتواء CSS في تفعيل تحسينات في أداء عرض محتوى الويب من خلال توفير عزل يمكن التنبؤ به لشجرة DOM الفرعية عن باقي محتوى الصفحة.

في الأساس، يمكن للمطوّر أن يخبر المتصفح بأجزاء الصفحة التي تم تضمينها كمجموعة من المحتوى، ما يسمح للمتصفحات بالتفكير في المحتوى بدون الحاجة إلى مراعاة الحالة خارج الشجرة الفرعية. ومن خلال معرفة أجزاء المحتوى (الأشجار الفرعية) التي تحتوي على محتوى معزول، يمكن للمتصفح اتخاذ قرارات تحسينية بشأن عرض الصفحة.

هناك أربعة أنواع من احتواء CSS، وكل قيمة محتملة لخاصية contain في CSS يمكن دمجها في قائمة قيم مفصولة بمسافات:

  • size: يضمن احتواء حجم العنصر إمكانية وضع مربّع العنصر بدون الحاجة إلى فحص عناصره التابعة. هذا يعني أنه من المحتمل أن نتخطى تخطيط العناصر التابعة إذا كان كل ما نحتاجه هو حجم العنصر.
  • layout: يعني احتواء التصميم أنّ العناصر التابعة لا تؤثر في التنسيق الخارجي للمربّعات الأخرى ضمن الصفحة. يتيح لنا ذلك احتمال تخطي تخطيط العناصر التابعة إذا كان كل ما نريد القيام به هو وضع مربعات أخرى.
  • style: تضمن ميزة "احتواء النمط" أنّ الخصائص التي يمكن أن يكون لها تأثيرات في عناصر أخرى غير العناصر التابعة لا تتخطى العنصر (مثل العدّادات). يتيح لنا ذلك إمكانية تخطي حساب النمط للعناصر التابعة إذا كان كل ما نريده هو حساب الأنماط على عناصر أخرى.
  • paint: تضمن ميزة احتواء الطلاء عدم ظهور العناصر الفرعية من العلبة المضمّنة خارج حدودها. لا يمكن لأي شيء أن يتجاوز العنصر بشكل واضح، وإذا كان العنصر خارج الشاشة أو غير مرئي بأي شكل آخر، فلن تكون العناصر التابعة له مرئية أيضًا. يسمح لنا هذا باحتمالية تخطي طلاء العناصر التابعة إذا كان العنصر خارج الشاشة.

جارٍ تخطّي عرض العمل باستخدام "content-visibility"

قد يكون من الصعب معرفة قيم الاحتواء التي يجب استخدامها، نظرًا لأن تحسينات المتصفح قد لا تبدأ إلا عند تحديد مجموعة مناسبة. يمكنك تعديل القيم لمعرفة الأفضل أو يمكنك استخدام سمة CSS أخرى تُسمى content-visibility لتطبيق المحتوى المطلوب تلقائيًا. يضمن content-visibility حصولك على أكبر مكاسب في الأداء يمكن للمتصفّح توفيرها بأقل جهد منك كمطوّر.

تقبل سمة content- visibility العديد من القيم، غير أن auto هي القيمة التي توفّر تحسينات فورية في الأداء. العنصر الذي يتضمّن content-visibility: auto يكتسب الاحتواء layout وstyle وpaint. إذا كان العنصر خارج الشاشة (وليس متعلقًا بالمستخدم بطريقة أخرى، فستكون العناصر ذات الصلة هي تلك التي يتم التركيز عليها أو اختيارها في شجرتها الفرعية)، سيكتسب أيضًا احتواء size (ويتوقف عن الرسم واختبار النتائج).

فما معنى ذلك؟ باختصار، إذا كان العنصر خارج الشاشة، لا يتم عرض عناصره الفرعية. يحدد المتصفح حجم العنصر دون مراعاة أي من محتوياته، ويتوقف عند هذا الحد. يتم تخطي معظم العرض، مثل نمط وتخطيط الشجرة الفرعية للعنصر.

وعندما يقترب العنصر من إطار العرض، يتوقّف المتصفّح عن إضافة عنصر size ويبدأ في طلاء محتوى العنصر واختباره. وهذا يمكّن من تنفيذ عملية العرض في الوقت المناسب حتى يراها المستخدم.

ملاحظة حول إمكانية الوصول

إحدى ميزات content-visibility: auto هي أنّ المحتوى الذي يظهر خارج الشاشة يظل متوفرًا في نموذج عنصر المستند، وبالتالي في شجرة تسهيل الاستخدام (على عكس visibility: hidden). ويعني ذلك أنّه يمكن البحث عن المحتوى على الصفحة والانتقال إليه بدون انتظار تحميله أو التضحية بأداء العرض.

والعكس صحيح أنّ عناصر الإشارة ذات ميزات النمط، مثل display: none أو visibility: hidden، ستظهر أيضًا في شجرة تسهيل الاستخدام عندما تكون خارج الشاشة، لأنّ المتصفّح لن يعرض هذه الأنماط إلى أن تدخل إطار العرض. لمنع ظهور هذه العناصر في شجرة تسهيل الاستخدام، ما قد يتسبّب في حدوث فوضى، تأكَّد من إضافة السمة aria-hidden="true" أيضًا.

مثال: مدونة سفر

في هذا المثال، نضع مدوّنة السفر على اليسار ونطبّق البيانات content-visibility: auto على المناطق المقتطعة على اليسار. توضِّح النتائج أنّ أوقات العرض تتراوح بين 232 ملي ثانية و30 ملي ثانية عند التحميل الأولي للصفحة.

تحتوي مدونة السفر عادةً على مجموعة من القصص مع بعض الصور وبعض النصوص الوصفية. إليك ما يحدث في متصفح عادي عند الانتقال إلى مدونة سفر:

  1. يتم تنزيل جزء من الصفحة من الشبكة، مع أي موارد مطلوبة.
  2. أنماط المتصفّح ويوضّح كل محتوى الصفحة، بدون مراعاة ما إذا كان المحتوى مرئيًا للمستخدم
  3. يعود المتصفح إلى الخطوة 1 إلى أن يتم تنزيل جميع الصفحة والموارد.

في الخطوة 2، يعالج المتصفح كل المحتوى الذي يبحث عن أشياء ربما تغيّرت. فهو يقوم بتحديث نمط وتخطيط أي عناصر جديدة، إلى جانب العناصر التي ربما تكون قد تغيرت نتيجة للتحديثات الجديدة. يعد هذا عرض العمل. يستغرق ذلك بعض الوقت.

لقطة شاشة لمدوّنة سفر.
مثال على مدونة سفر. يمكنك الاطّلاع على العرض التوضيحي على Codepen
.

والآن، فكِّر فيما يحدث إذا وضعت content-visibility: auto في كل قصّة فردية في المدوّنة. التكرار الحلقي العام هو نفسه: ينزّل المتصفح مقاطع من الصفحة ويعرضها. ومع ذلك، يتمثل الاختلاف في مقدار العمل الذي يقوم به في الخطوة 2.

باستخدام إمكانية رؤية المحتوى، سيتم تصميم وتنسيق جميع المحتويات المرئية للمستخدم حاليًا (تكون على الشاشة). في المقابل، عند معالجة القصة التي تتم خارج الشاشة كليًا، لن يتخطى المتصفح عملية العرض، ولن يركّز سوى على نمط وتخطيط مربّع العنصر نفسه.

سيكون أداء تحميل هذه الصفحة كما لو كانت تحتوي على أخبار كاملة على الشاشة ومربّعات فارغة لكل قصة من الأخبار خارج الشاشة. ويحقّق ذلك أداءً أفضل بكثير، حيث انخفاض متوقّع في تكلفة العرض بنسبة% 50 أو أكثر. في المثال الذي نقدّمه، نلاحظ زيادة في وقت العرض من 232 ملي ثانية إلى 30 ملي ثانية. وهذه زيادة في الأداء بمقدار 7 أضعاف.

ما العمل الذي يتعين عليك القيام به للاستفادة من هذه الفوائد؟ أولاً، يتم تقسيم المحتوى إلى أقسام:

لقطة شاشة بها تعليقات توضيحية لتقسيم المحتوى إلى أقسام مع فئة CSS.
مثال على تقسيم المحتوى إلى أقسام مع تطبيق الفئة story على content-visibility: auto. يمكنك الاطّلاع على العرض التوضيحي على Codepen
.

ثم نطبق قاعدة النمط التالية على الأقسام:

.story {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

تحديد الحجم الطبيعي للعنصر باستخدام contain-intrinsic-size

للاستفادة من المزايا المحتملة لـ content-visibility، يحتاج المتصفّح إلى تطبيق احتواء الحجم لضمان أنّ نتائج عرض المحتوى لا تؤثر في حجم العنصر بأي شكل من الأشكال. هذا يعني أن العنصر سيتم تخطيطه كما لو كان فارغًا. إذا لم يكن للعنصر ارتفاع محدد في تخطيط الكتلة العادية، فسيكون ارتفاعه 0.

قد لا يكون هذا مثاليًا، نظرًا لأن حجم شريط التمرير سيتغير، حيث يعتمد على كل قصة بارتفاع غير صفري.

لحسن الحظ، توفر CSS خاصية أخرى، وهي contain-intrinsic-size، التي تحدد بشكل فعّال الحجم الطبيعي للعنصر إذا كان العنصر يتأثر باحتواء الحجم. في المثال الذي نقدّمه، نضبطه على 1000px كتقدير لارتفاع الأقسام وعرضها.

وهذا يعني أنه سيتم التخطيط له كما لو كان لديه عنصر ثانوي واحد ذو أبعاد "حجم جوهري"، مما يضمن أن عناصر div غير الحجم لا تزال تشغل مساحة. تعمل السمة contain-intrinsic-size كحجم عنصر نائب بدلاً من المحتوى المعروض.

في الإصدار 98 من Chromium والإصدارات الأحدث، هناك كلمة رئيسية جديدة من النوع auto من أجل contain-intrinsic-size. عند التحديد، سيتذكر المتصفِّح آخر حجم تم عرضه، إن وجد، ويستخدمه بدلاً من حجم العنصر النائب الذي يوفّره المطوّر. على سبيل المثال، إذا حددت contain-intrinsic-size: auto 300px، سيبدأ العنصر بحجم 300px الأساسي في كل بُعد، ولكن بعد عرض محتوى العنصر، سيحتفظ بالحجم الأساسي المعروض. سيتم أيضًا تذكُّر أي تغييرات لاحقة في حجم العرض. من الناحية العملية، يعني ذلك أنّه إذا تم تمرير عنصر مع تطبيق content-visibility: auto، ثم مرّرته مرة أخرى خارج الشاشة، سيحتفظ تلقائيًا بعرضه وارتفاعه المثاليين، ولن يعود إلى حجم العنصر النائب. هذه الميزة مفيدة بشكل خاص لمتصفّحي الصفحات اللانهائية، والتي يمكنها الآن تحسين تقدير الحجم تلقائيًا بمرور الوقت بينما يستكشف المستخدم الصفحة.

إخفاء المحتوى باستخدام "content-visibility: hidden"

ماذا لو أردت إبقاء المحتوى بدون عرض بغض النظر عمّا إذا كان معروضًا على الشاشة أم لا، مع الاستفادة من مزايا حالة العرض في ذاكرة التخزين المؤقت؟ أدخِل ما يلي: content-visibility: hidden.

تمنحك السمة content-visibility: hidden كل مزايا المحتوى الذي لا يتم عرضه وحالة العرض المُخزَّن مؤقتًا كما في ميزة content-visibility: auto التي تظهر خارج الشاشة. وعلى عكس auto، لا يبدأ العرض على الشاشة تلقائيًا.

يمنحك هذا مزيدًا من التحكم، مما يسمح لك بإخفاء محتويات العنصر وإظهاره لاحقًا بسرعة.

مقارنته بالطرق الشائعة الأخرى لإخفاء محتويات العنصر:

  • display: none: يخفي العنصر ويؤدّي إلى إتلاف حالة عرضه. وهذا يعني أن إظهار العنصر يكون مكلفًا مثل عرض عنصر جديد بالمحتوى نفسه.
  • visibility: hidden: يخفي العنصر ويحافظ على حالة عرضه. لا يؤدي ذلك حقًا إلى إزالة العنصر من المستند، لأنه (وهو شجرة فرعية) لا يزال يشغل مساحة هندسية على الصفحة ويمكن النقر فوقه. ويعمل أيضًا على تعديل حالة العرض في أي وقت تكون هناك حاجة إليه حتى عندما تكون مخفية.

من ناحية أخرى، يخفي content-visibility: hidden العنصر مع الحفاظ على حالة عرضه، وبالتالي، إذا كانت هناك أي تغييرات يجب أن تحدث، لا تحدث أي تغييرات إلا عند ظهوره مجددًا (أي عندما تتم إزالة السمة content-visibility: hidden).

من حالات استخدام content-visibility: hidden الرائعة هي عند تنفيذ أدوات التمرير الافتراضية المتقدمة وقياس التنسيق. إنها أيضًا رائعة لتطبيقات الصفحة الواحدة (SPA). يمكن ترك طرق عرض التطبيقات غير النشطة في نموذج العناصر في المستند (DOM) مع تطبيق content-visibility: hidden لمنع عرضها مع الاحتفاظ بحالة التخزين المؤقت. ويؤدي ذلك إلى عرض العرض بسرعة عندما يصبح نشطًا مرة أخرى.

التأثيرات على مدى استجابة الصفحة لتفاعلات المستخدم (INP)

مدى استجابة الصفحة لتفاعلات المستخدم (INP) هو مقياس يقيّم قدرة الصفحة على الاستجابة بشكل موثوق للبيانات التي أدخلها المستخدم. يمكن أن تتأثر الاستجابة بأي مقدار زائد من العمل الذي يحدث على سلسلة التعليمات الرئيسية، بما في ذلك عرض العمل.

كلما كان بإمكانك تقليل عرض العمل على أي صفحة معيّنة، يعني ذلك أنّ سلسلة التعليمات الرئيسية تتيح للسلسلة الرئيسية فرصة الاستجابة بشكل أسرع للبيانات التي يُدخلها المستخدمون. ويشمل ذلك عرض العمل، واستخدام سمة content-visiblity CSS عند الاقتضاء يمكن أن يقلل من عمل العرض، خاصةً أثناء بدء التشغيل عندما يتم الانتهاء من معظم أعمال العرض والتنسيق.

ويؤثر تقليل عرض الإعلانات في تأثير "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) مباشرةً. عندما يحاول المستخدمون التفاعل مع صفحة تستخدم السمة content-visibility بشكل صحيح لتأجيل تنسيق العناصر المعروضة خارج الشاشة وعرضها، تمنح سلسلة التعليمات الرئيسية فرصة للاستجابة للعمل المهم المرئي للمستخدم. ويمكن أن يؤدي ذلك إلى تحسين مقياس INP لصفحتك في بعض الحالات.

الخلاصة

من خلال content-visibility ومواصفات احتواء CSS، ستتوفّر بعض التحسينات المشوّقة في ملف CSS الخاص بك. لمزيد من المعلومات حول هذه الخصائص، اطلع على: