寰宇网

写了个前端渲染的教程

写了个前端渲染的教程。

Github地址

打滚求星星。

后端渲染是什么?

首先说说以前的后端渲染的方式:

  1. 用户向服务器发起请求
  2. 服务器拦截用户请求,根据 路由/表单 确定用户的动作
  3. 服务器根据用户动作执行相应操作(对数据库的增删查改吧一般是)
  4. 完成操作后整理要展示给用户看的数据
  5. 找到网页模板,用数据替换模板中要被替换的部分
  6. 输出替换完成的html文档

看上去好像没啥不好。

后端渲染的问题:

  1. 和原生应用的操作体验没法比,因为渲染是在服务器完成的,想看到新的内容必须从服务器端获取新的html文档,就会造成刷新,一个全白的页面闪现后再换成新的页面,给人的操作一种断层的感觉。
  2. 对服务器的压力较大,如果有很多个用户同时请求服务器,服务器在同时要渲染N多页面,会崩溃的……
  3. 如果开发多个平台的,需要额外写提供给 Native APP 的API,明明数据差不多的,再加上后面的维护,浪费人力。

前端渲染是什么?

和刚刚的后端渲染相比,前端渲染把 用数据去替换模板 这个工作放在了前端来进行。

就是让JS脚本来通过AJAX向服务器获取数据,然后替换HTML内容。为什么要这样做呢?

前端渲染如何解决这些问题?

前端渲染一开始也需要服务器向用户浏览器发送一个文档,这个文档可能是空的,什么内容也没有,但是引入了js。

当js加载完毕后,js会向服务器发起异步请求获取数据。然后js来把数据显示到页面上。

就我的理解来说,web前端工程师主要做的事情,就是把这个部分捋清楚,编写合理的逻辑,让程序按顺序执行,让数据和交互更合理的发生。

这个过程发生在用户的浏览器上,所以是前端完成的渲染(把数据/内容/样式填充到浏览器上让用户看到)过程。请求数据是异步的,页面不需要刷新,给人一种很流畅的感觉。

顺序大概是:

  1. JS加载完成
  2. JS请求初始化接口获取初始化数据
  3. JS用数据生成HTML,展示给用户
  4. 用户操作,JS根据用户操作请求对应的接口
  5. 服务器根据请求的接口(路由/表单)确认用户的操作
  6. 服务器执行相应逻辑,从数据库获取数据并返回
  7. JS根据接口返回的数据修改HTML,给用户看结果

相比之下,前端的事变多了,后端的事变少了。但是解决了之前提到的一些痛点问题。

所以,还没试过这种新玩法的同学们,赶紧上车啦。