今天开始来简单聊一下web前端开发所接触的四种页面渲染形式,所有的web开发人员都在搞这四种中的一种或者几种。
好吧,先看一下四种页面渲染形式是哪四种。
【本文的讲解思路】先逐一聊一下四种渲染方式的开发思路和优缺点,最后,说一下在我们平时工作中如何做选择。
一. 后端模板渲染
后端模板渲染方式相对来说,历史悠久,就是由后端使用模板引擎(比如:用的比较多的php的 smarty )将数据渲染成HTML返回给前端。前端再用JS去操作DOM或者渲染其他动态的部分。
下面,通过一张图来看整体开发思路。
整个过程,这里就不再细解释了,回头有空搞个视频实例教学来代码码一次,那样效果会更好。
这种页面渲染方式,前端HTML代码需要嵌入到后端代码中(如PHP)。所以,通常是前端源代码与后端源代码混合在一个工程里,前端负责写静态页面,布置UI,处理JS逻辑。后面负责将静态页面转换成模板页。
所以,不难看出,这种开发方式的缺点是:
1. 前后端混合在一起,不方便本地开发,本地模拟调试,更不方便自动化测试。
2. 前端被约束在后端开发的模式中,不能充分使用前端的构建生态,开发效率低下。
3. 项目更是难以管理和维护,也可能会有前后端职责不清的问题。
当然,这种渲染方式的最大好处是:前端能够快速呈现服务器端渲染好的页面,而不用等客户端渲染,这能够提供很好的用户体验与SEO友好。但是前后端分离开发之后,前端有了完美替换的开发方式(node中间层,SSR,后面会逐一说到)。
二. 客户端渲染
三. node中间层
四. 服务端渲染(SSR)
五. 如何根据实际情况选择使用哪种页面渲染?