Qwik 可恢复性说明

**Qwik 中的可恢复性是一个革命性的概念，它最大限度地减少了需要在客户端下载和执行的 JavaScript 数量。**

它允许 Qwik 应用程序从服务器上中断的地方“恢复”，而不需要在客户端上重播或重新补充整个应用程序状态。

以下是 Qwik 中可恢复性的解释：

**1. 具有应用程序状态的预渲染 HTML：**

Qwik 应用程序在服务器上预渲染，生成的 HTML 包含作为 DOM 的一部分嵌入的应用程序所需的所有必要状态和上下文。

**2. 无需客户端补液：**

i. 与传统框架（React、Angular 等）不同，Qwik 不需要“rehydration”，即重新执行组件以重建状态并附加事件监听器的过程。

ii. 相反，Qwik 直接使用服务器提供的 HTML，并在用户与应用程序交互时仅激活应用程序的必要部分。

**3. 细粒度代码加载（惰性执行）：**

Qwik 将应用程序分解为微模块。这些是按需加载的小 JavaScript 块。例如：

i. 仅当单击按钮时才会加载按钮单击处理程序。

ii. 仅当用户与表单交互时才会下载表单验证脚本。

**4. 恢复状态：**

i. 当 Qwik 应用在客户端上初始化时，它已经“知道”应用程序状态，因为该状态已在服务器上序列化并包含在 HTML 中。

ii. Qwik 从中断的地方恢复执行，而不是重建整个组件树。

**5.基于事件的激活：**

Qwik 仅在特定事件（如按钮点击或输入更改）需要时才激活应用程序部件。这减少了浏览器最初执行的 JavaScript 量。

**为什么可恢复性如此强大 -**

性能改进：

Qwik 提供了快速的“交互时间”（TTI），因为预先下载了最少的 JavaScript。

由于不需要水化步骤，页面加载后立即可交互。

优化资源使用：

只需下载用户交互功能的代码。这使得 Qwik 成为大型应用程序或通过较慢的网络/设备访问的应用程序的理想选择。

SEO和用户体验：

服务器端渲染 (SSR) 可确保搜索引擎和用户立即获得完全渲染的 HTML 页面。

JavaScript 是延迟加载的，因此用户体验流畅，不会因大量脚本执行而导致延迟。

**示例场景**

传统框架：

在 React 应用中，当页面加载时，整个组件树都会重新加载。即使用户只与一个按钮交互，整个应用也需要重新运行其 JavaScript。

Qwik 的方法：

在 Qwik 应用上，页面以纯 HTML 形式加载。当用户点击按钮时，Qwik 只会获取按钮的处理程序代码并执行它，而不会影响应用的其余部分。

**关键要点**

Qwik 中的可恢复性是构建快速、高效且可扩展的 Web 应用程序的一大变革。通过允许应用程序从服务器停止的地方继续执行，而无需进行完整的补水过程，它大大减少了 JavaScript 占用空间并提高了用户的性能。