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

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

Jeremy Wagner

Una Kravets

Vladimir Levin

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

دعم المتصفح

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

احتواء CSS

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

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

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

• 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".

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

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

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

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

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

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

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

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

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

.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 كحجم عنصر نائب بدلاً من المحتوى المعروض.

في Chromium 98 والإصدارات الأحدث، يتوفّر إصدار 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. لمزيد من المعلومات حول هذه المواقع، يُرجى الاطّلاع على:

• مواصفات احتواء CSS
• مستندات MDN في CSS الاحتواء
• مسودّات CSSWG