skyADMIN

写了个前端渲染的教程

写了个前端渲染的教程。

地址:https://github.com/sky-admin/FE-tutorial

打滚求星星。

前端渲染是什么?

首先说说以前的后端渲染的方式,用户向服务器发起请求,服务器返回html文档给用户浏览器,如果是一个留言板项目,服务器的运行大概是这样的:收到请求,连接数据库,查询得到数据,找到html模板,替换模板中的内容,发送给用户。

看上去好像没啥不好。

但是和原生应用的操作体验没法比,因为渲染是在服务器完成的,想看到新的内容必须从服务器端获取新的html文档,就会造成刷新,一个全白的页面闪现后再换成新的页面,给人的操作一种断层的感觉。

那前端渲染是如何解决这个问题的?

前端渲染一开始也需要服务器向用户浏览器发送一个文档(不一定,现在有service worker之类的离线优先的玩法,可以进一步让web更像原生),文档可能比较简单,什么内容也没有,但是引入了js,js加载完毕后,js会向服务器发起异步请求获取数据。然后js来把数据显示到页面上。

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

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

码字很辛苦,转载请注明来自环宇博客《写了个前端渲染的教程》

评论