Привет всем, я Кассон.

На недавнем WWC22,builder.ioизCTO 「miško hevery」（в то же времяAngular/AngularJSиз发明者）发表了一段充满想象力из演讲。

miško hevery

В своем выступлении он представил полнофункциональную структуру SSR. —— Qwik,Эта основа называется«Могу помочь вам удалить 99% JS-кода в вашем проекте»。

как он это сделал,В этой статье мы познакомимQwik。

Плохая производительность? Программисты не берут на себя вину

Давайте сначала поговоримQwik诞生из背景。

для многих2C webприложение（Например, электронная коммерция）,Показатели эффективности первого экрана связаны с удержанием пользователей.,Удержание пользователей зависит от того, сколько денег вы зарабатываете.

Поэтому скорость открытия приложения будет влиять на заработок.

Однако фронтенд-разработчикам нелегко оптимизировать показатели производительности на первом экране. Причина не в том, что разработчики недостаточно стараются.

Давайте посмотрим на два показателя производительности.

Как оптимизировать FCP

FCP（First Contentful Paint,Первый рендеринг контента）Измерение«Время с момента загрузки страницы до завершения рендеринга какой-либо части содержимого страницы на экране»。

текущийwebприложение普遍采用«Внешний фреймворк»развивать,Это означает, что большое количествоJSкод（рамка本身код、Код для сторонних зависимых пакетов...)

отHTMLНачать анализ до последней страницырендеринг,В середине вам еще придется пройти:

1. Скачать фреймворкJSкод
2. 执行рамкаJSкод
3. Страница завершена рендерингом кадров

Это приводит кFCPиндексиз下降。

Чтобы оптимизироватьFCP,Автор фреймворка предложилSSR（Server Side Render,Серверный рендеринг）,Требуется для создания первого экрана на стороне сервераHTML,Это дляFCPЭкономит время, необходимое для выполнения трех вышеуказанных шагов.。

но,TTIПоказатели все еще нуждаются в оптимизации。

Как оптимизировать TTI

TTI（Time to Interactive,Время взаимодействия пользователя）Измерение«Время, необходимое, чтобы страница стала полностью интерактивной»。

Основным измерением является время, необходимое от 1 до 3 ниже:

1. сначала измерьFCPвремя
2. Привязывайте события к элементам на странице
3. После взаимодействия с элементом время реакции на событие находится в пределах 50мс.

использоватьSSRназад,ХотяFCPуменьшать,норамкаhydrate（закачка воды,即рамка使页面能够响应交互）所需времяверноTTIокажет влияние。

видимый,性能瓶颈из源头существоватьJSкод。

React18изSelective Hydrationпроходить«Сначала дайте части взаимодействия с пользователем увлажниться»оптимизироватьTTIиндекс。

но,QwikБолее экстремальный,他из目标да —— 干掉所有不必要изJSкропотливый,Затраченное здесь время включает в себя две части:

• JS作для静态资源加载изкропотливый
• JS运行时изкропотливый

Ультра-ультрамелкозернистый гидрат

Если говорить о традицияхSSRиз粒度да«Вся страница»。

ТакReact18изSelective Hydrationиз粒度да«Компоненты, которые создают взаимодействие»。

ТакQwikиз粒度да«Метод в компоненте»。

Приведите пример,НижеHelloWorldкомпоненты（можно найти,QwikИспользуйте что-то вродеReactиз语法）：

Соответствующий эффект рендеринга страницы:

Открыть браузерNetworkпанель,Сколько страниц будет на этой странице?JSЗапрос？

Поскольку это статический компонент,нет логики,так что ответ：НетJSпросить。

再来看看经典из计数器Counterкомпоненты,по сравнению сHelloWorld,добавлен"Логика изменения состояния кнопки нажатия",Код выглядит следующим образом:

Соответствующий эффект рендеринга страницы:

Открыть браузерNetworkпанель,Сколько страниц будет на этой странице?JSЗапрос？

Ответ по-прежнему：НетJSпросить。

Обратите внимание, что в коде этих двух компонентов компонент используется для определения компонента., естьсимвол。

В счетчике,onClickТакже есть обратный звоноксимвол。

существоватьQwikсередина,назад缀приносить$из函数都да«Ленивая загрузка»из。

hydrateиз粒度有多细,Просто зависит$定义из多细。

например В счетчике,onClickприноситьназад缀,Затем обратный вызов клика загружается лениво.,Итак, выше сгибарендерингне будет содержать«Логика после нажатия» соответствующий JS-код.

после нажатия кнопки,Будет инициировать2индивидуальныйJSпросить,Нет.一индивидуальныйпросить返回изда«Логика после нажатия»：

Нет.2индивидуальныйJSпросить返回изда«Логика перерисовки компонентов»：

После выполнения этих двух фрагментов кода,Counterстановиться1。

Осмотр элемента покажет,прежде чем нажать,button on:click属性середина保存了«Логический адрес»：

после щелчка,会отпереписываться地址下载JSкод,Выполните соответствующую логику.

От отличного до экстремального

Считаете ли вы, что он был оптимизирован до предела? еще нет.

За какое-то длительное присутствие на странице、нуждатьсяJS驱动из模块（например轮播图）,Перед отображением модуля,«Модуль, соответствующий JS»不да必要из。

Например, в приведенном ниже примере с часами на странице имеется длинный список высотой более одного экрана, а внизу списка находятся часы.

Вот как выглядит список при прокрутке до конца:

существоватьClockкомпонентыизuseClientEffect$середина定义«Логика качания стрелок часов»：

Qwikсередина也存существовать类似ReactизuseEffect,但существоватьQwikсередина这индивидуальныйHook可ксуществовать服务端/Выполнение клиента。

чтобы отличить,useClientEffectда«useEffect, который выполняется только на клиенте»。

добавлять$назад缀,代表他да«Ленивая загрузка»。

Конкретный эффект: когда страница прокручивается до открытия часов,useClientEffect$переписыватьсяJSкод都不会просить。

Когда часы раскрыты,Будет инициировать两индивидуальныйJS资源просить：

• useClientEffectиз逻辑
• Clockкомпоненты重新рендерингиз逻辑

Если вы проверите элемент, элемент, соответствующий указателю, не будет двигаться, пока не появятся часы:

когда колокольчик раскрывается,загрузить и выполнитьJSкодназад,Просто начните выполнять анимацию:

гидратные данные

существовать传统SSRсередина,Данные фактически инициализируются дважды:

1. Первый рендеринг страницы,в это время服务端导出изHTMLсередина已经携приносить Над сгибомрендерингиз数据
2. рамкаhydrateназад,Затем данные преобразуются в состояние внутри структуры для последующего использования.

существоватьQwikсередина,页面初始化时会存существоватьtypeдляqwik/jsonизscriptтеги для хранения«Данные, соответствующие активированному статусу на текущей странице»：

как это называется«Активировано»Шерстяная ткань？

Например, вот область комментариев статьи. Вот как она выглядит после рендеринга первого экрана:

这些评论数据会出现существоватьqwik/json保存из数据середина么？

Нет, потому что нет взаимодействия для их активации.

Мы обнаружили, что один комментарий был свернут. При нажатии на него комментарий разворачивается:

При нажатии на это действие будет запрошено:

• 点击逻辑переписыватьсяизJSкод
• Этот комментарий соответствует логике реконфигурации компонента

в это время,评论数据才会出现существоватьqwik/jsonсередина,Потому что взаимодействие с щелчком активирует эти данные.

所ксуществоватьQwikсередина,если в этом нет необходимости,Данные не инициализируются дважды.

HTMLсередина存существовать«Неактивные данные»,qwik/jsonизscript标签середина保存了«Активированные данные»,Эта функция будет иметь очень интересный эффект:

复制调试工具середина«Структура DOM на панели «Элементы»»назад,Затем вставьте его на новую страницу,может быть воспроизведено«Текущий статус взаимодействия страницы»（например,Ранее введенный контент по-прежнему сохраняется в поле ввода):

Скопируйте содержимое в красное поле

Переход на другие фреймворки,можно только воспроизвести«Исходное состояние страницы»。

Не зависнет ли он при запросе JS во время взаимодействия?

Некоторые студенты могут спросить,Если сеть плохая,交互时再проситьJSкод不会让交互变得卡顿么？

Qwikпозволяет указать«Какие компоненты с высокой вероятностью будут эксплуатироваться пользователями?»（Например, электронная коммерцияприложениесередина,Кнопка корзины имеет высокую вероятность нажатия).

这些компоненты逻辑переписыватьсяJSкод会prefetch,Предварительно запрошено, не затрагивая рендеринг первого экрана:

并且这些компонентыprefetchиз顺序да可к调整из。

Это означает, что поведение пользователя можно отслеживать.,к«Частота взаимодействия с пользователем»дляиндекс,作длякомпонентыprefetch优先级из依据,Эвристика повышает производительность приложений.

这才да真正из«ориентированный на пользователя»из性能优化,И это полностью автоматически.

Подвести итог

Сегодня эпоха, когда интерфейсные фреймворки процветают, и разные фреймворки ищут свои уникальные преимущества.

Qwikиз卖点да：ВоляJSкодиз拆分от常见из«Время компиляции»（напримерwebpackРазбивка на части）、«Время выполнения»（напримерdynamic import）,становиться«При общении»。

верноJSкодиз极致拆分,Просто для достижения одной цели - при рендеринге первого экрана,移除你项目середина99%изJSкод。

Что вы думаете об этой операции?