V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 2102 days ago, the information mentioned may be changed or developed.
在了解 Web 开发，其中谈到了一个 “前后端分离” 的设计，
网上的文章大致都表示，分离前，都是后端 “渲染” 好页面，再返回给前端，那么它这里所说的 “渲染”，究竟是指什么呢？
这种含糊其辞、脱离特定背景的表述，实在无法理解，想听听 “说人话” 对此是怎么表述的，或者如果有分离前和分离后两种架构的最小精简代码示例就更好了。
（我暂且猜测，分离前是 html 代码由后端根据业务逻辑拼接，然后把拼接好的 html 返回给浏览器，让浏览器 “渲染”，可见我说的渲染和大部分文章说的渲染可能根本不是一个东西 … 就想听听是不是真的有所谓的 “渲染” 发生在后端，然后丢一个所谓的渲染完的结果给浏览器，浏览器什么也不用做直接展示？）
这里给个说是在后端 “渲染” 的网文：
 |
1
Orenoid Jul 24, 2020  1
没详细了解过这个概念的严格定义，按我的理解就是：
分离前，后端渲染是指将动态数据整合到静态 HTML 文件里，也就是你说的拼接，然后把拼接后的 HTML 文件返回给前端，前端直接负责展示。 分离后，前端先直接从服务器拿到静态 HTML 文件，并进行加载，随后再通过 ajax 异步向后端接口请求业务数据，然后再通过 JavaScript 将数据加载到网页上，实质上就是修改和操作 DOM，这种情况下就是前端负责渲染。 按我的理解，通常讨论的“渲染”（尤其是在讨论前后端分离这个语境下）是指数据和 HTML 的整合，而不是浏览器将文档转为 DOM 树再转化为像素点这一操作。 |
 |
2
tomczhen Jul 24, 2020 via Android
浏览器页面显示效果是通过 HTML，CSS 来控制的，那么控制网页的显示效果就有两种手段。
1. 获取时决定，就是后端根据需求生成 HTML 和 CSS，这时影响页面的 HTML，CSS 完全由后端代码生成。 2. 获取后决定，即浏览器读取到 HTML CSS 之后通过在浏览器运行环境的语言，调用浏览器提供的 API 操作已经加载的 HTML，CSS，然后浏览器再绘制。 现实场景是，即便所谓的后端渲染页面，也会用到 JavaScript 去修改已经渲染好的页面，比如最常见的通过 jQuery 操作。而前端渲染也需要一个入口 HTML，可以是一个纯静态文件，也可以由后端输出。 |
 |
4
ChanKc Jul 24, 2020 via Android
服务端渲染的渲染确实是“生成 html”而不是“把图画出来”的意思。
我一开始也懵，希望能有人发明出更好的词 |
 |
6
netnr Jul 24, 2020
服务端渲染有利于 SEO
|
 |
7
KunMinX OP @ChanKc
谢谢分享，我想明白了，这里的渲染其实是一个动词，表达为 “去渲染” 更合适一些（比如 for-Rendening ）， 我是结合 react 等函数式编程框架理解到这一点的， 因为这些框架都有 render 函数，当 setState 的时候，重新触发这个函数，来动态构造布局树。 由于它本质上是函数式编程，view 的实例是内部生成的，因而取名 render 方法，假装跳过中间环节，直奔最终的 render 操作。 然而毕竟 render 就是 render，广泛意义上就是指从代码到像素点的转换，因而对 “渲染” 这个概念的滥用，让交流变得非常不舒服。 我情愿用 “布局拼装” 来人如其名地概括这个现象。分离前，后端静态布局拼装，分离后，前端动态布局拼装。 |
 |
10
skrjscom Jul 24, 2020
ASP PHP 时代经历过没？？？ web 设计师设计好 HTML 页面，ASP PHP 拿过去拆散 把代码塞进去。
|
 |
11
gantleman Jul 24, 2020
最初 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 Jul 24, 2020
|
 |
14
yhxx Jul 24, 2020
后端渲染，浏览器拿到的是<div class="price">128 元</div>
前端渲染，浏览器拿到的是<div id="container"></div>和<script>insert(`<div class="price">128 元</div>`)</script> |
 |
15
lower Jul 24, 2020
名词准不准确我觉得重要性其次
可能 http 协议 /浏览器请求、响应、展示网页 这些知识点原理什么的，还需要补充了解，不然光看名词很难理解 |
 |
16
sugars PRO 我理解的是，不管分离与不分离，两者同样都是渲染 html，但区别就是渲染的时候完整与不完整了
|
 |
17
RedRoute Jul 24, 2020
我对与后台 ‘渲染’ 的理解是：后端（服务器端）对页面上的数据进行填充，请求服务器时，是一个数据处理完毕的 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 Jul 24, 2020
一个再请求结束的时候就渲染完了 一个在请求结束才开始渲染 大概意思
|
 |
21
lllllliu Jul 24, 2020
其实不能单纯的从页面说呢。
前后分离之后，后端更注重数据和功能的处理了，更多时间去把架构做好。 前端可以更注重项目的工程化了，也可以做很多其他的时间，比如用 nodejs 来渲染需要动态生成的页面，这个其实属于前端的事情了。 |
|
22
lllllliu Jul 24, 2020
再从大的方面讲，前后端分离之后，前端部署架构就可以脱离后端的限制了。后端也一样。
前端负载也更好做了呢。后端服务也更好分配和管理了。 |
|
23
lllllliu Jul 24, 2020
不要被前端就是只写页面来局限住了。。
|
 |
24
no1xsyzy Sep 4, 2020 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 -> 像素点 其实更偏哲学认知论范畴。 |
Select Language