content-visibility: ویژگی جدید CSS که عملکرد رندر شما را افزایش می دهد

زمان بارگذاری اولیه را با پرش از رندر محتوای خارج از صفحه بهبود دهید.

Jeremy Wagner

Una Kravets

Vladimir Levin

ویژگی content-visibility ، که در Chromium 85 راه اندازی می شود، ممکن است یکی از تاثیرگذارترین ویژگی های CSS جدید برای بهبود عملکرد بارگذاری صفحه باشد. content-visibility به عامل کاربر امکان می‌دهد تا از کار رندر یک عنصر، از جمله طرح‌بندی و نقاشی، تا زمانی که مورد نیاز باشد صرفنظر کند. از آنجایی که رندر حذف می‌شود، اگر بخش بزرگی از محتوای شما خارج از صفحه باشد، استفاده از ویژگی content-visibility باعث می‌شود بارگیری کاربر اولیه بسیار سریع‌تر شود. همچنین امکان تعامل سریعتر با محتوای روی صفحه را فراهم می کند. بسیار تمیز.

پشتیبانی از مرورگر

content-visibility به موارد اولیه در CSS Containment Spec متکی است. در حالی که content-visibility در حال حاضر فقط در Chromium 85 پشتیبانی می‌شود (و برای فایرفاکس «ارزش نمونه‌سازی» را دارد)، Containment Spec در اکثر مرورگرهای مدرن پشتیبانی می‌شود.

CSS Containment

هدف کلیدی و فراگیر CSS Containment این است که با ارائه جداسازی قابل پیش بینی یک زیردرخت DOM از بقیه صفحه، بهبود عملکرد محتوای وب را فعال کند.

اساساً یک توسعه‌دهنده می‌تواند به مرورگر بگوید که چه بخش‌هایی از صفحه به‌عنوان مجموعه‌ای از محتوا کپسوله شده‌اند، و به مرورگرها اجازه می‌دهد درباره محتوا بدون نیاز به در نظر گرفتن وضعیت خارج از زیردرخت استدلال کنند. دانستن اینکه کدام بیت از محتوا (درخت فرعی) حاوی محتوای ایزوله است به این معنی است که مرورگر می تواند تصمیمات بهینه سازی را برای رندر صفحه بگیرد.

چهار نوع محتوی CSS وجود دارد که هر کدام یک مقدار بالقوه برای ویژگی contain CSS است که می‌تواند در فهرستی از مقادیر جدا شده با فاصله ترکیب شود:

• size : محتوی اندازه روی یک عنصر تضمین می کند که جعبه عنصر را می توان بدون نیاز به بررسی فرزندان آن قرار داد. این به این معنی است که اگر تمام چیزی که نیاز داریم اندازه عنصر باشد، می‌توانیم به طور بالقوه از طرح‌بندی نوادگان صرفنظر کنیم.
• layout : محدودیت چیدمان به این معنی است که نوادگان بر روی چیدمان خارجی سایر کادرهای صفحه تأثیر نمی گذارند. این به ما این امکان را می‌دهد که اگر تنها کاری که می‌خواهیم انجام دهیم این است که جعبه‌های دیگر را بچینیم، به طور بالقوه طرح‌بندی فرزندان را نادیده بگیریم.
• style : Style containment تضمین می‌کند که ویژگی‌هایی که می‌توانند تأثیرات بیشتری بر فرزندان خود داشته باشند، از عنصر فرار نکنند (مثلاً شمارنده‌ها). این به ما این امکان را می‌دهد که به طور بالقوه از محاسبه سبک برای فرزندان خود بگذریم، اگر تمام چیزی که می‌خواهیم این است که سبک‌ها را بر روی عناصر دیگر محاسبه کنیم.
• paint : محتوی رنگ تضمین می کند که فرزندان جعبه حاوی خارج از محدوده آن نمایش داده نمی شوند. هیچ چیز به وضوح نمی تواند عنصر را سرریز کند، و اگر عنصری خارج از صفحه باشد یا در غیر این صورت قابل مشاهده نباشد، فرزندان آن نیز قابل مشاهده نخواهند بود. این به ما این امکان را می‌دهد که اگر عنصر خارج از صفحه نمایش باشد، از نقاشی فرزندان خودداری کنیم.

رد شدن از کار رندر با content-visibility

ممکن است تشخیص این که از کدام مقادیر محدود استفاده شود دشوار باشد، زیرا بهینه سازی مرورگر ممکن است تنها زمانی شروع شود که یک مجموعه مناسب مشخص شده باشد. می‌توانید با مقادیر بازی کنید تا ببینید چه چیزی بهترین کار را انجام می‌دهد ، یا می‌توانید از ویژگی CSS دیگری به نام content-visibility برای اعمال خودکار محتوای مورد نیاز استفاده کنید. content-visibility تضمین می‌کند که بیشترین دستاوردهای عملکردی را که مرورگر می‌تواند با حداقل تلاش شما به‌عنوان یک توسعه‌دهنده ارائه دهد، دریافت کنید.

ویژگی content-visibility چندین مقدار را می‌پذیرد، اما auto آن چیزی است که عملکرد آنی را بهبود می‌بخشد. عنصری که content-visibility: auto layout ، style و paint خودکار دستاوردها. اگر عنصر خارج از صفحه باشد (و در غیر این صورت به کاربر مربوط نیست - عناصر مرتبط آنهایی هستند که فوکوس یا انتخاب را در زیردرخت خود دارند)، همچنین محدودیت size پیدا می کند (و رنگ آمیزی و تست کردن محتوای آن را متوقف می کند).

این یعنی چی؟ به طور خلاصه، اگر عنصر خارج از صفحه باشد، فرزندان آن رندر نمی شوند. مرورگر اندازه عنصر را بدون در نظر گرفتن محتوای آن تعیین می کند و در آنجا متوقف می شود. بیشتر رندرها، مانند استایل و چیدمان زیردرخت عنصر حذف می شوند.

با نزدیک شدن عنصر به viewport، مرورگر دیگر محتوی size را اضافه نمی کند و شروع به نقاشی و تست کردن محتوای عنصر می کند. این کار رندرینگ را قادر می‌سازد دقیقاً به موقع انجام شود تا توسط کاربر دیده شود.

یادداشتی در مورد دسترسی

یکی از ویژگی های content-visibility: auto این است که محتوای خارج از صفحه در مدل شی سند و بنابراین درخت دسترسی (برخلاف visibility: hidden ) در دسترس باقی می ماند. این بدان معناست که می‌توان محتوا را در صفحه جستجو کرد و به آن پیمایش کرد، بدون اینکه منتظر بارگذاری یا به خطر انداختن عملکرد رندر شود.

با این حال، جنبه دیگر این است که عناصر برجسته با ویژگی‌های سبک مانند display: none یا visibility: hidden نیز در درخت دسترس‌پذیری هنگامی که خارج از صفحه نمایش هستند ظاهر می‌شوند، زیرا مرورگر این سبک‌ها را تا زمانی که وارد نمای نمایشی نشوند نمایش نمی‌دهد. . برای جلوگیری از قابل مشاهده شدن آنها در درخت دسترسی، که به طور بالقوه باعث درهم ریختگی می شود، حتما aria-hidden="true" نیز اضافه کنید.

مثال: وبلاگ سفر

یک وبلاگ مسافرتی معمولاً شامل مجموعه‌ای از داستان‌ها با چند تصویر و متنی توصیفی است. در اینجا چیزی است که در یک مرورگر معمولی هنگام رفتن به یک وبلاگ مسافرتی اتفاق می افتد:

1. بخشی از صفحه به همراه منابع مورد نیاز از شبکه دانلود می شود.
2. مرورگر تمام محتویات صفحه را بدون در نظر گرفتن اینکه آیا محتوا برای کاربر قابل مشاهده است، استایل می کند و نمایش می دهد.
3. مرورگر به مرحله 1 باز می گردد تا زمانی که تمام صفحه و منابع دانلود شوند.

در مرحله 2، مرورگر تمام محتویات را پردازش می کند و به دنبال چیزهایی است که ممکن است تغییر کرده باشند. سبک و چیدمان هر عنصر جدید را به همراه عناصری که ممکن است در نتیجه به‌روزرسانی‌های جدید تغییر کرده باشند، به‌روزرسانی می‌کند. این رندر کار است. این کار زمان می برد.

اکنون در نظر بگیرید که چه اتفاقی می‌افتد اگر 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

اگر بخواهید محتوا را بدون توجه به اینکه روی صفحه است یا نه، بدون رندر نگه دارید و در عین حال از مزایای حالت رندر کش استفاده کنید، چه؟ Enter: 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 Containment Spec به این معنی است که برخی از افزایش عملکرد هیجان انگیز مستقیماً به فایل CSS شما می آیند. برای اطلاعات بیشتر در مورد این خواص، بررسی کنید:

• CSS Containment Spec
• اسناد MDN در CSS Containment
• پیش نویس های CSSWG