这是一个创建于 1588 天前的主题，其中的信息可能已经有所发展或是发生改变。
在了解 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 -> 像素点 其实更偏哲学认知论范畴。 |
Select Language