前端页面渲染（文档+数据）不同模式

2 0 0

　　一张可被用户访问的页面，可以被拆分为主文档(html）和数据两个部分，这两个部分既可以是组合在一起的（SSR）即服务端渲染，也可以是分离的即前端渲染（SPA、异步渲染）。比如一些活动搭建平台，可以增加一个数据网关，实现SSR，提升用户体验。

渲染模式（服务端/前端-同步，前端-异步）

服务端渲染（Server-Side Rendering，SSR）

服务端渲染是一种在服务器上生成完整页面HTML的开发模式，然后直接发送到客户端。这对于SEO（搜索引擎优化）以及改进首次页面载入时间非常有利，因为用户可以尽快看到完整渲染的页面，而不必等待所有的JavaScript下载并执行。（服务端渲染，它是一种在服务器端将应用或网页转换为HTML字符串，然后发送到客户端的技术。客户端接收到HTML字符串后，直接显示出网页的内容，减少了客户端的渲染工作量）

例如，假如你有一个利用React开发的博客网站，为了提高文章页面的SEO和加载速度，你可能会使用Next.js这样的框架来实现SSR。当一个用户请求一篇文章页面的时候，服务器将会执行React代码，将文章渲染成HTML，连同必要的CSS和JavaScript一起发送回用户，这样用户就可以立即看到完整渲染的文章内容，搜索引擎也能够索引这些内容。

流行的SSR框架/库:

Next.js (React)
Nuxt.js (Vue)
Angular Universal (Angular)

总结来说，SPA为用户提供流畅的应用体验，异步渲染进一步优化了SPA的响应性和性能，而服务端渲染加强了SEO和初始加载性能。这些技术经常结合使用，为用户提供高质量的Web应用体验。

服务端渲染时浏览器还需要渲染吗？

服务端渲染是指当一个用户请求一个网页时，服务器会执行模板引擎和相关代码来生成并返回页面的完整HTML内容。此时，浏览器会接收到HTML，CSS以及通常还有一些JavaScript文件。

尽管页面的HTML是在服务器端生成的，浏览器仍然需要执行以下步骤：

解析HTML/CSS：浏览器接收到由服务端渲染生成的HTML和CSS后，它需要解析这些文件来构建DOM（文档对象模型）树和CSSOM（CSS对象模型）树。

执行JavaScript：服务端返回的HTML中可能包含或引用了JavaScript文件。浏览器需要下载这些文件并执行它们，以使页面具有交互性。例如，菜单的折叠和展开、表单验证、动态内容加载等行为通常需要客户端JavaScript实现。

布局（Reflow/Layout）：浏览器根据DOM树和CSSOM树，并结合执行JavaScript后的变动，计算每个元素在页面上的精确位置和大小。

绘制（Painting）：浏览器根据布局树把内容画到屏幕上，这包括颜色、图像和边框样式的应用。

合成（Compositing）：为了提高性能，现代浏览器会将页面分割成多个层，然后合成在一起显示。这一步骤通常涉及硬件加速。

因此，即使是服务端渲染的网页，浏览器端的渲染过程（主要是解析和绘制）还是必需的，以确保用户能够看到和交云界面，并与之互动。不过，由于服务端渲染返回了预先填充的HTML，这可能会降低首次内容渲染（First Contentful Paint，FCP）的时间，从而为用户提供较快的可见内容。此外，服务端渲染对于那些需要良好搜索引擎优化（SEO）的网站尤为重要，因为搜索引擎爬虫更容易抓取和索引预渲染内容。

SPA（单页面应用程序）

单页面应用程序（SPA）是一种网页应用模式，其中的应用在浏览器加载时仅加载单个HTML页面，并在用户与应用交互时动态更新该页面的内容。SPA通过JavaScript异步与服务端通信拉取数据，然后使用客户端的模板和数据绑定技术来刷新页面上的部分区域，而不是加载新页面。

举个例子，假设有一个邮箱应用，这个应用是一个SPA。当用户点击一个邮件条目时，不会有页面刷新，而是通过JavaScript (使用XMLHttpRequest或Fetch API) 异步地从服务器请求这封邮件的内容，然后动态地在当前页面更新邮件详情显示区域。

流行的SPA框架/库:

Angular
React —— React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
Vue.js

SPA的HTML页面请求链路

单页面应用程序（SPA）的HTML页面可以既从服务端直接请求，也可以从CDN（内容分发网络）请求，这取决于应用程序的部署和托管方式。

请求到服务端：

在某些情况下，SPA的初始HTML页面（通常是 index.html）会直接从应用的后台服务器获取。
这会涉及到一个完整的HTTP请求-响应周期，即用户在浏览器中输入URL或点击链接，浏览器向服务器发送HTTP请求，然后服务器返回SPA的HTML文件。
此种方式可能适用于内部应用、拥有专属服务器资源的应用，或是那些对响应时间和可扩展性要求不是极端高的应用。

请求到CDN：

对于大多数公开访问的SPA，使用CDN来提供初始HTML页面和静态资源（例如JavaScript、CSS文件）是一种常见的实践。
CDN是一组分布在多个地理位置的服务器，专门用来为用户提供网页内容。它们可以缓存静态内容并提供给靠近用户的地方，从而提高响应速度和减少后端服务器的负载。
当SPA的静态资源部署在CDN上时，用户的请求首先会被路由到最近的CDN节点，极大地提升用户访问速度，并且可以有效应对高流量。

一般来说，SPA的开发者和运维人员会选择把静态资源托管在CDN上，这样可以利用CDN的缓存和全球分布的优势，加速资源的传递和提升用户体验。对于动态内容和应用程序的API请求，这些则通常直接与后端服务器或通过API网关进行通信。

使用CDN还可以帮助优化应用的可用性和可靠性，因为CDN可提供负载均衡和故障转移机制。例如，如果一个CDN节点不可用，流量可以重新路由到另一个健康的节点，从而对用户几乎无感知地保持服务持续性。

异步渲染（Async Rendering）

异步渲染通常指的是在客户端应用程序中进行非阻塞的UI更新。在传统的渲染过程中，UI渲染任务可能会阻塞浏览器主线程，导致性能下降和用户界面延迟。异步渲染使UI更新可以分割成一些小的任务，这些任务可以分散到浏览器的空闲时间执行，从而保持应用的响应性和流畅度。

以React为例，React 16引入了一个新的特性叫作Fiber，它重新实现了核心算法，允许React进行任务分割和优先级调度。这意味着开发者可以利用React的Concurrent Mode，让优先级较低的更新（如从API获取数据后的状态更新）异步执行，而不会阻断用户交互操作（如键盘输入、鼠标点击）的立即响应。

Velocity和XTemplate模板引擎

Velocity 和 XTemplate 是两种不同的模板引擎，它们用于在Web服务器或应用程序中动态生成HTML或其他文本格式。

Velocity：

Velocity 是 Apache Software Foundation 领导的一个项目，它提供了一个基于Java的模板引擎。Velocity 使用类似于HTML的标记语法，并允许开发者在模板中插入引用动态内容的占位符。这些占位符被绑定到后端Java对象中的数据，这样在渲染时即可动态生成页面内容。Velocity 还支持条件语句、循环和宏定义，使得模板能够处理较为复杂的逻辑。

一个简单的Velocity模板例子：

 1 <html>
 2 <head>
 3    <title>Welcome to Velocity</title>
 4 </head>
 5 <body>
 6    <h1>Hi, $name!</h1> <!-- $name 将被动态替换成一个变量值 -->
 7    #foreach ( $product in $products ) <!-- Velocity 的循环语句 -->
 8      <p>$product.name: $product.price</p><!-- 获取产品名称和价格 -->
 9    #end
10 
11    <script src="/js/myScript.js?version=$jsVersion"></script>
12 
13 </body>
14 </html>

这里，$name 和 $products 是模板变量，它们会被Java后端中的对应变量的值所替换。

在这个例子中，$jsVersion 是从服务端传递到模板的变量，它被用来动态生成JavaScript文件的URL。通过在文件URL中添加查询参数（如 ?version=1.2.3），可以有效地避免浏览器缓存问题，因为每次版本号更改时，URL都会变得不同。这样确保了用户总是请求最新版本的JavaScript文件，而不是从浏览器缓存中加载旧版本。

这种技术不限于JavaScript文件；它同样适用于CSS文件或任何其他需要缓存管理的资源文件。只需要确保服务端提供正确的版本号，并在模板中正确插入这个版本号即可。

用户访问的时候

Velocity模板是一种服务端渲染（Server-Side Rendering, SSR）技术（当前公司内部使用：其实也是vm模板也是很简单的/空白html，里面有src=”/../hello.js?version=123″，还是浏览器通过执行hello.js来渲染前端页面，本质上还是前端渲染）。当服务器接收到一个HTTP请求时，服务端的应用程序会使用Velocity模板引擎来填充模板中的动态数据，并生成最终的HTML文本，然后将这个渲染好的HTML作为响应发送回客户端。客户端的浏览器然后展示这个HTML给用户。

资源推送链路：

前端开发Velocity模板后（java服务端代码），应用变更，其中的jsVersion保存在配置中心待前端资源发布后再推送最新版本
js、css修改后，前端发布推送到CDN

用户请求/访问链路：

用户请求到服务端，服务端模板引擎会去替换模板里的占位符，生成最终的HTML，返回给浏览器
浏览器拿到HMTL进行解析dom结构等，看到引用的js、css等，去CDN请求

XTemplate（简称xtpl）：

XTemplate 是由腾讯AlloyTeam开发的一个前端 JavaScript模板引擎，它主要用于在Web浏览器(nodejs服务端）中动态生成HTML。XTemplate 的特点包括易于调试、内置支持业务逻辑、和允许自定义函数等。XTemplate 很适合结合现代的前端框架如React、Vue.js或Angular使用。

一个简单的XTemplate模板例子：

1 <div>
2   {{#each products}}
3     <div >
4       <h3>{{this.name}}</h3>
5       <p>Price: {{this.price}}</p>
6     </div>
7   {{/each}}
8 </div>

在这个例子中，{{#each products}} 是XTemplate的循环语句，它会遍历 products 数组，并为数组中的每个项目创建一个产品描述块。和Velocity一样，{{this.name}} 和 {{this.price}} 是模板占位符，它们会被绑定数据的对应属性替换。

需要注意的是，因为Velocity 和 XTemplate 属于不同的技术范畴（后端模板引擎 vs 前端模板引擎），所以除了模板语法外，它们在实现和使用上会有较大的不同。如果您在提问中的 “XTemplate” 指的是某个特定的与Velocity类似的后端模板引擎，请提供更多的上下文，以便于得到更精确的解答。

总的来说，这些模板引擎通过提供简洁、表达性强的模板语言，简化了动态内容的生成，使得开发者可以更加专注于应用逻辑和内容本身。

# 随笔