写了个前端渲染的教程。
打滚求星星。
后端渲染是什么?
首先说说以前的后端渲染的方式:
- 用户向服务器发起请求
- 服务器拦截用户请求,根据 路由/表单 确定用户的动作
- 服务器根据用户动作执行相应操作(对数据库的增删查改吧一般是)
- 完成操作后整理要展示给用户看的数据
- 找到网页模板,用数据替换模板中要被替换的部分
- 输出替换完成的html文档
看上去好像没啥不好。
后端渲染的问题:
- 和原生应用的操作体验没法比,因为渲染是在服务器完成的,想看到新的内容必须从服务器端获取新的html文档,就会造成刷新,一个全白的页面闪现后再换成新的页面,给人的操作一种断层的感觉。
- 对服务器的压力较大,如果有很多个用户同时请求服务器,服务器在同时要渲染N多页面,会崩溃的……
- 如果开发多个平台的,需要额外写提供给 Native APP 的API,明明数据差不多的,再加上后面的维护,浪费人力。
前端渲染是什么?
和刚刚的后端渲染相比,前端渲染把 用数据去替换模板
这个工作放在了前端来进行。
就是让JS脚本来通过AJAX向服务器获取数据,然后替换HTML内容。为什么要这样做呢?
前端渲染如何解决这些问题?
前端渲染一开始也需要服务器向用户浏览器发送一个文档,这个文档可能是空的,什么内容也没有,但是引入了js。
当js加载完毕后,js会向服务器发起异步请求获取数据。然后js来把数据显示到页面上。
就我的理解来说,web前端工程师主要做的事情,就是把这个部分捋清楚,编写合理的逻辑,让程序按顺序执行,让数据和交互更合理的发生。
这个过程发生在用户的浏览器上,所以是前端完成的渲染(把数据/内容/样式填充到浏览器上让用户看到)过程。请求数据是异步的,页面不需要刷新,给人一种很流畅的感觉。
顺序大概是:
- JS加载完成
- JS请求初始化接口获取初始化数据
- JS用数据生成HTML,展示给用户
- 用户操作,JS根据用户操作请求对应的接口
- 服务器根据请求的接口(路由/表单)确认用户的操作
- 服务器执行相应逻辑,从数据库获取数据并返回
- JS根据接口返回的数据修改HTML,给用户看结果
相比之下,前端的事变多了,后端的事变少了。但是解决了之前提到的一些痛点问题。
所以,还没试过这种新玩法的同学们,赶紧上车啦。