一文搞懂什么是前端渲染和后端渲染以及两者的区别

一、什么是后端渲染？
我们都知道现在的网页都由html+css+js组成，但是在比较早的时候是没有js(JavaScript)的。所以那时候网页开发一般都是用html+css+jsp(java server page)/php来开发。
当我们从浏览器输入一个url的时候，浏览器会将我们输入的url发送到服务器上。当服务器拿到这个url的时候，服务器会进行解析，然后在后台生成一个包含html+css+js+jsp的网页。这时候服务器端就已经生成一个最终的网页了，网页在服务端渲染好之后，就会把渲染好的网页(包括html+css+数据)直接传给浏览器去显示在用户的电脑上了,这就是后端渲染,也叫服务端渲染。
一句话总结后端渲染：网页全部在服务端渲染完成，再返回给浏览器，浏览器只起到用来展示页面的作用，并没有参与到页面渲染的工作中来。

二、什么是前端渲染呢？
在明白我们所说的后端渲染之后，其实大家很容易就能想到前端渲染是什么样的。

在经历过比较早的阶段之后，随着Ajax的出现，就开始有了我们的前后端分离的阶段。前后端分离意思就是，后端只干我后端该干的活——提供数据，前端只干我前端该干的活——根据后端提供的数据进行页面可视化和页面交互等等。不像以前前后端不分离的时候，前端需要懂后端知识，写一点后端代码，后端也需要懂前端知识，写一些前端代码等等，这样分工及其不明确，代码后期维护也会相当麻烦。

言归正传，在前后端分离的项目中，后端程序员只需要依据和前端程序员约定好的API来返回数据，前端程序员通过如Ajax等方式来获取数据，并通过js（JavaScript）将数据渲染到页面中即可。举个例子，当我们从浏览器输入一个url的时候，浏览器会将我们输入的url发送到服务器上，从静态资源服务器上获取html+css+js+png等等这些静态资源，此时我们的客户端即我们的浏览器就通过Ajax请求去向后端请求数据，后端的服务器接收到请求后只需要将前端需要的数据返回，不必再承担页面渲染的工作，而浏览器接收到后端传回的数据后再通过js来进行页面动态渲染，局部刷新页面，这就是我们的所说的前端渲染。

一句话总结前端渲染：后端只需向前端提供它所需的数据，然后前端浏览器依靠获取的数据，利用js进行页面渲染，最终显示在用户的电脑上。即页面渲染工作由前端浏览器完成。

三、后端渲染和前端渲染的区别？
看到这里，想必大家都能明白了后端渲染和前端渲染的区别。即前端渲染由浏览器渲染页面，后端渲染由服务器渲染页面。
在比较早的时候，后端程序员是比较辛苦的，又要写数据处理，又得写网页，而那时候的前端被戏称为“切图仔”，在当时开发分工是比较混乱的，代码维护起来也麻烦。
到了前后端分离阶段后，前后端责任分工开始清晰了起来，后端专注于数据上，前端专注于页面交互和页面的可视化。并且当移动端(ios系统，android系统)出现后，后端不需要进行任何处理，依然使用之前定的一套API就OK。

一文搞懂什么是前端渲染和后端渲染以及两者的区别相关推荐

一文搞懂【Web 前端】HTML 与 CSS 基础知识
摘要一个 Web 页面是如何在浏览器上展示的?我们在浏览器上查看网页源代码,可看到众多的标签.符号和文字,这就是一个 HTML 文件,而浏览器可以将这个文件解析成一个 Web 页面.一个 Web 页 ...
一文搞懂CPU、MPU、MCU、SOC的联系与区别
转载于read://https_www.elecfans.com/?url=https%3A%2F%2Fwww.elecfans.com%2Fd%2F1813764.html 1 CPU CPU(Ce ...
【显卡】一文搞懂显卡
[显卡]一文搞懂显卡文章目录 [显卡]一文搞懂显卡 1. 前言介绍 1.1 CPU和显卡的区别 1.1.1 作用不同 1.1.2 结构不同 1.1.3 应用场景不同 1.2 三个著名的显卡公司 2. ...
一文搞懂 Cocos Creator 3.0 坐标转换原理
一文搞懂 Cocos Creator 3.0 坐标转换原理屏幕坐标 UI 触点坐标 UI 多分辨率适配方案 UI 触点获取不同坐标之间的转换屏幕坐标与 3D 节点世界坐标互转 3D 节点之间的坐 ...
都2021年了，再不学ES6你就out了 —— 一文搞懂ES6
JS干货分享 -- 一文搞懂ES6 导语:ES6是什么?用来做什么? 1. let 与 const 2. 解构赋值 3. 模板字符串 4. ES6 函数(升级后更爽) 5. Class类 6. Map ...
一文搞懂什么是 PostCSS
一文搞懂什么是 PostCSS 在 Web 应用开发中,CSS 代码的编写是重要的一部分.CSS 规范从最初的 CSS1 到现在的 CSS3,再到 CSS 规范的下一步版本,规范本身一直在不断的发展演 ...
一文搞懂MySQL数据库分库分表
如果数据量过大,大家一般会分库分表.分库需要注意的内容比较少,但分表需要注意的内容就多了. 工作这几年没遇过数据量特别大的业务,那些过亿的数据,因为索引设置合理,单表性能没有影响,所以实战中一直没用过 ...
一文搞懂JSON.stringify和JSON.parse（五）JSON.parse使用说明
一 JSON.parse特性 JSON.parse()就是将JSON字符串解析成字符串描述的JavaScript值或对象(将JSON数据解析为js原生值),例如: JSON.parse('{}'); ...
一文搞懂RNN(循环神经网络）
基础篇|一文搞懂RNN(循环神经网络) https://mp.weixin.qq.com/s/va1gmavl2ZESgnM7biORQg 神经网络基础神经网络可以当做是能够拟合任意函数的黑盒子,只 ...

一文搞懂什么是前端渲染和后端渲染以及两者的区别

一文搞懂什么是前端渲染和后端渲染以及两者的区别相关推荐

最新文章

热门文章