Vue SSR怎么实现即时编译技术

　　

这篇文章主要为大家展示了Vue SSR怎么实现即时编译技术，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

当我们在服务端渲染 Vue 应用时，无论服务器执行多少次渲染，大部分 VNode 渲染出的字符串是不变的，它们有一些来自于模板的静态 html，另一些则来自模板动态渲染的节点（虽然在客户端动态节点有可能会变化，但是在服务端它们是不变的）。将这两种类型的节点提取出来，仅在服务端渲染真正动态的节点（serverPrefetch 预取数据相关联的节点），可以显著的提升服务端的渲染性能。

提取模板中静态的 html 只需在编译期对模板结构做解析，而判断动态节点在服务端渲染阶段是否为静态，需在运行时对 VNode 做 Diff，将动态节点转化成静态 html 需要修改渲染函数的源代码，我们将这种在运行时优化服务端渲染函数的技术称作 SSR 即时编译技术（JIT）。

GitHub:vue-ssr-jit

首要面对的问题是如何 Diff，完成这项工作需要两个 VNode，其中一个通过 serverPrefetch/asyncData 载入动态数据，我们称之为 Dynamic VNode，另一个未载入任何数据，我们称之为 Static VNode。我们做了一个大胆的假设，对任何用户来说，Static VNode 渲染出的 html 是一致的，并且 Static VNode 是 Dynamic VNode 的子集，不同用户的差异点在 Static VNode 相对 Dynamic VNode 的补集当中。

以上假设对绝大部分的 Web 应用都是成立的，某些意料之外的情况将在文末做讨论

Diff 的核心在于从 Staitc VNode 中标记 Dynamic VNode，下一次仅渲染被标记的 Dynamic VNode，Diff 算法的技术示意图如下所示

优化前的 Dynamic VNode 渲染流程图如下

优化后的 Dynamic VNode 渲染流程图如下

修改渲染函数的难点在于如何建立 VNode 与源代码的对应关系，否则我们无从得知需要优化的节点是哪段代码生成的，这看起来非常困难。幸运的是 Vue 的模板语法提供了很不错的约束，内置的编译引擎也确保了渲染函数代码结构可预测。

如下模板代码编译生成的渲染函数结构是有章可循的