前端页面渲染(文档+数据)不同模式

随笔23小时前发布 向前冲吧
1 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类似的后端模板引擎,请提供更多的上下文,以便于得到更精确的解答。

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

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...