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

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

Una Kravets
Jeremy Wagner
Vladimir Levin
Vladimir Levin

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

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

دعم المتصفح

دعم المتصفح

  • Chrome: 85.
  • الحافة: 85.
  • Firefox: 125.
  • Safari: 18-

المصدر

تعتمد 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".

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

في هذا المثال، نضع المتوقع لمدونة السفر الخاصة بنا على اليمين، ونطبق 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 كحجم عنصر نائب بدلاً من المحتوى المعروض.

في 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 هو مقياس يُقيّم قدرة الصفحة على الاستجابة بشكل موثوق للبيانات التي يدخلها المستخدم. يمكن أن تتأثر الاستجابة بأي قدر زائد من العمل الذي يتم تنفيذه في سلسلة المحادثات الرئيسية، بما في ذلك عمل العرض.

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

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

الخاتمة

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