Framer 网站如何变得交互式？

网站由 HTML 构成，并通过 JavaScript 实现交互。为了确保初始页面加载速度快，我们首先发送 HTML，以便用户（和搜索引擎）尽快看到内容。这通常被称为服务器端渲染。

同时，我们加载“水合”过程所需的 JavaScript（是的，就像给植物浇水一样��）。这个过程本身由我们的首选框架 React 处理，它为每个 Framer 网站提供动力。从技术上讲，水合作用接收到的 HTML 并附加事件监听器，例如，它使元素监听“点击”或“滚动”。此时您的网站能够处理用户交互，我们称之为“交互式”。

一些基于 JavaScript 的元素需要从服务器获取数据以提供交互性。例如，我们的主页在红色区域需要用户登录状态：

在其他 Framer 网站上，它可能是获取评论、最新博客文章，甚至是天气。每次获取都需要一点时间。特别是如果一次获取导致另一次获取，这很常见。所有这些都在水合过程中完成。

接下来，我们将更深入地探讨技术细节，向您展示幕后实际发生的事情。如果您对技术细节不感兴趣，可以直接跳到最后一章的结果。

React：Suspense 与 Hydration 如何协同工作

为了在水合过程中获取数据，我们使用了一个名为“Suspense”的 React 功能，它是一种告诉 React“这个组件正在等待某些东西”的方式——在我们的例子中，等待从网络请求接收到的数据。

以前，我们为此目的只使用了一个 Suspense 实例。这是它的简化外观：

<App>
  <Suspense>
    <Page>
      <Header />
      <DataFetching content="blog" /> {" "} {/* ⬅️ triggers Suspense */}
      <DataFetching content="footer" /> {" "} {/* ⬅️ triggers Suspense */}
    </Page>
  </Suspense>
</App>

这意味着，每当我们为“博客”和“页脚”获取数据时，单个 Suspense 标签（“Suspense 边界”）就会触发（也称为“挂起”）。虽然 React 并行初始化这两个组件的数据获取，但细节决定成败：

在水合过程中，每当一个组件暂停，然后成功获取数据后取消暂停时，水合作用就会从捕获暂停组件的 Suspense 边界重新开始。

这意味着在上面的例子中，对于每一次数据获取，React 都会从<App>下方的单一 Suspense 标签开始水合。更具体地说，当获取“博客”的数据时，React 会重新触发<Header>以及两个<DataFetching>组件子组件的渲染过程。当获取“页脚”的数据时，也会发生这种情况。

基本上，我们会重复很多次。每个获取组件都会导致父组件再次渲染。在示例中，如果我们假设每个数据获取器都有子组件，我们将总共获得 12 次渲染，因为<Page>和<Header>将渲染 3 次，博客数据获取器及其子组件渲染 2 次，页脚数据获取器及其子组件渲染 1 次（= 6 + 4 + 2）。

通过细粒度 Suspense 实现更快速的 Hydration

渲染像示例中那样少量组件速度很快，但真实的网站会获取大量数据并包含数百或数千个组件。此外，渲染速度还取决于设备（尤其是 CPU）。有些用户可能拥有比其他用户更慢的设备，我们也希望他们也能享受到同样高速的体验。

下意识地，我们首先想到了记忆化 (React.memo)——这肯定会阻止 React 再次渲染这些组件，对吧？不，因为 React 会为 Suspense 边界的子组件安排重新渲染。

为了解决这个问题，我们在获取数据的组件周围添加了细粒度的 Suspense 边界：

<App>
  <Suspense>
    <Page>
      <Header />
      <Suspense><DataFetching content="blog" /></Suspense> {" "} {/* � has its own boundary */}
      <Suspense><DataFetching content="footer" /></Suspense> {" "} {/* � has its own boundary */}
    </Page>
  </Suspense>
</App>

现在，每个 Suspense 边界都会捕获其下方树中的挂起组件。这意味着，React 会从暂停的地方恢复水合。例如，Framer 主页从 1 个粒度边界增加到了 151 个。

这使得它成为一个快速的线性过程O(n) （其中n是组件树中的节点数），因为每个组件在水合过程中只渲染一次，无论树中有多少数据获取器。

这对 Framer 网站意味着什么

根据参与我们 Beta 测试的网站测量，这一改变使许多设备上的水合速度。根据网站在水合过程中需要多少数据，在较慢的设备上甚至可以快达 200%。

（左：之前，右：之后。在装有 M2 Pro 处理器、CPU 节流 6 倍、4G 快速网络且 Chrome 配置文件全新的设备上录制。）

总而言之，这意味着滚动动画开始工作得更早，用户可以更快地与 Framer 网站互动。与此同时，我们还改进了包含许多 SVG 的页面，现在我们并行启动 SVG 加载的水合作用。这使得 cookie 横幅显示得更快——比以前快 42%，据手机设备访问的所有 Framer 网站测量。

即使是高速设备也受益于这些变化。这是一个未受限的 M2 Pro Mac 笔记本，连接速度为 100 MBit/s：

（左：之前，右：之后。在装有 M2 Pro Mac、100 MBit/s 互联网连接且 Chrome 配置文件全新的设备上录制。）

如果您是 Framer 用户，此更改将在编辑和重新发布网站时自动应用。

特别感谢我们的性能工程师 Ivan Akulov，他最初调查并找到了原因。

——

如果您有任何与性能相关的问题或疑虑，我们的性能团队很乐意在我们的社区论坛中与您交流。