浅析前端页面渲染技术

4

星期五

2020年12月

前端页面作为链接客户、展示产品的窗口，直接影响着客户体验的好坏及使用频率，提升页面展示效率、缩减内容到达时间是前端性能优化的重点，而页面渲染技术的发展迭代是其中的关键一步！

验“金”室

目前，“以人为本、用户为先”的服务理念已深入人心，便捷的用户体验成为产品竞争的有力支撑。前端页面作为链接客户、展示产品的窗口，提升页面展示效率、缩减内容到达时间是前端性能优化的重点。随着浏览器技术的发展及前端技术栈的迭代更新，页面渲染技术得到了长足的发展，从最初的后端模板渲染，到前后端分离的客户端渲染，再演化到如今的服务端渲染，前端人员一直在探索不同场景下的最优渲染技术。

一、后端模板渲染

后端模板渲染是最早的页面渲染技术，常用的JSP、ASP、PHP等均为这种渲染方式，例如，JSP页面由服务器先编译为servlet再生成html，返回给浏览器端进行展示。

由于后端模板渲染需要先编译后渲染，存在以下几个缺点：

（1）不支持前后端分离

前后端杂糅在一起，不方便本地开发调试，无法并行开发，从而导致编码效率低及人员专业度不足的问题。

（2）页面加载慢

模板语言需要先编译为后端服务，再转换为html，转换效率低，导致前台页面访问慢，白屏等待时间长。

（3）服务器访问压力大

所有用户的页面请求均在服务器上进行渲染，给服务器带来很大的访问压力，对服务器的性能容量要求高。

二、客户端渲染（CSR）

随着jQuery、Agular、React、Vue等前端框架的出现，前端开发可独立于后端项目，页面渲染模式也转向了客户端渲染。当客户端发出页面请求后，服务端只返回一个空的html模板，页面中的内容是在浏览器端通过js和css渲染出来的。客户端须等待静态资源下载完成并初始化后，动态渲染Dom并展示页面。

客户端渲染具有以下优势：

（1）支持局部刷新和懒加载

客户端渲染支持局部刷新和懒加载，无需每次都进行完整的页面请求。由于页面都分散在用户的浏览器端进行渲染，所以能节约服务器成本。

（2）支持前后端分离

客户端渲染同时支持前后端分离，能充分使用前端框架的强大功能。

（3）帮助前端开发更好地管理代码

能够帮助前端开发更好地管理代码，更有效率地开发、调试、测试。

（4）前后端解耦后能够实现更好地扩展和重构

但客户端渲染仍存在以下不足之处：

（1）首屏加载慢

由于服务器一开始只返回空的模板，所以客户端给用户展示的是白屏，需要等静态资源下载并初始化完成，才能开始页面渲染。白屏等待时间长，严重影响用户体验。

（2）对浏览器性能要求高

页面渲染需要浏览器进行解析和加载，不同的浏览器加载性能不同，在版本过老、性能较差的浏览器上渲染效率很低。

（3）不支持SEO搜索引擎

搜索引擎本质上是一个爬虫，客户端渲染时爬虫只能爬取一开始的空白页，无法获取页面真正的内容，不利于搜索排名等。

三、预渲染

预渲染是在构建阶段进行渲染并生成html文件，并以静态文件的形式部署在服务器上，构建出来的文件已有部分页面内容。客户端向服务器请求页面时，服务器返回已经预渲染好的页面给客户端进行展示。

预渲染无需实时解析，页面返回效率高，并且支持SEO搜索引擎。它仍存在以下几点问题：

（1）不支持用户个性化的内容

因为预渲染的页面都是在构建时直接生成的，无法获取用户信息，针对不同用户展示不同的页面。

（2）不适用频繁更新的页面

如排行榜之类的页面，由于需要经常更新，预渲染提前生成的页面可能和实际的排名不符，导致显示出错。

（3）构建时间长

由于页面均在构建阶段生成，如果工程较大，需要预渲染的页面较多，会大大加长构建时间，热更新时开发者需要等待很长时间，增加了开发成本。

四、服务端渲染（SSR）

前端技术栈的快速迭代优化及Node.js的出现，赋予前端工程师在工程化背景下深入服务器端解决渲染问题的能力。

服务端渲染在Node.js服务器上完成页面高效渲染，且无需在服务端重写页面代码，服务端将渲染好的html页面返回给客户端，客户端收到页面后可立即展示，待静态资源加载完成后，实现页面可交互。

服务端渲染具有以下优势：

（1）更快的内容到达时间

服务端渲染有着更快的内容到达时间，无需等待所有js都下载完再执行，性能大幅提升。

（2）对浏览器的性能要求降低

页面渲染与浏览器解耦后，对浏览器的性能要求降低，不同版本的浏览器均能快速显示页面。

（3）对SEO友好

首次收到的html中内容已经过渲染，搜索引擎能够检索到内容。

（4）支持前后端分离

服务端渲染支持前后端分离，前端可充分使用前端的构建生态，提升了开发效率，且前后端职责分明，项目易于管理和维护。

五、服务端渲染核心技术原理

服务端渲染技术引入了Node.js服务器，基于V8引擎对页面进行渲染，其核心原理就是同构。通过抽取通用代码，增加服务端和客户端入口文件，经Webpack打包分别生成能运行在客户端和服务端的不同打包文件，实现应用代码既可运行在浏览器端，也可运行在Node服务端，无需重复维护两套代码。

目前业界常用的服务端渲染框架有Vue-SSR、Nuxt、Next、Umi。其中Vue-SSR和Nuxt均基于Vue框架。Next是基于React的服务端渲染开源框架，Umi是阿里公司基于React框架进行的升级和封装。

六、各渲染技术适用场景

前端页面的渲染技术各有其优缺点，在使用时需要根据具体应用场景渲染选择相应的的渲染技术。可依托浏览器版本、页面秒开率、SEO、页面复杂度等指标进行渲染策略的选择。

后端模板渲染

后端模板渲染适用于存量须运行在IE低版本浏览器中的应用，贸然改造可能带来很多兼容性问题。

客户端渲染

客户端渲染基于其首屏速率慢、路由加载快的特点，可以应用在内管类应用以及对页面秒开率不高、无SEO要求的对客应用中。

预渲染

预渲染的访问速率最快，但是页面灵活度低，在编译阶段无法基于用户个性化内容渲染不同内容，可用于与用户无关且不会频繁更新的场景。

服务端渲染

服务端渲染由于页面秒开率高、可在服务端提前加载重要数据、利于SEO，所以可以被应用到门户类网站等页面秒开率高的对客应用、用户个性化页面以及排行榜等频繁更新的场景。

由于服务端渲染技术具有同构特性，所以可与客户端渲染结合使用，应用内部可灵活使用两种渲染策略，在秒开率要求高或页面复杂度高的场景，选择服务端渲染方式，其他页面采用客户端渲染。

综上，随着前端技术发展，前端框架日益完善，框架采用的页面渲染技术也不断迭代，有了更多样化的选择。应用可根据不同的场景和要求选择合适的渲染策略，高效满足客户访问需求，从而推动业务成长，助力行业蓬勃发展。

往期推荐

FCC30+

长按左边二维码

关注我们不迷路