大家好，我是Kason。最近Remix团队的暴躁小哥“RyanFlorence”连续攻击了几个友商框架，比如：通过喷SolidStart复制Remix文档。Next.js复制了Remix的API设计。吐槽Astro，Qwik没有新意。当然，这些微博不到一天就被我哥删除了。以上的事情我们今天不谈是非。请问“不常关注新前端轮子开发的同学”，此时你的内心活动是不是：这些都是什么框架？为什么我一个都不认识？今天，我们就从被“Ryan”吐槽的Astro概念——IslandsArchitecture出发，看看前端有多大体积。什么是岛屿建筑？IslandsArchitecture（岛屿建筑）的概念最初由“Etsy”前端架构师“KatieSylor-Miller”于2019年提出，并由Preact作者“JasonMiller”在文章islands-architecture[1]中提出。这是一个基于SSR（ServerSideRendering）的架构。要了解他的特点，我们需要了解传统SSR的缺陷。在传统的SSR中，当首屏渲染完成后，服务器会向浏览器输出HTML结构。浏览器渲染完HTML后，会执行前端框架的初始化逻辑，将事件绑定到HTML结构上。此步骤称为水合物。hydrate完成后，页面可以响应用户交互。也就是说，只有当整个页面的所有组件都被水化后，页面上的任何组件才能响应用户交互。ChromeLightHouse跑分中的TTI[2]（TimetoInteractive，交互时间）指标用于衡量“页面变为完全交互所需的时间”。随着传统SSR架构页面应用规模的增加，TTI指标会持续上升。孤岛架构的目的是优化SSR架构下的TTI指标。孤岛架构下，组件分为：交互组件首屏非交互组件比如下面的页面结构：“首屏非交互组件”包括Content、Advertisement、Footer（白色部分）。“交互组件”包括Header、Sliderbar、ImageCarousel（彩色部分）。“首屏非交互组件”会像传统SSR一样向浏览器输出HTML，而“交互组件”会在浏览器中异步并发渲染。“交互式组件”就像HTML海洋中的孤岛，因此得名孤岛架构。孤岛架构让“具有更高交互优先级的组件”首先成为可交互的，剩下的低质量组件慢慢水化。这样，在页面hydrate完成之前，重要的组件就已经交互了，从而降低了TTI指标。海岛建筑的现实意义是什么？例如，对于一个电子商务网站，很明显“立即购买按钮”的交互性优先级高于“意见反馈按钮”的交互性。SSR让用户更早看到页面，孤岛架构让页面重要部分（立即购买按钮）更早被点击。这背后是更高的购买率和更多的钱~~~IslandsArchitecture实现框架目前实现Islands架构的全栈框架主要有Astro和Qwik。AstroAstro的特点是：作为一个全栈框架，主要控制整体架构，对实现具体业务所需的前端框架没有要求。也就是说，开发者可以在Astro中使用React、Vue、Preact、Svelte等框架来实现特定的业务逻辑，甚至可以在一个.astro组件中混合使用其他框架的组件。比如下面的例子，.astro组件中引入了React、Vue、Svelte的组件：QwikQwik的作者是builder.io的CTO“mi?kohevery”（也是Angular/AngularJS的发明者）。mi?kohevery框架的特点是：超细粒度的孤岛架构，粒度由开发者可控。对于Astro，孤岛架构适用于组件。在Qwik中，孤岛架构的最细粒度是“组件中的方法”。例如下面是HelloWorld组件（可以发现Qwik使用了类似React的语法）：对应的页面渲染效果：打开浏览器网络面板，这个页面会有多少JS请求？由于这是一个静态组件，没有逻辑，所以答案是：没有JS请求。让我们来看看经典的Counter组件。与HelloWorld相比，增加了“点击按钮状态变化的逻辑”。代码如下：对应的页面渲染效果：打开浏览器网络面板，这个页面会有多少个JS请求？答案又是：没有JS请求。注意，在这两个组件的代码中，component$是用来定义组件的，并且有一个$符号。在Counter中，onClick$回调也有一个$符号。在Qwik中，以$为后缀的函数是“延迟加载”的。孤岛架构的粒度有多细取决于$的定义有多细。比如Counter中，如果onClick$有$后缀，那么点击回调就是懒加载的，那么首屏渲染就不会包含“点击后的逻辑”对应的JS代码。点击按钮后，会发起两个JS请求。第一个请求返回“点击后的逻辑”：第二个JS请求返回“组件重新渲染的逻辑”：这两段代码执行完后，Counter变为1。如果查看元素，会发现在点击之前，“逻辑地址”保存在buttonon:click属性中：点击后，会从对应地址下载JS代码，执行对应逻辑。React为什么暴躁老头在文章开头抱怨Astro和Qwik没有新意？这是因为React长期以来一直在朝着孤岛架构的概念发展。在React中，这组概念称为SelectiveHydration[3]。具体来说，在SSR场景下，Suspense组件包裹的组件将作为孤岛架构下的“交互组件”。多卷前端虽然孤岛架构下的全栈框架有很多优点（首屏渲染快、TTI短），但它并不是万能的。更适合“首屏渲染速度和TTI要求高，但整体页面交互不复杂”的场景。”），更适合传统的SSR方案（如Next.js）或CSR方案（直接使用前端框架）。可见，孤岛架构的应用场景并不大，但其实现难度远高于CSR或传统SSR。大多数开发人员可能一生都不会使用孤岛架构。在如此小的细分市场中出现了如此多的竞争对手。前端，真的是体积太大了。。。参考[1]islands-architecture：https://jasonformat.com/islands-architecture/。[2]TTI：https://web.dev/interactive/。[3]选择性水合：https://github.com/reactwg/react-18/discussions/37。
