在了解 Web 开发,其中谈到了一个 “前后端分离” 的设计,
网上的文章大致都表示,分离前,都是后端 “渲染” 好页面,再返回给前端,那么它这里所说的 “渲染”,究竟是指什么呢?
这种含糊其辞、脱离特定背景的表述,实在无法理解,想听听 “说人话” 对此是怎么表述的,或者如果有分离前和分离后两种架构的最小精简代码示例就更好了。
(我暂且猜测,分离前是 html 代码由后端根据业务逻辑拼接,然后把拼接好的 html 返回给浏览器,让浏览器 “渲染”,可见我说的渲染和大部分文章说的渲染可能根本不是一个东西 … 就想听听是不是真的有所谓的 “渲染” 发生在后端,然后丢一个所谓的渲染完的结果给浏览器,浏览器什么也不用做直接展示?)
这里给个说是在后端 “渲染” 的网文:
1
Orenoid 2020-07-24 12:02:01 +08:00 1
没详细了解过这个概念的严格定义,按我的理解就是:
分离前,后端渲染是指将动态数据整合到静态 HTML 文件里,也就是你说的拼接,然后把拼接后的 HTML 文件返回给前端,前端直接负责展示。 分离后,前端先直接从服务器拿到静态 HTML 文件,并进行加载,随后再通过 ajax 异步向后端接口请求业务数据,然后再通过 JavaScript 将数据加载到网页上,实质上就是修改和操作 DOM,这种情况下就是前端负责渲染。 按我的理解,通常讨论的“渲染”(尤其是在讨论前后端分离这个语境下)是指数据和 HTML 的整合,而不是浏览器将文档转为 DOM 树再转化为像素点这一操作。 |
2
tomczhen 2020-07-24 12:12:07 +08:00 via Android
浏览器页面显示效果是通过 HTML,CSS 来控制的,那么控制网页的显示效果就有两种手段。
1. 获取时决定,就是后端根据需求生成 HTML 和 CSS,这时影响页面的 HTML,CSS 完全由后端代码生成。 2. 获取后决定,即浏览器读取到 HTML CSS 之后通过在浏览器运行环境的语言,调用浏览器提供的 API 操作已经加载的 HTML,CSS,然后浏览器再绘制。 现实场景是,即便所谓的后端渲染页面,也会用到 JavaScript 去修改已经渲染好的页面,比如最常见的通过 jQuery 操作。而前端渲染也需要一个入口 HTML,可以是一个纯静态文件,也可以由后端输出。 |
4
ChanKc 2020-07-24 12:17:16 +08:00 via Android
服务端渲染的渲染确实是“生成 html”而不是“把图画出来”的意思。
我一开始也懵,希望能有人发明出更好的词 |
5
ChanKc 2020-07-24 12:29:51 +08:00 1
|
6
netnr 2020-07-24 12:35:54 +08:00
服务端渲染有利于 SEO
|
7
KunMinX OP @ChanKc
谢谢分享,我想明白了,这里的渲染其实是一个动词,表达为 “去渲染” 更合适一些(比如 for-Rendening ), 我是结合 react 等函数式编程框架理解到这一点的, 因为这些框架都有 render 函数,当 setState 的时候,重新触发这个函数,来动态构造布局树。 由于它本质上是函数式编程,view 的实例是内部生成的,因而取名 render 方法,假装跳过中间环节,直奔最终的 render 操作。 然而毕竟 render 就是 render,广泛意义上就是指从代码到像素点的转换,因而对 “渲染” 这个概念的滥用,让交流变得非常不舒服。 我情愿用 “布局拼装” 来人如其名地概括这个现象。分离前,后端静态布局拼装,分离后,前端动态布局拼装。 |
9
KunMinX OP |
10
skrjscom 2020-07-24 14:42:21 +08:00
ASP PHP 时代经历过没??? web 设计师设计好 HTML 页面,ASP PHP 拿过去拆散 把代码塞进去。
|
11
gantleman 2020-07-24 15:26:47 +08:00
最初 html 时代是没有前端程序猿的。后端动态调整样式使用服务器过滤的方式。随着 JS,CSS 的流行,后端不再负责前端样式。
|
12
KunMinX OP @ChanKc
哈哈,那可能刚好和 android 以及计算机科学中对 render 和 paint 的定义反过来了。 android 中 draw 表示的是绘制、排版的意思,也即构建视图模型,然后把这个模型结果统一交给 render 机制去渲染到屏幕。 https://zh.wikipedia.org/wiki/%E6%B8%B2%E6%9F%93 百科中对渲染的解释也是如此,指通过模型来生成图像的过程。 或许 web 开发中关于 “渲染” 和 “绘制” 的定义,是被早期的某个大佬给带歪的 …(除非我们有一天找到了这么称呼的缘由) |
13
ChanKc 2020-07-24 15:46:09 +08:00
|
14
yhxx 2020-07-24 16:14:04 +08:00
后端渲染,浏览器拿到的是<div class="price">128 元</div>
前端渲染,浏览器拿到的是<div id="container"></div>和<script>insert(`<div class="price">128 元</div>`)</script> |
15
lower 2020-07-24 16:15:17 +08:00
名词准不准确我觉得重要性其次
可能 http 协议 /浏览器请求、响应、展示网页 这些知识点原理什么的,还需要补充了解,不然光看名词很难理解 |
16
sugars 2020-07-24 16:30:56 +08:00
我理解的是,不管分离与不分离,两者同样都是渲染 html,但区别就是渲染的时候完整与不完整了
|
17
RedRoute 2020-07-24 16:35:09 +08:00
我对与后台 ‘渲染’ 的理解是:后端(服务器端)对页面上的数据进行填充,请求服务器时,是一个数据处理完毕的 html,此时浏览器进行显示。
1.前后端不分离:这种做法往往是前端人员编写好静态页面,后端人员通过修改 html 文件,动态的在 html 进行一些数据的处理。当请求过来是,此时通过浏览器访问先请求到服务器,后端先进行处理,返回处理完毕的 html 。 2.前后端分离:此时前端人员完成页面,并通过请求后端提供的接口获取数据,同时完成数据的展示。后端不需要去对页面提供任何操作。此时通过浏览器访问先请求到服务器,直接返回 html 页面,页面中的 js 再去获取数据并显示。 |
18
KunMinX OP @ChanKc
谢谢分享,文档中强行将 “渲染” 描述为 “绘制”,让人觉得不适: The last step is paint, which takes in the final render tree and renders the pixels to the screen. —— 最后一步是 “绘制”,基于最终渲染树 去把像素点 “渲染” 到屏幕 … @lower 这不是精不精确的问题,而是与普适的约定存在冲突,人为造成了代沟,没法交流。 就好比,一个人强行把 “红色” 说成 “蓝色”,把 “爸爸” 说成 “妈妈”,然后完全意识不到与公约存在的冲突,而不停地拿这些概念自嗨,这样的沟通绝不会让人愉快。 |
20
2kCS5c0b0ITXE5k2 2020-07-24 17:26:02 +08:00
一个再请求结束的时候就渲染完了 一个在请求结束才开始渲染 大概意思
|
21
lllllliu 2020-07-24 17:55:55 +08:00
其实不能单纯的从页面说呢。
前后分离之后,后端更注重数据和功能的处理了,更多时间去把架构做好。 前端可以更注重项目的工程化了,也可以做很多其他的时间,比如用 nodejs 来渲染需要动态生成的页面,这个其实属于前端的事情了。 |
22
lllllliu 2020-07-24 17:58:03 +08:00
再从大的方面讲,前后端分离之后,前端部署架构就可以脱离后端的限制了。后端也一样。
前端负载也更好做了呢。后端服务也更好分配和管理了。 |
23
lllllliu 2020-07-24 17:58:52 +08:00
不要被前端就是只写页面来局限住了。。
|
24
no1xsyzy 2020-09-04 13:14:45 +08:00 1
来自 Collins:
You can use render with an adjective that describes a particular state to say that someone or something is changed into that state. For example, if someone or something makes a thing harmless, you can say that they render it harmless. 引申计算机,是指状态(即数据)与客体(比如结构或者模板)结合形成表现。 比如 DOM + Gecko -> 像素点 AJAX 结果 + React -> DOM 数据库 query 结果 + HTML 模板 -> 完整的 HTML 渲染可以是多层次的,比如 DOM + Gecko -> 像素点 AJAX 结果 + React -> DOM 结合一下就是 AJAX 结果 + React + Gecko -> 像素点 其实更偏哲学认知论范畴。 |