Ленивая нагрузка и гидратация применения взаимодействуют сложным и часто противоречивым способом, в первую очередь потому, что гидратация требует с нетерпением выполнение кода применения, что подрывает преимущества ленивой нагрузки.
Как работает гидратация и ее влияние на ленивую нагрузку
Гидратация-это процесс, с помощью которого HTML-страница с сервером «активируется» на стороне клиента путем запуска JavaScript для прикрепления слушателей событий, восстановления состояния компонентов и сделать страницу интерактивной. Этот процесс включает в себя выполнение компонентов приложения, начиная с корня и пересечение дерева компонентов, чтобы понять состояние, привязки и обработчики событий.
Поскольку гидратация должна посещать каждый компонент в текущем дереве рендеринга, чтобы определить, нужно ли она быть интерактивной, она заставляет все эти компоненты загружаться и выполняться с нетерпением. Это означает, что даже если вы отмечаете некоторые компоненты для ленивой нагрузки, гидратация все равно приведет к немедленному их загрузку, если они являются частью начального дерева рендеринга. Гидратация является последовательной и не может пропустить промежуточные компоненты для непосредственного увлажнения дочерних компонентов, поэтому все родительские компоненты должны быть увлажнены в первую очередь [1] [6].
Почему гидратация саботирует ленивую нагрузку
- Стремление к исполнению: гидратация требует выполнения всех компонентов в дереве рендеринга, что предотвращает ленивую нагрузку от откладывания загрузки кода для этих компонентов.
- Компонентные зависимости: дочерние компоненты зависят от реквизита от родительских компонентов, поэтому родители должны быть увлажнены в первую очередь, заставляя цепь нетерпеливой нагрузки.
- Обработчики событий и состояние: гидратация также должна настроить слушателей событий и восстановить состояние, которое требует заранее запуска кода компонента.
- Бремя разработчика: Для достижения ленивой нагрузки во время гидратации разработчики должны вручную управлять предварительной выборкой и разделением кода, что может быть сложным и подверженным ошибкам [6] [7].
Когда работает ленивая загрузка, несмотря на гидратация
Ленивая нагрузка все еще может быть эффективной для компонентов, которые не являются частью начального дерева рендеринга и, следовательно, не посещаются во время гидратации. Примеры включают:
- Диалоги или модалы, которые открываются при взаимодействии с пользователем
- Компоненты на разных маршрутах, которые изначально не отображаются
В этих случаях компоненты могут быть по -настоящему ленивыми, потому что гидратация не заставляет их немедленное выполнение [6].
методы для оптимизации гидратации и ленивой нагрузки
Некоторые современные рамки и библиотеки пытаются оптимизировать это взаимодействие путем реализации ленивой гидратации или селективной гидратации, где компоненты увлажняются только при необходимости, например, когда они становятся видимыми в точке зрения:
-Библиотеки, такие как `следующая-ленивая гидратация-на-скрулл` in in next.js позволяют отложить гидратация до тех пор, пока компонент прокручивается.
- Используя API recsectionObserver, компоненты могут быть ленивы загружены и увлажнены только при входе в просмотр.
-В Vue/Nuxt, методы и плагины ленивого увлажнения (например, `nuxt-lazy-hydrate ') включают в себя гидратация, пока основной поток не станет холостым или компонентом не будет видна, улучшая время до интерактивных и первых показателей задержки входной задержки [4] [5].
Краткое содержание
Гидратация и ленивая нагрузка в основном расходится, потому что гидратация требует нетерпеливого выполнения компонентов в дереве рендеринга, что предотвращает ленивую нагрузку от отложенного выполнения кода. Тем не менее, ленивая нагрузка остается эффективной для компонентов вне начальной области гидратации. Новые методы, такие как ленивая гидратация, направлены на согласование этого конфликта, откладывая саму гидратацию, повышение производительности и пользовательского опыта.
По сути, гидратация саботирует ленивую нагрузку во время начальной нагрузки на странице, но при тщательном архитектурном выборе и специализированных инструментах разработчики могут оптимизировать, когда и как компоненты гидратируются, чтобы восстановить преимущества ленивой нагрузки [1] [6] [7].
Цитаты:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-loading-arco-incomeable
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-in-nextjs-the-future-orsource-optimization
[5] https://vueschool.io/articles/vuejs-tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/
[6] https://www.builder.io/blog/hydration-sabotages-lazy-loading
[7] https://www.linkedin.com/posts/misko-hevery-3883b1_lazy-loading-is-like-exercise-everyone-say-action-711508693935984641-5oxk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading