Qwik — это еще один фреймворк JavaScript, созданный создателями Angular Ionic и Party Town, который обещает получить высший балл в веб-тестах производительности, отправляя 0 JavaScript во время начальной загрузки. Он оптимизирован для развертывания на периферии, имеет автоматическую ленивую загрузку и избегает гидратации (выполняемой большинством популярных JS-фреймворков, таких как NextJs, Nuxt и т. д.) в пользу возобновляемости.
Гидратация
Гидратация — это процесс, с помощью которого интерактивность может быть добавлена к статической HTML-странице, отображаемой на сервере или статически сгенерированной во время сборки. Фреймворки рендеринга на стороне сервера, такие как NextJS, отправляют HTML вместе с некоторым JavaScript клиенту всякий раз, когда он получает запрос, и клиент отвечает за то, чтобы сделать страницу интерактивной посредством «гидратации», добавляя прослушиватели кликов и обработчики событий.
В Hydration, чтобы связать обработчики событий с правильными элементами DOM, необходимо загрузить, проанализировать и выполнить код для всех компонентов, которые в настоящее время находятся в HTML-коде, отправленном сервером. Это дорогостоящая операция, и создатели Qwik утверждают, что Hydration — это накладные расходы, поскольку клиент снова должен выполнять всю работу, выполняемую сервером во время рендеринга на стороне сервера или генерации статики.
При гидратации создание обработчика событий происходит до того, как событие инициируется, и все возможные обработчики событий создаются и регистрируются, даже если пользователь еще не взаимодействовал со страницей, что приводит к огромным последствиям для производительности.
Возобновляемость
Возобновляемость направлена на обеспечение более быстрой работы за счет сериализации информации, собранной сервером во время рендеринга на стороне сервера или статической генерации, и передачи информации клиенту, а не ее удаления при гидратации и в зависимости от на клиенте, чтобы воссоздать его. Наряду с сериализацией информации и передачей ее вместе с html для поддержки возможности повторного использования Qwik также предоставляет глобальный обработчик событий, который может перехватывать все события, и функцию для ленивого присоединения обработчика событий.
При возобновляемости создание события происходит лениво после того, как событие инициировано пользователем и по мере необходимости. Обработчики событий создаются путем десериализации сериализованных данных, отправленных сервером в формате html, и, таким образом, клиенту не нужно повторять работу, уже выполненную сервером.
Философия Qwik заключается в том, чтобы иметь постоянное время загрузки независимо от того, насколько сложна и велика наша кодовая база. Начальный размер пакета пропорционален сложности, поэтому Qwik нацелен на ленивую загрузку кода, когда это требуется, а не на загрузку, анализ и выполнение всего кода сразу.
Здесь y — размер пакета, b — размер, вносимый фреймворком, который в основном остается постоянным, а mx — размер, вносимый нашим приложением, который меняется и увеличивается с увеличением размера и сложности кода (x). Поскольку Qwik не поставляет JS при загрузке страницы, а JS загружается только при действии пользователя по мере необходимости, размер, вносимый приложением, практически равен 0, а начальный размер пакета — это только размер, вносимый фреймворком, который в основном остается постоянным.
Qwik кажется действительно многообещающим фреймворком будущего, однако он все еще находится в стадии бета-тестирования, и его необходимо протестировать в боевых условиях со сложными приложениями в производственной среде, чтобы он получил широкое распространение в веб-сообществе.
Кредиты изображений: https://www.builder.io/blog
