前端工程师的工作范畴其实不仅仅局限在客户端浏览器，特别是在处理性能优化问题时，往往需要站在全栈的角度去审视系统的每个细节。

​ 本章首先介绍前端页面渲染技术演进背后所隐藏的一个性能隐患，以及如何使用服务器端计算能力来对其进行改进,从而诞生服务器端渲染技术:然后分别以基于Vue和React两个现代前端框架的项目实例，对服务器端渲染的实现技术和细节进行梳理和探讨。通过本章的学习，能够对服务器端渲染的全貌和相关技巧都有所理解。

页面渲染

随着前端技术战的演进，Vue. React等现代前端框架的出现，不但让大型项目的开发越来越简单高效，而且其合理的的代码组织结构也让项目的维护成本得到显著降低。

如果深入去探讨这些现代前端框架的首屏值染过程，就会发现其优势特性的背后隐藏着个明显的性能缺陷。 本节首先对此缺陷的产生原理进行分析，然后引出相应的优化解决方案一服务器端渲染。

一、页面渲染的发展

​ 在早些年还没有Vue和React这些前端框架的时候，做网站开发的主要技术栈基本就是JSP和PHP,而渲染所需的HTML页面都是先在服务器端进行动态的数据填充，然后当客户端向服务器端发出请求后，客户端将响应收到的HTML文件直接在浏览器端渲染出来。

​ 随着前端复杂度的增加与技术发展的迭代，若将所有逻辑都放在后端处理，则其开发效率和交互性能都会受到限制，所以这样的方式便被逐渐淘汰掉了。

​ 现代前端框架出现后，基于MVVM及组件化的开发模式逐渐取代了原有MVC的开发模式，这使得代码开发效率得到提高并且代码维护成本大幅降低，于是前端工程师的关注点可以更多地放在业务需求的实现上，用户与页面的更改交由框架以数据驱动的方式去完成，如图所示是MVVM模式框架实现数据更新的逻辑视图。

​ 除此之外，框架还提供了许多额外的便利，比如虚拟DOM、前端路由、组件化等特性，这些特性所带来便利的背后也隐藏着一个明显的问题，就是基于这些框架开发出的业务代码依赖于框架代码，运行业务代码之前，首先需要等待框架的代码加载完成，接着执行框架将业务代码编译成最终所要展示的HTML文件后，才能进行页面谊染。

​ 框架包含的特性越多，其代码包尺寸就会越大，这无疑会增加打开网站到渲染出页面之间的等待时间，如果所有前端页面都依赖于框架代码，那么等待期间的网站页面便会直处于空白状态， 这样的首屏用户体验是非常糟糕的。

​ 前端技术栈的发展其实也非常类似于计算机语言的发展过程:最早给计算机编程使用的是机器语言，利用穿孔打印机进行输入，这对于计算机的执行效率来说是非常高的，因为它不需要任何编译或者解释操作，但其缺点是对程序开发人员来说几乎不具有任何可读性，如果原有的程序逻辑需要调整，那么修改机器语言的程序将会非常烦琐。

​ 为了让计算机程序开发人员能够更高效地编写程序，于是从计算机底层向上层逐渐发展出了汇编语言、C语言、Java语言及前端最常用的JavaSript语言。

​ 越靠近用户端的语言在执行效事及性能上，都明显不及底层语言，但对开发者来说却非常友好，让开发者能够更方便地编写出更复杂的业务逻辑。所以在面对高性能与易维护扩展两方面时，就需要做一个权衡取合，而好的优化方案通常都是兼顾折中的。

​ 前端在面对页面渲染性能上与代码开发方式时，也需要进行类似的权衡，我们不可能仅为了更快的页面渲染就退回过去JSP/PHP的开发方式。那样虽然能加快首屏渲染，但与现代前端框架相比，其不仅开发效率低而且代码维护成本高。

​ 因此我们应当去思考，如何在现代前端框架内部去有效地改善首屏渲染，既兼顾性能体验又保证开发效率。接下来就以Vue框架为例，来讨论一个多层次的优化方案。

二、多层次优化方案

多层次优化方案大体可分为三个层次的优化:构建层模板编译、预渲染数据无关的页面及服务器渲染。

1.构建层模板编译

​ 从Vue 2.0开始其核心代码就已经拆成了两个部分: 一部分负责框架模板编译，另部分负责运行时执行。这就给我们提供了一个优化方案，可以将模板编译从浏览器执行阶段提前到webpack构建阶段。

​ 我们知道通过Vue编写的页面文件通常包括三部分: CSS样式、JavaScript 代码及Template页面模板，该页面文件是无法直接被浏览器解释执行的，它需要依赖Vue的核心代码进行编译后才能执行，如果将编译的耗时提前到webpack的构建阶段完成，那么当浏览器请求到数据后就可以直接运行编译结果显示页面。

2.预渲染数据无关的页面

​ 在通常情况下，页面都是数据相关的，比如用Vue开发了一个用户中心， 那么其中肯定包含了些用户相关的个性化数据，每个用户进入该页面所获取的数据是不一样的，这种场景不适用预渲染进行优化。

​ 如果是一个营销活动页面，所有用户进来看到的内容基本都一样， 那么就可以在构建层直接执行Vue核心代码，将相应的页面生成最终可直接渲染的HTML文件，然后通过该HTML文件去访问相应的Vue页面。这样将Vue的模板编译和执行都放在构建层去完成，就可以省去浏览器端的运行开销。

3.服务器端渲染

​ 在大多数网站中，数据无关的页面其实并不多。对于数据相关的页面，比如用户中心的例子，需要获取到与用户相关的数据后再去进行编译和渲染，对此可以考虑将这些步骤放在服务器端去执行。

​ 能这么做的原因是，首先数据获取本身就需要向服务器端发起请求，这一步服务器端具有天然的优势，其次服务器端的nodejs与浏览器同样都使用JavaScript语言，这就使得服务器端能在获取到数据后，就去执行Vue 核心代码进行编译及渲染，从而生成可在浏览器端直接渲染的HTML文件。当然这个HTML文件最终还需要在浏览器端与Vue框架进行混入，让Vue框架来管理相应的数据。

​ 这就是所谓的服务器端渲染，简单说就是将原本在客户端执行的与首屏谊染相关JavaScript处理逻辑，移到服务器端进行处理。

​ 这样做虽然可以减少等待Vue框架加载与执行的时间，但会增加服务器的算力压力，同时也有可能面临服务器端内存泄漏的风险。可是考虑到服务器端集群的运算能力，肯定会高于用户端单个手机或电脑等设备上浏览器的运算能力，所以在有限的页面上，采取服务器端渲染能够明显提升首屏页面的渲染速度，同时在具体使用的页面范围上，也应当参考运算能力平衡考虑。