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

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

Jeremy Wagner
Una Kravets
Vladimir Levin
Vladimir Levin

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

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

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

دعم المتصفح

  • 85
  • 85
  • 124

المصدر

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

احتواء CSS

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

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

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

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

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

قد يكون من الصعب معرفة قيم الاحتواء المطلوب استخدامها، لأنّ تحسينات المتصفّح قد لا تبدأ إلا عند تحديد مجموعة مناسبة. يمكنك تغيير القيم من أجل تحديد أفضل ما يناسبك، أو يمكنك استخدام سمة CSS أخرى اسمها 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 حتى يتم تنزيل جميع الصفحات والموارد.

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

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

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

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

الخلاصة

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