指南
水合 (Hydration)
将 JavaScript 事件监听器附加到服务器渲染的 HTML 上,使页面具有交互性的 CPU 密集型过程。
发表于
目录
定义
将 JavaScript 事件监听器附加到服务器渲染的 HTML 上,使页面具有交互性的 CPU 密集型过程。
水合是服务器端渲染 (SSR) 和客户端渲染 (CSR) 之间的桥梁。服务器发送一个静态的 HTML 外壳,以便用户立即看到页面,然后浏览器下载并执行 JavaScript 包来“水合”该外壳,使按钮可点击、表单可提交。
为什么重要
水合是一种税。当浏览器对 DOM 进行水合时,主线程被阻塞。在高端笔记本电脑上,这发生在几毫秒内。在慢速网络上的低端移动设备上,页面看起来已经完全加载,但如果用户点击按钮,页面将看起来冻结,直到水合完成。
水合 vs. 可恢复性 (Resumability)
- 水合: 浏览器必须下载框架,在内存中重建整个组件树,并重新执行组件函数以弄清楚在哪里附加事件监听器。
- 可恢复性: 服务器将应用程序的精确状态序列化到 HTML 本身中。浏览器不需要重新执行任何组件代码;它只是准确地从服务器停止的地方“恢复”执行。
相关概念
- 阅读完整指南:作为架构的 Web 性能
- 另请参阅:群岛架构、渲染策略