互联网早期,用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面,服务器进程从数据库获取数据后,后端的程序在把HTML页面吐给前端之前,先把HTML页面上的特定区域、特定符号,先用数据填充,将数据加载进来生成HTML,然后通过网络传输到用户的浏览器中解析成可见的页面。
前端渲染
随着前端页面的复杂性提高,前端就不仅仅是普通的页面展示了,而可能添加了更多功能性的组件,复杂性更大,另外,彼时ajax的兴起,使得业界就开始推崇前后端分离的开发模式,即后端不提供完整的HTML页面,而是提供一些API使得前端可以获取到JSON数据,然后前端拿到JSON数据之后再在前端进行HTML页面的拼接,然后展示在浏览器上,这就是所谓的前端渲染。
这样前端就可以专注UI的开发,后端专注于逻辑的开发。代表是现在流行的SPA单页面应用,例如Vue、React框架,只需要后端给我们提供接口API,前端UI、交互等全在前端进行,前后端只需要约定接口。
后端渲染和前端渲染最重要的区别在于数据填充上的区别,也就是究竟是谁来完成HTML文件的完整拼接,如果是在后端完成的,直接填充到HTML后传给前端,然后返回给客户端,就是后端渲染;而如果是前端做了更多的工作完成了HTML的拼接,通过ajax或者fetch从后台拿数据再自己填充或进行其他数据操作,则就是前端渲染
前端渲染过程:
1. 请求一个HTML
2. 服务端返回一个HTML
3. 浏览器下载html里面的JS/CSS文件
4. 等待JS文件下载完成
5. 等待JS加载并初始化完成
6. JS代码终于可以运行,由JS代码向后端请求数据(ajax/fetch)
7. 等待后端数据返回
8. 客户端从无到完整地,把数据渲染为响应页面
后端渲染过程:
1. 请求一个HTML
2. 服务端请求数据(内网请求快)
3. 服务器初始渲染(服务端性能,较快)
4. 服务端返回已经有正确内容的HTML
5. 客户端请求JS/CSS文件
6. 等待JS文件下载完成
7. 等待JS加载并初始化完成
8. 客户端把剩下一部分渲染完成(内容小,渲染快)
作者:月落梅影
链接:https://juejin.im/post/5df98851e51d45581509a4e5
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。