У цій статті я розповім, як ви можете зменшити час рендерингу вашої вебсторінки більше ніж у 7 разів, використовуючи простий CSS. Ми докладно розглянемо властивість content-visibility, як вона працює та як ви можете позбутися від display:none; для приховування/показування елементів з кращою продуктивністю.
content-visibility може бути особливо корисним у SPA (Single Page Application) з довгими списками чи статтями, або на сторінках, які використовують нескінченний скролінг чи лінійне завантаження. Коротко кажучи, content-visibility:auto; запобігає рендерингу секції на вебсторінці до того, як вона стане видимою для користувача.
Коли ви переходите на вебсторінку, ось що відбувається в загальному:
- Частина документа вебсайту завантажується з сервера.
- Браузер використовує цю частину, обчислює стилі, розраховує макет для всього вмісту сторінки та рендерить його.
- Крок 1 продовжується, поки всі ресурси не будуть завантажені та відрендерені.
Проблема полягає у кроці 2: він виконує всі великі обчислення для елементів і секцій, які знаходяться поза екраном і не видимі для користувача. Цей складний процес займає час. Але якщо ми використаємо content-visibility:auto;, це змінює роботу кроку 2, оскільки тепер він обчислює стилі та макети тільки для елементів, які зараз видимі для користувача.
Припустимо, є секція, яка знаходиться поза екраном. Якщо ми використаємо цю властивість, її нащадки спочатку не будуть відрендерені. Браузер тільки визначає розмір елемента, не враховуючи його вміст, і зупиняється на цьому. Більшість решти процесів, таких як стилізація та обчислення макету піддерева елемента, пропускаються. Тепер, коли елемент наближається до області видимості, браузер починає відображати цю секцію та її вміст.
Як це впливає на доступність?
Секції, які використовують content-visibility:auto;, все ще включаються в DOM-дерево та дерево доступності, навіть якщо вони ще не відображені. Це корисно, оскільки вміст цих секцій все ще можна прочитати, шукати і на них можна перейти.
Тепер розглянемо елемент/секцію, що використовує content-visibility:auto;.
Він з’являється на екрані → Браузер відображає його → Ми прокручуємо вниз → Він знову йде за межі екрана.
Коли це відбувається, елемент видаляється з дерева рендерингу, як тільки він більше не видимий. То чи означає це, що якщо він знову з’явиться на екрані, йому потрібно пройти весь процес рендерингу заново? Відповідь: Ні. Коли він повертається, браузер не перераховує все з самого початку. Після того, як елемент був відрендерений, він кешує всю важливу інформацію, таку як внутрішній розмір, макет і обчислені стилі. Цей кеш використовується для швидкого повторного рендерингу елемента в оптимізованому вигляді.
Елементи, які не використовують властивість content-visibility, також видаляються з дерева рендерингу? Ні, вони не видаляються з дерева рендерингу, навіть якщо більше не видимі на екрані. Це може призвести до більших витрат пам'яті та процесорних ресурсів.
Але почекайте! content-visibility не приходить один. Він приносить свого друга contain-intrinsic-size. Без цієї властивості, якщо елемент не має явно визначеної висоти і покладався лише на вміст для заповнення висоти, його висота буде дорівнювати 0, коли він знаходиться поза екраном (оскільки нащадки ще не відрендерені, щоб заповнити висоту). Тому ми використовуємо contain-intrinsic-size, щоб вказати природний розмір елемента.
.—about-section {
content-visibility: auto;
contain-intrinsic-size: 1500px;
}
Щоб зрозуміти це простіше, просто уявіть, що замість цілого "about section" (який зараз знаходиться поза екраном), ставиться порожній блок висотою 1500px. Як тільки він потрапляє на екран, браузер відображає його вміст і коригує фактичну висоту в момент рендерингу.
Отже, за допомогою цієї властивості, вона буде виконувати роль замінника для фактичної секції.
contain-intrinsic-size: auto 1500px; — Що означає цей auto тут?
Це змушує браузер запам'ятовувати останній відрендерений розмір, якщо такий є, і використовувати його замість розміру-заповнювача, вказаного розробником. Розглянемо два випадки для цього:
- Випадок 1: Елемент не відрендерений жодного разу
→ Тепер, заповнювач буде мати висоту 1500px. - Випадок 2: Елемент відрендерений раніше хоча б один раз
→ Коли він рендерився вперше, браузер запам’ятає фактичний розмір (скажімо, 1640px). Тепер він використає цей 1640px замість 1500px як розмір заповнювача.
Приховування вмісту з кешуванням
Якщо ми використовуємо content-visibility: hidden;/visible; для приховування/показування елементів, це дає кращу продуктивність, оскільки використовуються дані з кешованого стану рендерингу.
Якщо ми використовуємо display:none;, це приховує елемент і знищує його з дерева DOM. Якщо ми знову зробимо елемент видимим, це буде дорогим процесом, оскільки елемент буде рендеритись як абсолютно новий з тим самим вмістом.
Але використовуючи content-visibility: hidden;, ми приховуємо елемент, зберігаючи його стан рендерингу.
Це може бути надзвичайно корисним для зменшення часу рендерингу в таких випадках:
- Вкладені інтерфейси (Tabbed UIs)
- Модальні вікна / спливаючі вікна (Modal Windows / Popups)
Перекладено з: Skip the lag, keep the cache: The Hidden Shortcut to Lightning-Fast Web Pages