前端/后端渲染

 

            互联网早期，用户使用浏览器浏览的都是一些没有复杂逻辑的、简单的页面，服务器进程从数据库获取数据后，后端的程序在把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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。