content-visibilityفي Chromium 85. يجب أن تؤثر بشكل كبير على سرعة التحميل الأول والعرض الأول على الموقع ؛ علاوة على ذلك ، يمكنك التفاعل مع المحتوى الذي تم عرضه حديثًا على الفور ، دون انتظار تحميل باقي المحتوى. content-visibilityيفرض على وكيل المستخدم تخطي وضع العلامات والطلاء على العناصر غير الموجودة على الشاشة. في الواقع ، إنه يعمل مثل التحميل البطيء ، ليس فقط عند تحميل الموارد ، ولكن عند عرضها.
في هذا العرض التوضيحي
content-visibility: auto، عند تطبيقه على تقسيم المحتوى ، فإنه يوفر سرعة تصيير أسرع بمقدار 7 أضعاف
الدعم
content-visibilityاستنادًا إلى العناصر الأولية من مواصفات احتواء CSS . بينما content-visibilityيتم دعمه حاليًا في Chromium 85 فقط (ويعتبر "نموذجيًا" في Firefox) ، يتم دعم مواصفات الاحتواء في معظم المتصفحات الحديثة.
مبدأ التشغيل
الهدف الرئيسي من احتواء CSS هو تحسين أداء عرض محتوى الويب من خلال توفير عزل يمكن التنبؤ به لشجرة DOM الفرعية عن باقي الصفحة.
في الأساس ، يمكن للمطور إخبار المتصفح بأجزاء الصفحة التي يتم تغليفها كمجموعة من المحتوى ، مما يسمح للمتصفحات بمعالجة المحتوى دون الحاجة إلى مراعاة الحالة خارج الشبكة الفرعية. يمكن للمستعرض تحسين عرض الصفحة من خلال معرفة الأشجار الفرعية التي تحتوي على محتوى معزول.
هناك أربعة أنواع من احتواء CSS ، كل منها يعمل كقيمة لخاصية CSS
containويمكن دمجه مع الآخرين:
size: , . , , .layout: . , , , .style: , , , (, ). , , , — .paint: . , , . , .
content-visibility
قد يكون الأمر محيرًا في تحديد القيم
containالأفضل للاستخدام ، حيث لا يمكن أن تعمل تحسينات المتصفح إلا مع المجموعة الصحيحة من المعلمات. من الجدير التلاعب بالقيم لمعرفة ما هو الأفضل تجريبياً. من الأفضل استخدامه content-visibilityللضبط التلقائي contain. content-visibility: autoيضمن أقصى زيادة ممكنة في الإنتاجية بأقل جهد.
في الوضع التلقائي ، تحصل الخاصية على سمات التخطيط والنمط والطلاء ، وعندما يخرج العنصر من حواف الشاشة ، فإنه يحصل على الحجم ويتوقف عن الرسم والتحقق من المحتوى. هذا يعني أنه بمجرد أن يغادر عنصر ما منطقة العرض ، تتوقف العناصر التابعة له عن العرض. يتعرف المستعرض على حجم العنصر ، ولكنه لا يفعل شيئًا آخر حتى تكون هناك حاجة إلى العرض.
مثال - مدونة السفر
عادة ما تحتوي مدونة السفر على العديد من القصص مع الصور والأوصاف. إليك ما يحدث في متصفح نموذجي عندما ينتقل إلى مدونة السفر:
- يتم تحميل جزء من الصفحة من الشبكة بالإضافة إلى الموارد اللازمة
- يقوم المستعرض بتصميم ووضع كل المحتوى على الصفحة دون التمييز بين المحتوى المرئي والمحتوى غير المرئي
- ينتقل المستعرض إلى الخطوة 1 حتى يتم تحميل كافة الموارد
في الخطوة 2 ، يعالج المتصفح المحتوى ويبحث عن التغييرات. يقوم بتحديث أنماط وتخطيط أي عنصر جديد ، إلى جانب العناصر التي ربما تكون قد تغيرت نتيجة للتحديثات. هذا هو التقديم. تأخذ وقت.
الآن دعونا نتخيل ما نضعه
content-visibility: autoفي كل منشور بالمدونة. النظام الأساسي هو نفسه: يقوم المتصفح بتنزيل أجزاء من الصفحة وعرضها. ومع ذلك ، فإن الاختلاف في مقدار العمل المنجز في الخطوة 2.Ccontent-visibilityسيقوم المتصفح بتصميم ووضع المحتوى الذي يشاهده المستخدم حاليًا (على الشاشة). ولكن عند التعامل مع القصص خارج الشاشة ، سيتخطى المتصفح عرض العنصر بالكامل ويستضيف الحاوية فقط. سيكون أداء تحميل هذه الصفحة كما لو كانت قد ملأت المنشورات على الشاشة وحاويات فارغة لكل منشور خارجها. اتضح بشكل أسرع ، حيث اكتسب ما يصل إلى 50 ٪ من وقت التحميل. في مثالنا ، نرى تحسنًا من عرض 232 مللي ثانية إلى 30 مللي ثانية ، وهو تحسن بمقدار 7 أضعاف في الأداء.
ماذا عليك أن تفعل للاستفادة من هذه الفوائد؟ أولاً ، نقسم المحتوى إلى أجزاء:
بعد ذلك ، نطبق التصميم اللاحق على الأجزاء:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* */
}
, , . , , , .
contain-intrinsic-size
لفهم الفوائد المحتملة
content-visibility، يجب أن يفرض المتصفح قيودًا على الحجم للتأكد من أن عرض المحتوى لا يؤثر على أبعاد العناصر. هذا يعني أنه سيتم وضع العنصر كما لو كان فارغًا. إذا لم يتم تحديد ارتفاع العنصر ، فسيكون مساوياً للصفر.
لحسن الحظ ، تتمتع css بقدرة أخرى ،
contain-intrinsic-sizوالتي توفر القدرة على تحديد الحجم الفعلي لعنصر ما إذا تم ضغطه. في مثالنا ، قمنا بتعيين العرض والارتفاع على 1000 بكسل تقريبًا.
هذا يعني أنه سيتم وضعه كما لو كان هناك ملف "حجم داخلي" واحد ، مع التأكد من أن div لا يزال يشغل مساحة.
contain-intrinsic-siz .
إخفاء المحتوى من content-visibility: hidden
content-visibility: hiddenيفعل ما content-visibility: autoيفعله مع المحتوى خارج الشاشة. ومع ذلك ، على عكس تلقائي ، فإنه لا يبدأ تلقائيًا في عرض المحتوى على الشاشة.
قارن هذا بالطرق المعتادة لإخفاء محتوى العنصر:
- display: none: يخفي العنصر ويزيل حالة العرض. هذا يعني أن استرداد عنصر سيكلف نفس الحمل مثل إنشاء عنصر جديد.
- visibility: hidden: يخفي العنصر ويترك حالة العرض. لا يؤدي هذا في الواقع إلى إزالة العنصر من المستند ، لأنه (وشجرته الفرعية) لا يزال يشغل مساحة هندسية على الصفحة ولا يزال من الممكن النقر فوقه. يقوم أيضًا بتحديث حالة العرض كلما دعت الحاجة ، حتى لو كانت مخفية.
content-visibility: hiddenمن ناحية أخرى ، يخفي العنصر مع الحفاظ على حالة العرض بحيث إذا كانت هناك حاجة إلى أي تغييرات ، فلن تحدث إلا عند عرض العنصر على الشاشة.
خاتمة
content-visibilityوتتيح لك مواصفات احتواء CSS تسريع عرض وتحميل الصفحات بشكل كبير دون أي معالجات معقدة ، على CSS العاري.
مواصفات احتواء CSS
لمستندات MDN حول
مسودات احتواء CSS
تم استخدام المعلومات التالية في إعداد المواد - web.dev/content-visibility
إعلان
خوادم لمواقع الاستضافة - هذا عن ملحمتنا ! جميع الخوادم "خارج الصندوق" محمية من هجمات DDoS والتثبيت التلقائي للوحة تحكم VestaCP المريحة. من الأفضل أن تجربها مرة واحدة ؛)
