DOM 渲染演化过程,大致分为三个阶段
- 纯后端渲染
- 纯前端渲染
- 服务端的JS渲染结合前端渲染
纯后端渲染
DOM树生成基本是在后端完成,后端服务程序会把各种数据拼成一个DOM树,并转化为一个字节流作为HTTP Response返回给浏览器
- 用户更快的看到主体部分,对网络爬虫友好,多SEO有帮助
- DOM有复杂的交互时,开发难度大,交互体验不好,每次路由的变化都会引起页面的刷新
- “页面” - 把一次DOM类型的HTTP请求作为一个页面
纯前端渲染
把DOM生成的主逻辑都放在前端,后端只返回一个DOM结构,比如一个容器元素的DOM,然后由JS代码把页面的渲染到容器中
请求基本过程
纯前端渲染,服务器主要以API的形式返回数据,然后js把数据重新组合成DOM。比如Vue.js等
- 解决后端渲染前端交互体验不好的问题,提高用户交互体验
- 分离表现层和数据层,js 负责交互和展现,很好的解耦表现层和数据层
- 第一屏渲染,依赖前端代码第一次加载以及API请求,页面请求,以及API请求的访问延时。
- 针对3的优化max-age,缓存,通过Manifest存储静态资源
服务端的JS渲染结合前端渲染
这里把纯前端渲染划分为两个渲染的子阶段。第一个子阶段初步渲染完成DOM, 也就是第一屏在服务端通过js渲染处理,在服务端增加一个js渲染的服务(next.js等)
请求基本过程
- 解决了首屏加载时间长用户体验差的问题
- 保留了纯前端渲染的优势
- 渲染结果SEO友好
- 整体架构增加一个渲染单元,给开发和部署提高了复杂度
参考文档: https://www.cnblogs.com/asdf89/p/9548614.html