[1,[4,"h2",null,[5,"Framer 网站如何变得交互式？"]],[4,"p",null,[5,"网站由 HTML 构成，并通过 JavaScript 实现交互。为了确保初始页面加载速度快，我们首先发送 HTML，以便用户（和搜索引擎）尽快看到内容。这通常被称为"],[2,{"href":"https://www.framer.com/features/seo-performance/#server-side-rendering","openInNewTab":true,"smoothScroll":false,"relValues":[],"motionChild":true,"nodeId":"ewhHuyXZI","scopeId":"contentManagement"},[4,"a",null,[5,"服务器端渲染"]]],[5,"。"]],[4,"p",null,[5,"同时，我们加载“水合”过程所需的 JavaScript（是的，就像给植物浇水一样�"],[2,{"href":"https://emojipedia.org/potted-plant","openInNewTab":true,"smoothScroll":false,"relValues":[],"motionChild":true,"nodeId":"ewhHuyXZI","scopeId":"contentManagement"},[4,"a",null,[5,"�"]]],[5,"）。这个过程本身由我们的首选框架 React 处理，它为每个 Framer 网站提供动力。从技术上讲，水合作用接收到的 HTML 并附加事件监听器，例如，它使元素监听“点击”或“滚动”。此时您的网站能够处理用户交互，我们称之为“交互式”。"]],[4,"p",null,[5,"一些基于 JavaScript 的元素需要从服务器获取数据以提供交互性。例如，我们的主页在红色区域需要用户登录状态："]],[4,"img",{"alt":"","width":"2612","height":"1423","src":"https://framerusercontent.com/images/hqYRDDN3RAYoozzc8mR4Qw3SQQ.png","srcSet":"https://framerusercontent.com/images/hqYRDDN3RAYoozzc8mR4Qw3SQQ.png?scale-down-to=512&width=5224&height=2846 512w,https://framerusercontent.com/images/hqYRDDN3RAYoozzc8mR4Qw3SQQ.png?scale-down-to=1024&width=5224&height=2846 1024w,https://framerusercontent.com/images/hqYRDDN3RAYoozzc8mR4Qw3SQQ.png?scale-down-to=2048&width=5224&height=2846 2048w,https://framerusercontent.com/images/hqYRDDN3RAYoozzc8mR4Qw3SQQ.png?scale-down-to=4096&width=5224&height=2846 4096w,https://framerusercontent.com/images/hqYRDDN3RAYoozzc8mR4Qw3SQQ.png?width=5224&height=2846 5224w","className":"framer-image","style":{"aspectRatio":"5224 / 2846"}}],[4,"p",null,[5,"在其他 Framer 网站上，它可能是获取评论、最新博客文章，甚至是天气。每次获取都需要一点时间。特别是如果一次获取导致另一次获取，这很常见。所有这些都在水合过程中完成。"]],[4,"p",null,[5,"接下来，我们将更深入地探讨技术细节，向您展示幕后实际发生的事情。如果您对技术细节不感兴趣，可以直接跳到最后一章的结果。"]],[4,"h2",null,[5,"React：Suspense 与 Hydration 如何协同工作"]],[4,"p",null,[5,"为了在水合过程中获取数据，我们使用了一个名为“Suspense”的 React 功能，它是一种告诉 React“这个组件正在等待某些东西”的方式——在我们的例子中，等待从网络请求接收到的数据。"]],[4,"p",null,[5,"以前，我们为此目的只使用了一个 Suspense 实例。这是它的简化外观："]],[4,"div",{"className":"framer-text-module","style":{"width":"100%","height":"auto"},"data-width":"fill"},[3,"module:pVk4QsoHxASnVtUBp6jr/UMT424UULl8P2eS9710n/CodeBlock.js:default",{"code":"\n \n \n

\n {\" \"} {/* ⬅️ triggers Suspense */}\n {\" \"} {/* ⬅️ triggers Suspense */}\n \n \n","language":"JSX"}]],[4,"p",null,[5,"这意味着，每当我们为“博客”和“页脚”获取数据时，单个 Suspense 标签（“Suspense 边界”）就会触发（也称为“挂起”）。虽然 React 并行初始化这两个组件的数据获取，但细节决定成败："]],[4,"p",null,[5,"在水合过程中，每当一个组件暂停，然后成功获取数据后取消暂停时，水合作用就会从捕获暂停组件的 Suspense 边界重新开始。"]],[4,"p",null,[5,"这意味着在上面的例子中，对于每一次数据获取，React 都会从"],[4,"code",null,[5,""]],[5,"下方的单一 Suspense 标签开始水合。更具体地说，当获取“博客”的数据时，React 会重新触发"],[4,"code",null,[5,"

"]],[5,"以及两个"],[4,"code",null,[5,""]],[5,"组件子组件的渲染过程。当获取“页脚”的数据时，也会发生这种情况。"]],[4,"p",null,[5,"基本上，我们会重复很多次。每个获取组件都会导致父组件再次渲染。在示例中，如果我们假设每个数据获取器都有子组件，我们将总共获得 12 次渲染，因为"],[4,"code",null,[5,""]],[5,"和"],[4,"code",null,[5,"

"]],[5,"将渲染 3 次，博客数据获取器及其子组件渲染 2 次，页脚数据获取器及其子组件渲染 1 次（= 6 + 4 + 2）。"]],[4,"h2",null,[5,"通过细粒度 Suspense 实现更快速的 Hydration"]],[4,"p",null,[5,"渲染像示例中那样少量组件速度很快，但真实的网站会获取大量数据并包含数百或数千个组件。此外，渲染速度还取决于设备（尤其是 CPU）。有些用户可能拥有比其他用户更慢的设备，我们也希望他们也能享受到同样高速的体验。"]],[4,"p",null,[5,"下意识地，我们首先想到了记忆化 ("],[4,"code",null,[5,"React.memo"]],[5,")——这肯定会阻止 React 再次渲染这些组件，对吧？不，因为 React 会为 Suspense 边界的子组件安排重新渲染。"]],[4,"p",null,[5,"为了解决这个问题，我们在获取数据的组件周围添加了细粒度的 Suspense 边界："]],[4,"div",{"className":"framer-text-module","style":{"width":"100%","height":"auto"},"data-width":"fill"},[3,"module:pVk4QsoHxASnVtUBp6jr/UMT424UULl8P2eS9710n/CodeBlock.js:default",{"code":"\n \n \n

\n {\" \"} {/* � has its own boundary */}\n {\" \"} {/* � has its own boundary */}\n \n \n","language":"JSX"}]],[4,"p",null,[5,"现在，每个 Suspense 边界都会捕获其下方树中的挂起组件。这意味着，React 会从暂停的地方恢复水合。例如，Framer 主页从 1 个粒度边界增加到了 151 个。"]],[4,"p",null,[5,"这使得它成为一个快速的线性过程"],[4,"code",null,[5,"O(n)"]],[5," "],[4,"em",null,[5,"（其中"]],[4,"code",null,[4,"em",null,[5,"n"]]],[4,"em",null,[5,"是组件树中的节点数）"]],[5,"，因为每个组件在水合过程中只渲染一次，无论树中有多少数据获取器。"]],[4,"h2",null,[5,"这对 Framer 网站意味着什么"]],[4,"p",null,[5,"根据参与我们 Beta 测试的网站测量，这一改变使许多设备上的水合速度"],[4,"strong",null,[5,"。根据网站在水合过程中需要多少数据，在较慢的设备上甚至可以快达 200%。"]]],[4,"video",{"autoPlay":true,"loop":true,"muted":true,"playsInline":true,"src":"https://framerusercontent.com/assets/EXS1BmvEHegiJtipxuPDQz4OUZk.mp4","className":"framer-image"}],[4,"video",{"autoPlay":true,"loop":true,"muted":true,"playsInline":true,"src":"https://framerusercontent.com/assets/ZhECBCLwn7wL0sfwalntiejrE.mp4","className":"framer-image"}],[4,"p",null,[4,"em",null,[5,"（左：之前，右：之后。在装有 M2 Pro 处理器、CPU 节流 6 倍、4G 快速网络且 Chrome 配置文件全新的设备上录制。）"]]],[4,"p",null,[5,"总而言之，这意味着滚动动画开始工作得更早，用户可以更快地与 Framer 网站互动。与此同时，我们还改进了包含许多 SVG 的页面，现在我们并行启动 SVG 加载的水合作用。这使得 cookie 横幅显示得更快——比以前快 42%，据手机设备访问的所有 Framer 网站测量。"]],[4,"p",null,[5,"即使是高速设备也受益于这些变化。这是一个未受限的 M2 Pro Mac 笔记本，连接速度为 100 MBit/s："]],[4,"video",{"autoPlay":true,"loop":true,"muted":true,"playsInline":true,"src":"https://framerusercontent.com/assets/YlZ8GvO8nZMoDfcb1BRfponM.mp4","className":"framer-image"}],[4,"p",null,[4,"em",null,[5,"（左：之前，右：之后。在装有 M2 Pro Mac、100 MBit/s 互联网连接且 Chrome 配置文件全新的设备上录制。）"]]],[4,"p",null,[4,"strong",null,[5,"如果您是 Framer 用户，此更改将在编辑和重新发布网站时自动应用。"]],[4,"br",null],[4,"br",{"className":"trailing-break"}]],[4,"p",null,[4,"br",{"className":"trailing-break"}]],[4,"p",null,[4,"br",null],[4,"em",null,[5,"特别感谢我们的性能工程师 Ivan Akulov，他最初调查并找到了原因。"]]],[4,"p",null,[5,"——"]],[4,"p",null,[5,"如果您有任何与性能相关的问题或疑虑，我们的性能团队很乐意在我们的"],[2,{"href":"https://www.framer.community/feed","openInNewTab":true,"smoothScroll":false,"relValues":[],"motionChild":true,"nodeId":"ewhHuyXZI","scopeId":"contentManagement"},[4,"a",null,[5,"社区论坛"]]],[5,"中与您交流。"]]]

工程专栏

助力Framer网站实现快速且坚固的技术内幕

React 错误处理的陷阱

React 错误处理的陷阱

React 错误处理的陷阱

网站现在的交互速度提升了 50%

网站现在的交互速度提升了 50%

网站现在的交互速度提升了 50%

Framer 如何实现 AVIF

Framer 如何实现 AVIF

Framer 如何实现 AVIF

高级响应式排版：Fit Text 的技术实现

高级响应式排版：Fit Text 的技术实现

高级响应式排版：Fit Text 的技术实现

助力Framer网站
实现快速且坚固的技术内幕