导言

前端功能已成为网站和运用成功的要害要素之一。用户希望快速加载的页面和流通的交互，而前端结构的挑选关于完结这些方针至关重要。但是，传统的前端结构在某些情况下或许面对功能应战且存在技能壁垒。

在这个充溢应战的布景下，咱们引入了 Qwik.js 结构。Qwik.js 不只是一个前端结构，更是一种前端功能的终极解决计划。它不只供给了杰出的功能，还以其共同的特色和优势锋芒毕露。

让咱们一同深化探究 Qwik.js，发现它怎么逾越传统，成为前端功能优化的新标杆。

一、现有结构的问题

1.传统CSR计划

慢加载时刻： CSR 技能一般要求在浏览器中加载和烘托整个页面，这导致初始页面加载时刻较长。用户有必要等候页面彻底加载才干进行交互。

搜索引擎优化（SEO）问题： 因为页面内容是在客户端生成的，搜索引擎爬虫或许无法正确解析和索引页面内容，这影响了网站的 SEO 作用。

不利于低带宽用户： 关于低带宽用户或网络条件较差的用户，CSR 页面加载时刻更长，用户体会更差。

首屏烘托推迟： CSR 一般需求等候 JavaScript 文件的下载和履行，这导致了首屏烘托的推迟，影响了用户的第一印象。

问题剖析

A. 烘托阶段耗时剖析

B. 恳求链路剖析

C. 浏览器履行烘托剖析

2. 传统SSR计划

杂乱的水合进程： 触及杂乱的水合进程，包含将数据传输到客户端并在客户端从头烘托页面。这添加了页面加载时刻和网络开支。

A. 恳求链路剖析

B. 浏览器履行烘托剖析

什么是水合（Hydration）？

"hydration"（水合）是指经过客户端JavaScript将静态HTML网页转化为动态网页的进程，以完结对HTML元素的事情处理。这个进程能够经过将事情处理程序附加到HTML元素上来完结

深化了解水合（hydration）进程 水合的难点在于知道咱们需求什么事情处理程序以及它们应该附加到哪里。

WHAT（什么）：事情处理程序是一个关闭包，包含了事情处理程序的行为。它界说了当用户触发此事情时应该产生什么。

WHERE（哪里）：指的是需求将WHAT（事情处理程序）附加到的DOM元素的方位，这包含了事情类型。

更杂乱的部分在于，WHAT（事情处理程序）是一个关闭包，它关闭了APP_STATE（运用程序状况）和FRAMEWORK_STATE（结构内部状况）：

APP_STATE（运用程序状况）：这是运用程序的状况。APP_STATE一般是人们所说的状况。没有APP_STATE，您的运用程序将无法向用户展现任何动态内容。

FRAMEWORK_STATE（结构内部状况）：这是结构的内部状况。没有FRAMEWORK_STATE，结构不知道应该更新哪些DOM节点以及何时应该更新它们。这包含组件树和对烘托函数的引证等内容。

那么，咱们怎么康复WHAT（APP_STATE + FRAMEWORK_STATE）和WHERE呢？办法是经过下载并履行当时HTML中的组件。在HTML中下载和履行已烘托的组件是水合的贵重部分。

换句话说，水合是一种经过在浏览器中急迫地履行运用程序代码来康复APP_STATE和FRAMEWORK_STATE的办法，它触及以下进程：

1. 下载组件代码。
2. 履行组件代码。
3. 康复WHAT（事情处理程序闭包）和WHERE（DOM元素），以获取事情处理程序闭包。
4. 将WHAT（事情处理程序闭包）附加到WHERE（DOM元素）。

这个进程的要害是将APP_STATE和FRAMEWORK_STATE从已烘托的组件中康复，以保证运用程序在客户端取得正确的状况和行为。这关于完结前端与后端的协同作业以供给动态用户体会至关重要。

二、Qwik.js结构的特色

可康复性（Resumability）：一种无开支的水合代替计划 那么，怎么规划一个没有水合且没有开支的体系呢？

为了消除开支，结构不只有必要防止康复（RECOVERY），还有必要防止上述所说到的第四步。第四步是将WHAT附加到WHERE，这是能够防止的本钱。

要防止这种本钱，您需求三样东西：

1. 将一切所需的信息序列化为HTML的一部分。序列化的信息需求包含WHAT、WHERE、APP_STATE和FRAMEWORK_STATE。
2. 一个大局事情处理程序，依靠事情冒泡来阻拦一切事情。事情处理程序需求是大局的，这样咱们就不需求急迫地在特定的DOM元素上独自注册一切事情。
3. 一个工厂函数，能够推迟康复事情处理程序（WHAT）。

这种办法的要害是在HTML中序列化一切必需的信息，以及运用大局事情处理程序来阻拦和处理事情，而不用显式将事情处理程序附加到特定的DOM元素上。这样能够防止贵重的进程四，然后供给无开支的可康复性，一起仍能完结前端的互动性和功能优化。

A. 烘托阶段耗时剖析

B. 恳求链路剖析

C. 浏览器履行烘托剖析

四、作用和作用

五、应战

Qwik.js无水合计划或许会带来一些应战，其间包含以下几个方面：

1. 新技能的学习曲线： 选用新的前端架构或技能，如Qwik.js，一般需求团队成员学习和习惯新的作业流程和最佳实践。这或许需求一些时刻和训练来保证团队熟练掌握新技能。
2. 服务器开支添加： 在无水合计划中，服务器或许需求更多的核算资源来序列化和供给所需的信息，以及处理大局事情处理程序。这或许会导致服务器开支的添加，特别是在很多并发恳求的情况下。
3. Node.js并发应战： 关于Node.js服务器，处理很多并发恳求或许会带来应战。在无水合计划中，服务器或许需求一起处理多个恳求，因而需求考虑服务器的并发功能和扩展性。

作者：京东立异零售 李健

来历：京东云开发者社区 转载请注明来历