首屏可交互延迟全量 hydration 的隐性税与 Islands 选择性激活一、首屏可交互延迟全量 hydration 的隐性税去年给一个内容站做诊断LCP 已经压到 1.2 秒但用户反馈仍是「点不动」。埋点一拉TTI可交互时间高达 3.8 秒比 LCP 晚了 2.6 秒。这事我见过太多团队栽进去——只盯着首屏绘制没人为「能不能立刻点」兜底。SSR 把 HTML 直出首屏确实快。但浏览器拿到 HTML 后还要等 JS bundle 下载、解析、执行再把整棵组件树「注水」一遍把死 HTML 激活成可交互的 React 树。这个过程叫 hydration。在它完成前按钮点了没反应输入框点了不聚焦页面像一张图片。全量 hydration 的问题在于它不区分页面里哪些部分需要交互。一个内容详情页90% 是静态正文与图片只有评论区、点赞按钮、分享浮层需要交互。但 React 仍会为整棵树建立事件绑定与 fiber 节点把本可零 JS 的部分强行拖入注水队列。bundle 越大、组件树越深hydration 越慢。某资讯站点首屏 JS 380KBhydration 耗时 1.9 秒全花在「让一段静态文章变成可点击」上。这笔隐性税LCP 测不出来CWV 也只在 INP 上有所反映但用户体感最直接。Islands 架构把这件事拆开静态部分零 JS只有真正需要交互的「岛屿」才激活。让首屏可交互时间从「等整棵树」变成「等几个岛」。二、Island 边界与选择性激活hydration 开销的底层机制Islands 的核心是「按需激活」。服务端把整页 HTML 渲染好但只给交互组件打上岛屿标记附带一段序列化 props。客户端 JS 加载后扫描岛屿标记逐个激活其余 DOM 保持原样不参与 hydration。岛屿边界划分是关键。一个组件是否成为岛屿取决于它是否需要客户端交互。点赞按钮、表单、评论区是岛正文、图片、静态列表不是。划分粒度过细岛屿数量爆炸激活调度本身成为开销过粗又退化回全量 hydration。选择性激活的时机有三档。其一是load即激活岛屿一加载就注水其二是idle浏览器空闲时再激活不阻塞首屏其三是visible岛屿进入视口才激活适合评论区这种首屏看不到的模块。三档时机让 JS 执行按真实需要排队而不是一股脑全上。与 Astro、React Server Components 的关系值得理清。Astro 是 Islands 架构的典型实现岛屿默认零 JS需显式声明client:load等指令才激活。React Server Components 走的是另一条路服务端渲染时不产 JS客户端只激活必要的 client components。两者思路不同但都在解决同一件事——把 hydration 从「全量」收敛到「必要」。综上Islands 的核心是把 hydration 从「全量」收敛到「必要」load/idle/visible 三档时机让 JS 按真实需要排队Astro 与 RSC 思路不同却殊途同归。把激活范围收到「必要的岛」首屏交互延迟才能降下来。三、生产级 Islands 激活器实现下面给出一个轻量的 Islands 激活器。它扫描岛屿标记按指令时机激活失败时保留服务端 HTML 不致白屏。type ActivateDirective load | idle | visible; interface IslandMeta { id: string; component: string; // 组件名用于在注册表里查找 props: Recordstring, unknown; directive: ActivateDirective; } // 组件注册表服务端通过岛屿标记声明的组件客户端必须能在此找到对应实现 const registry new Mapstring, (props: any) Element(); export function registerIsland(name: string, factory: (props: any) Element) { registry.set(name, factory); } export function activateIslands(root: ParentNode document) { const islands root.querySelectorAllHTMLElement([data-island]); islands.forEach((el) { const meta parseMeta(el); if (!meta) return; // 按指令选择激活时机避免首屏关键路径被低优岛屿抢占 scheduleActivate(el, meta); }); } function parseMeta(el: HTMLElement): IslandMeta | null { try { // 元数据用 JSON 序列化嵌入>
