Щодня розробляються та запускаються тисячі сучасних веб-додатків, і разом із цим поширенням зростає складність. З часом багато розробників стикаються з проблемами, пов’язаними з оптимізацією продуктивності програми.
Прогресивна гідратація є одним із методів вирішення цих проблем. Поступово завантажуючи інтерактивні компоненти, розробники можуть покращити роботу користувача, особливо у великих програмах. Незалежно від того, створюєте ви сайт електронної комерції чи інформаційну панель, поступова гідратація може скоротити час завантаження, підвищити продуктивність і забезпечити безперебійну роботу. Якщо ви використовуєте такі фреймворки, як React або Next.js, у вас уже є необхідні інструменти, щоб почати роботу.
Прогресивна гідратація проти ледачого завантаження: у чому різниця?
Хоча ліниве завантаження та прогресуюча гідратація є спорідненими поняттями, вони не однакові. Відкладене завантаження затримує завантаження ресурсів (таких як зображення, код JavaScript або компоненти), поки вони не знадобляться. Замість того, щоб завантажувати все заздалегідь, завантажуються лише ті частини програми, які є видимими або необхідними на даний момент. Цей підхід часто використовується для покращення продуктивності початкового завантаження сторінки шляхом розбиття великого коду або пакетів активів на менші фрагменти та завантаження їх на вимогу, коли користувач прокручує сторінку.
Прогресивна гідратація — це більш спеціалізована техніка, яка використовується в основному в програмах візуалізації на стороні сервера (SSR). Коли веб-сторінка спочатку відображається на сервері, HTML надсилається клієнту, а JavaScript використовується для «гідратації» статичного HTML, перетворюючи його на інтерактивну програму React (або подібну структуру). Замість одночасного зволоження всієї програми прогресивне зволоження зосереджується на зволоженні спочатку лише інтерактивних компонентів та інших критичних частин, а решту відкладає до потреби. Це покращує показник часу до взаємодії (TTI) і є особливо корисним для великих програм SSR, де ви не хочете блокувати введення користувача, чекаючи, поки вся програма буде гідратована.
У той час як поступова гідратація може включати відкладене завантаження для поступової гідратації та завантаження компонентів, її основною метою є оптимізація процесу часткової гідратації після рендерингу на стороні сервера, тоді як відкладене завантаження використовується для оптимізації завантаження ресурсів як на стороні клієнта, так і на стороні сервера.
Як прогресивна гідратація покращує продуктивність
Традиційні методи гідратації можуть призвести до значних проблем із продуктивністю, наприклад користувачам доводиться чекати, поки вся сторінка гідратується, перш ніж вони зможуть з нею взаємодіяти, що негативно впливає на TTI. Великі пакети JavaScript надсилаються відразу, уповільнюючи сторінку та збільшуючи час завантаження, особливо у великих програмах, як-от складні платформи електронної комерції або інформаційні панелі з великою кількістю даних.
Однак, спочатку зволожуючи лише важливі частини сторінки, користувачі можуть взаємодіяти з критично важливими функціями (такими як навігація та кнопки), тоді як другорядні, нетермінові компоненти (наприклад, нижні колонтитули та рідко використовувані віджети) зволожують пізніше. Плюси прогресивної гідратації включають скорочення часу блокування та покращення таких показників, як перше зафарбовування вмісту (FCP) і затримка першого введення (FID).
Уявіть собі сайт електронної комерції, де користувача в першу чергу цікавлять деталі продукту та варіанти оплати. При традиційній гідратації вся сторінка — включно з нижнім колонтитулом, оглядами продукту та бічною панеллю — повинна бути гідратована, перш ніж користувач зможе задіяти. Навпаки, поступова або часткова гідратація гарантує, що інформація про продукт і кнопки оформлення стануть інтерактивними майже миттєво, дозволяючи менш критичним елементам гідратуватися у фоновому режимі.
Прогресивна гідратація вибірково застосовується в певних інтерфейсних фреймворках, таких як React і Next.js, які підтримують SSR.
Як працює прогресивна гідратація
Поступове зволоження включає три ключові етапи:
- Початкове навантаження: Програма надсилає клієнту мінімальну кількість коду HTML і JavaScript. Зазвичай це включає критичні компоненти інтерфейсу користувача, необхідні для початкової взаємодії з користувачем.
- Пріоритет завантаження: Процес гідратації ділиться на дві фази:
- Критична гідратація: Основні елементи, необхідні для негайного введення користувачем, спочатку гідратуються. Це може включати панелі навігації, важливі форми або інші інтерактивні компоненти.
- Відкладене зволоження: Компоненти, які вважаються менш критичними (такі як зображення, моди чи вторинний вміст), зволожуються після того, як критичні компоненти повністю інтерактивні. Це може включати компоненти, що знаходяться поза екраном, або ще невидимі.
- Фонове завантаження: коли користувачі взаємодіють із програмою, решта нетермінових компонентів гідратується у фоновому режимі. Цим можна ефективно керувати за допомогою таких методів, як відкладене завантаження, коли компоненти завантажуються лише тоді, коли вони потрапляють у вікно перегляду або за потреби.
Впровадження прогресивної гідратації
Щоб використовувати прогресивне зволоження, вам потрібно ініціалізувати програму React. Якщо вам потрібна допомога у створенні програми React, я рекомендую проконсультуватися, як створити програму React за допомогою Vite.
Після створення базової програми перейдіть до app.js якщо ви використовуєте JavaScript, або app.tsx якщо ви виберете TypeScript.
Для початкового рендерингу вашої програми ви повинні визначити пріоритетність найважливіших компонентів, з якими користувачі будуть взаємодіяти відразу. У простому додатку React це може включати такі ключові елементи, як заголовок і область основного вмісту. Зосередившись на цих критично важливих компонентах, користувачі можуть майже миттєво працювати з основними функціями вашого додатка, а інші компоненти можна поступово зволожувати за потреби.
Замініть існуючий код app.js з:
Тепер створіть інший файл JavaScript у тому ж каталозі, що й app.js названий DeferredComponent.js (або ім'я на ваш вибір). Помістіть у нього наведений нижче код JavaScript; він експортує ваш другий компонент у реалізацію прогресивної гідратації.
Потім створіть третій файл під назвою noncriticalcomponent.jsде відбудеться NonCriticalComponent які будуть імпортовані в DeferredComponent вище.
Якщо ви бажаєте, ви можете реалізувати фонову гідратацію за допомогою прослуховувача подій або API видимості, щоб забезпечити гідратацію некритичних компонентів, коли користувач, імовірно, побачить їх. Щоб цього досягти, необхідно внести зміни в NonCriticalComponent.js файл.
Що відбувається під капотом?
Я витрачу хвилинку, щоб пояснити, що відбувається в app.js файл. По-перше, він імпортує React і DeferredComponent з іншого файлу. The Header Компонент — це простий функціональний компонент, який відображає заголовок із заголовком програми, тоді як MainContent компонент відображає вітальне повідомлення.
Головний App компонент повертає a div що містить Header, MainContent і DeferredComponent. The DeferredComponent містить коментар, який вказує, що його завантаження буде відкладено, щоб спершу зосередитися на відображенні основних компонентів. Нарешті, він експортує App компонент для використання в інших частинах програми.
The DeferredComponent файл спочатку імпортує React разом із lazy і Suspense компоненти з бібліотеки React. Далі він використовує lazy функція для динамічного імпорту NonCriticalComponent. Це означає NonCriticalComponent не завантажуватиметься, доки не буде потрібно, допомагаючи оптимізувати продуктивність за рахунок скорочення початкового часу завантаження програми.
The DeferredComponent визначається як функціональний компонент, який використовує Suspense. У його межах а fallback prop забезпечує індикатор завантаження (у цьому випадку простий
Loading...
), які відображатимуться під час NonCriticalComponent завантажується. Після завершення завантаження компонента він відображається замість резервного вмісту.
Далі, експорт DeferredComponent робить його доступним для використання в інших частинах програми. Це налаштування дозволяє відкласти завантаження некритичних компонентів, гарантуючи, що основні частини програми мають пріоритет під час початкового рендерингу.
Нарешті, початковий код у NonCriticalComponent імпортує React з бібліотеки React і визначає функціональний компонент під назвою NonCriticalComponent. Цей компонент повертає простий елемент JSX, зокрема a
The updated NonCriticalComponent забезпечує фонове зволоження для посилення навантаження. The useState хук створює змінну стану, isVisibleякий відстежує, чи знаходиться компонент у полі зору. The useEffect гачок встановлює IntersectionObserver для моніторингу видимості компонента у вікні перегляду. Коли компонент стає видимим, спостерігач оновлюється isVisible до true і від’єднується.
Якщо компонент невидимий, він повертає a
Upon initial load, the Header і MainContent компоненти відображаються негайно, надаючи користувачам миттєвий доступ до основних елементів і взаємодії. Тим часом, DeferredComponentякий містить некритичний компонент, починає завантажуватися у фоновому режимі через механізм відкладеного завантаження React.
Під час цієї фази резервний користувальницький інтерфейс (UI), наприклад «Завантаження…», інформує користувачів про те, що додатковий вміст витягується або обробляється, таким чином підвищуючи сприйняту продуктивність. Одного разу NonCriticalComponent повністю завантажено, воно замінює резервне повідомлення, пропонуючи додаткову функціональність або інформацію, яка покращує загальну взаємодію з користувачем.
Це дозволяє користувачам взаємодіяти із заголовком і основним вмістом, не завантажуючи всю програму, що забезпечує більш плавну роботу, особливо в повільніших мережах. Загалом поступове завантаження програми робить доступними основні функції, а додатковий вміст додається, коли вона стає готовою.
Оцініть ефективність завантаження сторінки
Існує кілька доступних методів для належної оцінки прогресивного впливу гідратації. Одним із підходів є відстеження показників часу завантаження за допомогою Performance API, який дозволяє реєструвати часові мітки в ключових точках, таких як початкове завантаження сторінки та коли критичні компоненти повністю відображені.
Такі інструменти, як Lighthouse, можуть вимірювати такі важливі показники, як FCP і TTI. Тестування взаємодії з користувачем, під час якого ви збираєте відгуки про очікуваний час завантаження та швидкість реакції, також може дати цінну інформацію.
Тестування програми в різних умовах мережі, наприклад 3G або 4G, за допомогою інструментів розробника, як-от Chrome DevTools, може виявити, як поступова гідратація впливає на продуктивність при повільніших з’єднаннях. Інструменти профілювання продуктивності, такі як React Profiler, можуть аналізувати час візуалізації та інтерактивність компонентів. Нарешті, рішення для моніторингу реальних користувачів (RUM), такі як Google Analytics або Sentry, можуть надавати реальні дані про взаємодію користувачів і показники продуктивності, пропонуючи чітке уявлення про те, як працює програма за реальних умов використання.
Висновок
Прогресивне зволоження пропонує потужне рішення для підвищення продуктивності та взаємодії з користувачами сучасних веб-додатків. Відкладаючи завантаження некритичних компонентів, розробники можуть визначати пріоритетність важливого вмісту, дозволяючи користувачам швидше взаємодіяти з ключовими функціями навіть у повільніших мережах. Ця техніка не тільки покращує сприйняття продуктивності, але й забезпечує плавніший і чутливіший інтерфейс, оскільки решта вмісту поступово завантажується у фоновому режимі.
Використовуючи відкладене завантаження, IntersectionObserver і інструменти моніторингу продуктивності, розробники можуть точно налаштувати програми для оптимальної швидкості та задоволення користувачів. Оскільки веб-продуктивність стає все більш важливою, прогресивна стратегія зволоження є ефективним способом створення ефективних і зручних програм.
Шукаєте таких експертів з JavaScript, як Zziwa, щоб розширити вашу технічну команду? Тоді перегляньте посібник Andela щодо вибору правильного партнера для аутсорсингу Node.js.
YOUTUBE.COM/THENEWSTACK
Технологія розвивається швидко, не пропустіть жодної серії. Підпишіться на наш канал YouTube, щоб транслювати всі наші подкасти, інтерв’ю, демонстрації тощо.
ПІДПИСАТИСЯ
