Як не гаяти час на завантаження невидимого контенту

Браузер не розрізняє невидимий вміст від видимого

Зазвичай не весь вміст вебсторінки поміщається на одному екрані.

Коли сторінка відкривається, браузер обчислює розміри та позиції всіх DOM-елементів на ній. Елементи завантажуються, навіть якщо більшість вмісту ховається і буде видимою, лише коли користувач прогорне сторінку.

Браузеру потрібно трохи часу на повне завантаження DOM, адже без вказівок розробників він не розрізняє видимі елементи та сховані. У прикладі вебсторінки, описаної далі, ми проілюструємо цей важливий факт — браузер застосовує правила CSS і обчислює елемент навіть тоді, коли він або його батьківський елемент:

• перебувають поза зоною видимості;

• сховані як overflow;

• мають значення visibility:hidden.

Чим більше розмір HTML сторінки, тим більше часу браузеру потрібно, щоб показати вміст, і тим довше користувачі чекатимуть, поки щось з'явиться на екрані. Ніхто не любить чекати. То як скоротити час обробки та відтворення величезних сторінок?

Ми зосередимося на вебзастосунках, що представляють табличні дані, але цей метод працює для будь-якої сторінки зі структурованим вмістом.

Як скоротити час завантаження вмісту поза зоною видимості

Існує два способи не завантажувати елементи, які розташовані поза зоною видимості.

Нескінченне гортання

Досить популярний метод — пришвидшити завантаження сторінки, зберігаючи в DOM лише вміст вікна перегляду на поточній позиції прокручування. У таких підходах DOM не змінюється, але його вузли сховані, якщо вони не потрапляють в екран перегляду.

Такі підходи погані й для користувачів, і для розробників. Розробники мають оптимізувати додатковий код JavaScript, тоді як користувачів дратує, коли вони не можуть знайти весь вміст сторінки за допомогою звичайної функції пошуку (Ctrl+F) у браузері. Також неможливо використовувати посилання на елементи в таких сторінках.

Що зручніше — сайти з динамічно вставленим вмістом чи сайти, розбиті на сторінки? Не знаємо, як ви, а ми вважаємо віртуальне прокручування чи не найдратівливішою річчю у світі.

Властивість CSS content-visibility:auto

З погляду ефективності та зусиль розробників, content-visibility незрівнянно пришвидшує завантаження сторінки. Якщо застосувати цю властивість до елемента, браузер повністю ігноруватиме його вміст, поки сторінка не прогортається до нього.

content-visibility каже браузеру, що дочірні елементи цільового елемента не виходять за межі своїх батьківських елементів. Тобто, коли елемент поза екраном, його дочірні елементи також сховані. Очевидно, якщо браузер показує лише елементи у вікні перегляду, то сторінка стає видимою та інтерактивною набагато швидше, ніж така сама сторінка з усім завантаженим вмістом поза екраном.

Однак щоб знати, які елементи з'являються у вікні під час прокручування, браузеру потрібно розмістити всі елементи content-visibility на свої місця, навіть якщо вони поза екраном. Такий макет створюється досить швидко, адже браузеру потрібен лише розмір елемента, чітко зазначений у його властивостях CSS.

Величезні таблиці — ідеальний варіант для використання content-visibility, оскільки точну висоту кожного рядка можна легко попередньо обчислити у коді JavaScript та призначити рядку за допомогою властивості CSS height.

Якщо для елемента не вказано значення height, то браузер вважає, що його висота дорівнює 0. Аби побачити, що відбувається, ви можете клацнути кнопки Row content-visibility, no height на зразку сторінки contentvisibility.onrender.com, а потім спробуйте прокрутити сторінку до останнього рядка у зразку таблиці.

Попри найвищу швидкість завантаження, content-visibility не заважає користувачам шукати вміст поза зоною видимості на екрані за допомогою стандартної комбінації клавіш Ctrl+F. Також можна вільно посилатися на цей вміст.

Приклад сторінки

Тепер, після тривалого вступу, перегляньте ілюстрації contentvisibility.onrender.com. Коли ви відкриваєте зразок сторінки, то бачите таблицю, що складається з 5000 рядків з 20 комірками в кожному рядку. Для швидшого завантаження таблицю побудовано з елементів div замість спеціалізованих теґів HTML table, tr і td.

Рожеве тло охоплює ділянку елемента div, що містить таблицю.

Висота root div дорівнює висоті екрана. Якщо ви трохи прокрутите сторінку, то побачите таке:

Усі сірі кнопки змінюються не більше, ніж клас root div. Коли клас змінюється, нові правила CSS застосовуються до root div або його безпосередніх дочірніх елементів.

Отже, коли ви натискаєте кнопку Screen overflow clipped, клас root div змінюється, а до div застосовується CSS-властивість overflow:clip:

Вертикальна смуга прокрутки зникає разом із переповненням екрана:

На екрані залишається лише 0,5% таблиці. Але зверніть увагу, скільки часу вам доведеться чекати, поки браузер намалює крихітний шматочок таблиці. А тепер порівняйте з часом очікування на повне завантаження таблиці.

Якщо ви натиснете кнопку Container invisible, до root div застосується властивість visibility:hidden:

Ви не побачите невидимої таблиці, але знатимете, коли браузер завершить завантаження, тому що з'явиться смуга вертикальної прокрутки.

Ви зауважили, що невидима таблиця завантажується швидше, ніж така сама видима таблиця?

Тоді ви можете оцінити приголомшливий вплив content-visibility на швидкість завантаження сторінки. Якщо натиснути кнопку Row content-visibility, до root div застосується інший клас. У результаті div позбувається раніше отриманих властивостей:

А до рядків div застосовується властивість content-visibility:

Таблиця з'являється майже миттєво після натискання кнопки. Також стає доступний пошук. Показуються координати комірок таблиці. Координати останньої комірки таблиці — 19 499. Наприклад, ми шукаємо 4999, що є індексом останнього рядка.

Для порівняльного аналізу натискаємо жовтогарячу кнопку Start benchmarking. Скрипт десять разів змінить клас root div для кожного з кількох тестових класів і виміряє два відтинки часу:

• час на заміну класу root div, про всяк випадок;

• час, витрачений браузером на завантаження таблиці.

Докладніше цей код ви можете переглянути тут. Але зважайте, що його адаптовано для поточної статті: змінено правила CSS та назви класів.

Коли скрипт завершує вимірювання, з'являється таблиця з результатами порівняльного аналізу:

Тепер ви бачите, що браузер витрачає приблизно так само багато часу на завантаження — і коли вміст поза вікном перегляду, і коли він частково схований чи невидимий взагалі.

Але якщо для браузера вказати властивість content-visibility, він ігнорує невидимий вміст, доки той не з'явиться на екрані. В результаті швидкість завантаження зростає у 3634/227=16 разів.

Властивість content-visibility можна використовувати з будь-яким контентом, але вона найліпше підходить для структурованого вмісту з фіксованою або передбачуваною висотою. Якщо ви розробляєте застосунки, де багато табличних даних, то слід забути про віртуальні прокручування та розбивання на сторінки. На жаль, пам'ять браузера обмежує розмір даних, які можна завантажити в браузер.

Приклад коду можна завантажити з GitHub.