بهینهسازی عملکرد رندر با ویژگی جدید CSS: content-visibility
آیا تا به حال به این فکر کردهاید که چگونه میتوانید سرعت بارگذاری صفحات وب خود را به طور چشمگیری افزایش دهید؟ ویژگی جدید CSS به نام content-visibility پاسخی است که منتظرش بودید! این ویژگی قدرتمند به مرورگرها اجازه میدهد تا رندر محتوای خارج از صفحه نمایش را به تعویق بیندازند و در نتیجه، زمان بارگذاری اولیه و تعاملات کاربر را به شکل قابل توجهی بهبود ببخشند. در این مقاله، ما به بررسی این ویژگی شگفتانگیز، نحوه عملکرد آن و چگونگی استفاده از آن در پروژههای واقعی میپردازیم.
CSS Containment چیست؟
هدف اصلی CSS Containment، بهبود عملکرد رندر صفحات وب از طریق ایزولهسازی پیشبینیپذیر زیرشاخههای DOM از بقیه صفحه است. این ویژگی به توسعهدهندگان اجازه میدهد تا به مرورگر اطلاع دهند که کدام بخشهای صفحه به صورت مستقل عمل میکنند، و به این ترتیب، مرورگر میتواند تصمیمهای بهینهسازی هوشمندانهتری برای رندر صفحه بگیرد.
چهار نوع مختلف از CSS Containment وجود دارد که هر کدام میتوانند به عنوان مقادیر ویژگی contain استفاده شوند:
- size: تضمین میکند که اندازه یک المان بدون نیاز به بررسی فرزندان آن محاسبه شود.
- layout: باعث میشود که فرزندان المان روی چیدمان سایر المانهای صفحه تأثیر نگذارند.
- style: ویژگیهایی که میتوانند روی المانهای دیگر تأثیر بگذارند (مانند شمارشگرها) را محدود میکند.
- paint: اطمینان میدهد که فرزندان المان خارج از محدوده آن نمایش داده نمیشوند و اگر المان خارج از صفحه باشد، فرزندان آن نیز رندر نمیشوند.
قدرت content-visibility در بهینهسازی رندر
ویژگی content-visibility به شما امکان میدهد تا با کمترین تلاش، بیشترین بهبود عملکرد را از مرورگر دریافت کنید. با استفاده از مقدار auto، این ویژگی به طور خودکار شامل layout، style و paint میشود. اگر المان خارج از صفحه نمایش باشد، size containment نیز اعمال میشود و رندر فرزندان آن به تعویق میافتد. این یعنی مرورگر نیازی به پردازش محتوای خارج از دید کاربر ندارد، که باعث صرفهجویی قابل توجه در زمان رندر میشود.
تصویر: در این دمو، اعمال content-visibility: auto به بخشهای محتوا، عملکرد رندر را تا 7 برابر بهبود داده است.
وقتی المان به viewport نزدیک میشود، مرورگر شروع به رندر محتوای آن میکند، دقیقاً به موقع برای نمایش به کاربر. این رویکرد "just-in-time" بهینهسازی را به سطح جدیدی میبرد.
هشدار: برای حفظ بهینهسازی، از فراخوانی APIهای DOM که باعث اجبار رندر میشوند (مانند مواردی که در اینجا ذکر شدهاند) در زیرشاخههای متأثر از
content-visibilityخودداری کنید.
ملاحظات دسترسیپذیری
یکی از مزایای بزرگ content-visibility: auto این است که محتوای خارج از صفحه همچنان در مدل شیء سند (DOM) و درخت دسترسیپذیری باقی میماند. این بدان معناست که کاربران میتوانند محتوای صفحه را جستجو کرده یا به آن پیمایش کنند، بدون اینکه منتظر بارگذاری آن بمانند یا عملکرد رندر را فدا کنند.
با این حال، باید مراقب المانهای نشانهگذاری (landmark) باشید که از ویژگیهایی مانند display: none یا visibility: hidden استفاده میکنند. این المانها ممکن است در درخت دسترسیپذیری ظاهر شوند و باعث شلوغی شوند. برای جلوگیری از این مشکل، از ویژگی aria-hidden="true" استفاده کنید.
مثال عملی: وبلاگ سفر
بیایید یک مثال واقعی را بررسی کنیم: یک وبلاگ سفر با داستانها، تصاویر و متنهای توصیفی. بدون content-visibility، مرورگر تمام محتوای صفحه را، حتی بخشهای خارج از دید، پردازش میکند که زمانبر است.
ویدیو: در این دمو، استفاده از content-visibility: auto در بخشهای مختلف وبلاگ سفر، زمان رندر را از 232 میلیثانیه به 30 میلیثانیه کاهش داده است.
با اعمال content-visibility: auto به هر داستان در وبلاگ، مرورگر فقط محتوای قابل مشاهده را رندر میکند و برای بخشهای خارج از صفحه، تنها جعبه المان را پردازش میکند. نتیجه؟ کاهش بیش از 50% در هزینه رندر و در این مثال، بهبود 7 برابری عملکرد!
تصویر: نمونهای از وبلاگ سفر. برای دمو، به Codepen مراجعه کنید.
برای پیادهسازی، کافی است محتوا را به بخشهایی تقسیم کنید و قانون CSS زیر را اعمال کنید:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* در بخش بعدی توضیح داده میشود */
}
تصویر: نمونهای از تقسیمبندی محتوا به بخشهایی با کلاس story برای اعمال content-visibility: auto. برای دمو، به Codepen مراجعه کنید.
تعیین اندازه طبیعی با contain-intrinsic-size
برای استفاده بهینه از content-visibility، مرورگر باید اندازه المان را بدون در نظر گرفتن محتوای آن محاسبه کند. این ممکن است باعث شود المانهایی بدون ارتفاع مشخص، به ارتفاع صفر برسند که میتواند باعث جابجایی نوار پیمایش شود.
ویژگی contain-intrinsic-size این مشکل را حل میکند. این ویژگی به شما امکان میدهد اندازه طبیعی المان را مشخص کنید، به عنوان مثال 1000px برای ارتفاع و عرض. این باعث میشود المان به عنوان یک جعبه با اندازه مشخص رفتار کند، حتی اگر محتوای آن رندر نشود.
مقدار auto در contain-intrinsic-size به مرورگر اجازه میدهد آخرین اندازه رندر شده را به خاطر بسپارد، که برای اسکرول بینهایت بسیار مفید است، زیرا اندازهگیریها با مرور کاربر بهبود مییابد.
مخفی کردن محتوا با content-visibility: hidden
اگر میخواهید محتوا بدون توجه به موقعیتش در صفحه رندر نشود، اما حالت رندر کششده حفظ شود، از content-visibility: hidden استفاده کنید. این ویژگی مشابه content-visibility: auto عمل میکند، اما محتوا حتی در صورت ورود به viewport رندر نمیشود.
این ویژگی در مقایسه با روشهای دیگر مخفیسازی مانند display: none (که حالت رندر را از بین میبرد) یا visibility: hidden (که همچنان فضای هندسی اشغال میکند) مزایای بیشتری دارد. content-visibility: hidden حالت رندر را حفظ میکند و فقط هنگام نمایش مجدد المان بهروزرسانیهای لازم را انجام میدهد.
این ویژگی برای برنامههای تکصفحهای (SPA) و اسکرولرهای مجازی پیشرفته بسیار مناسب است. به عنوان مثال، مهندسان فیسبوک گزارش دادهاند که با استفاده از این ویژگی، زمان ناوبری تا 250 میلیثانیه بهبود یافته است.
تأثیر بر Interaction to Next Paint (INP)
INP معیاری است که پاسخگویی صفحه به ورودیهای کاربر را ارزیابی میکند. کاهش کار رندر، مانند استفاده از content-visibility، به نخ اصلی فرصت بیشتری برای پاسخ به تعاملات کاربر میدهد. این میتواند INP صفحه را بهبود بخشد، به ویژه در زمان راهاندازی که بیشترین کار رندر انجام میشود.
نتیجهگیری
ویژگی content-visibility یک ابزار قدرتمند برای بهینهسازی عملکرد وب است که مستقیماً در CSS شما کار میکند. با استفاده هوشمندانه از این ویژگی، میتوانید زمان بارگذاری صفحه را کاهش دهید، تعاملات کاربر را سریعتر کنید و تجربه کاربری بهتری ارائه دهید. برای اطلاعات بیشتر، منابع زیر را بررسی کنید:
با به کار بردن content-visibility، وب سریعتر و پاسخگوتر در دسترس شماست!