如果您像我一样，那么您的网络旅程就开始了，这一切都更简单。创建一个HTML页面和某些CSS，将其扔到Apache服务器上，您正处于网站的路上。向前闪烁（双关语）到您今天在网络上看到的内容：您必须在各种不同的网络库和框架之间进行选择，这些库和框架都尝试以不同的方式解决问题。
在这篇文章中，我深入研究JavaScript项目正在尝试解决古老的性能问题。具体而言，评估Web生命值时，两个指标似乎经常出现：加载时间（TTL）和交互式时间（TTI）。
- 加载时间（TTL）是页面或应用程序加载并在用户浏览器中显示其内容所需的时间。这意味着所有HTML，CSS，JavaScript，图像和其他资产呈现页面已下载。通常从请求页面下载最终资产并完全渲染的最终资产时进行测量。
- 交互式时间（TTI）是网页或应用程序“交互式”所需的时间，这意味着用户可以开始与页面上的元素进行交互。这是从请求页面的那一刻到完整渲染页面并完成JavaScript代码完成执行的那一刻的时间来衡量的。
背景
如何渲染站点 - 无论是在客户端还是在服务器侧 - 直接影响TTL和TTI。例如，使用服务器渲染页面，您可能会更快地看到内容，但是该页面变得互动可能需要更多的时间。
更好地理解为什么这样做，我认为在反应时了解客户符和服务器渲染的应用程序之间的差异很重要。当用户向客户端渲染的应用程序上提出页面请求时，服务器将返回包含JavaScript捆绑包的HTML文档（在脚本标签中，也需要下载），然后该捆绑包负责呈现客户端机器上的UI。
使用服务器渲染的应用程序，UI的初始渲染发生在服务器端上。当用户提出页面请求时，服务器会生成由React组件构建的HTML文档，并将该文档返回给用户。此页面可见，用户可以立即与之进行交互，但是直到下载JavaScript捆绑包之前，React组件将不会完全互动。
每种方法都有其优点和缺点。尽管SSR（服务器端渲染）可以带来更好的初始加载时间，SEO福利和提高可访问性，但它可以导致更高的服务器负载和更少的初始交互性。企业社会责任（客户端渲染）可以导致页面过渡和互动性更快，同时牺牲初始加载时间，SEO和可访问性好处。
可访问性和渲染技术
如上所述，所使用的渲染技术会影响可访问性。这是为什么？使用客户端渲染（CSR）时，您可能会看到一些原因的原因包括：
- 增加了初始加载时间。
- CSR更加依赖JavaScript进行渲染和互动。因此，与服务器端上呈现的网站相比，禁用JavaScript的用户将受到更大的影响。
- 客户端渲染应用程序通常会在客户端上操纵动态元素或与JavaScript的交互。诸如屏幕读取器之类的辅助技术可能无法正确传达此元素或更改。鉴于，许多SSR方法在初始渲染上生成具有适当的标记和可访问性属性的HTML。
- CSR方法通常在初始页面加载后更新或更改内容，这可能会对检测或宣布更新的辅助技术构成挑战。
水合
在React和许多其他JavaScript框架中，都会发生一个称为 Hym>的过程。什么是水合？客户端渲染和服务器端渲染的应用程序都会从React组件中产生HTML。该HTML可能需要事件听众或其他行为，例如动画，互动性，形式验证等，才能真正具有互动性。这是水合的地方。水合是将事件听众或其他行为附加到客户或服务器产生的HTML的过程。例如，下图描述了典型的服务器渲染的生命周期的外观：
提供
图片由Next.js Docs
当使用大型应用程序时，此过程可能会导致初始加载时间缓慢。但是，有一些选择，具体取决于您的用例以加快此过程。一种常见的方法是将JavaScript束分成较小，更易于管理的块，并在初始HTML渲染后异步加载它们。另一种方法是使用SSR减少水合过程所需的操作数量，因为初始HTML页面已经包含行为和事件侦听器。
部分或选择性水合
您可能还遇到了术语部分水合。这是水合过程仅补充需要更新的页面的一小部分。 Astro Islands和React 18的选择性水合在此概念的不同实现中想到了。 React选择性水合的一个不错的功能是，它根据页面中的交互优先考虑水合的优先级，例如单击按钮。
虽然这两个实现在概念上相似，但它们是不同的，因为React的选择性水合仅在React本身内可用，而Astro的部分水合是适合多个框架的Astro框架的一部分。
。在处理可能需要大量客户端处理的大型，复杂的组件时，React的选择性水合将是有效的。 Astro的部分水合作用时，可以在需要按需加载的小型模块化组件时最适合。
流html
React 18中的新功能是流式传输HTML的能力。这允许对React组件的渲染开始在服务器上开始，并在生成时将HTML逐步发送回客户端。这将产生更快的初始负载和更敏感的用户体验，因为下载初始内容后，用户可以立即开始与应用程序进行交互，同时仍然异步加载额外的悬挂式块。
一个完美的例子将是一篇文章，在下面有评论。您可以加载文章的关键部分，而无需等待注释加载。使用悬念，您可以显示一个旋转器，直到评论准备就绪为止。下图显示了以下情况：
提供
图片由Next.js Docs
虽然React的HTML流传输可能带来很多好处，但要注意一些潜在的弊端也很重要：
- 流媒体HTML需要支持HTTP/2或更新和客户端浏览器的服务器来支持它。较旧的浏览器或设备可能不支持此功能。
- 使用流媒体HTML的应用程序可能比没有一个没有熟悉不同技术的团队的学习曲线更为复杂。
- 流html可以改善初始加载时间，但可能需要仔细考虑缓存和性能策略。这些策略可能包括管理服务器端缓存和渲染策略，以防止由于经常流式传输请求而防止服务器超负荷。
Qwik的重新渲染
Qwik是另一个前端框架，旨在通过提供独特的服务器端渲染解决方案来改善应用程序的性能。 Qwik称此独特的解决方案可重新渲染。
要注意的第一件事是Qwik没有反应，也不使用反应。它确实使用JSX作为模板语法，这意味着组件看起来可能与React中创建的组件相似。但是，您也可以在Qwik中与Qwik React一起使用React，以使过渡更加容易。
QWIK避免了需要通过在SSR过程中序列将所有必需信息作为HTML的一部分来序列的服务器返回的HTML的需要。它还使用一个全球事件处理程序，该处理程序依靠事件冒泡来拦截所有事件。这个全局事件处理程序意味着Qwik不需要在单个DOM元素上注册处理程序。
提供
在水合下，所有事件处理程序都是在事件触发之前（急切）之前创建和附加的。而使用Qwik，事件处理程序的创建发生在事件以诸如懒惰的基础（懒惰）触发之后。这是通过从HTML中对事件处理程序进行审理来完成的，该事件处理程序阻止了服务器已经完成的工作。
Qwik绝对是观看的工具。由于它是一个相对较新的平台，与其他框架相比，它可能从社区的角度或工具生态系统中缺乏。而且，由于Qwik将其处理程序序列化作为其HTML的一部分，因此它要求符合某些边缘情况可能很难序列化的人员资格。
结论
当今有许多前端技术，每种技术都有略有不同的方法来改善性能和用户体验。 When choosing which technique or combination of techniques best fits your needs, the answer unfortunately is "it depends".每种用例都不同，但是选择一种熟悉的技术，您所理解的功能和限制通常是一个很好的解决方案。