在这篇文章里，DOM的渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。在Chrome中，这个渲染好的DOM，就是在开发者工具中元素这个tab中，递归的展开之后得到的整个文档。
DOM渲染的演化过程，大致可以分为可以分为三个阶段：
- 纯后端渲染
- 纯前端渲染
- 服务端的js渲染结合前端渲染
下面我们分阶段来做一下说明。
1.纯后端渲染
第一个阶段是纯后端渲染。
采用这样的渲染方式，就是每一个页面中，在Chrome中展开得到的DOM，
和服务器返回的DOM是基本一致的（可以通过查看网页源代码来得到服务器返回的DOM）。
当然，这里是“基本”一致，因为实际操作中，页面或多或少还是会带有一些js代码，
并且在浏览器端中运行这些js代码来对DOM进行的渲染，不过这一部分js代码并不影响DOM的主体是由服务端返回的。
纯后端的DOM渲染，DOM树的生成完全是在后端服务器中完成的，相当于后端服务器的程序会把各种的数据拼成一个DOM树，
并转换成一个字节流作为HTTP Response的body返回给浏览器。
2.纯前端渲染
第二个阶段就是纯前端渲染，很大程度上，
纯前端渲染可以解决纯后端渲染中出现的各种体验问题。
如下图所示，纯前端渲染把DOM生成的主题逻辑都放在了前端，
这时后端只会返回一个框架的DOM结构，比如只带一个容器元素的的DOM，
然后由js代码把页面的主题渲染到这个容器元素中。
3.服务端的js渲染结合前端渲染
第三个阶段，主要是把前两个阶段中，一些交给纯后端DOM渲染逻辑分离的不好，
但是交给纯前端DOM渲染又会造成较高延迟的部分单独分离出来形成了一独立DOM渲染阶段，
保留的代码中天然的展示层和数据层的分离，又把API请求的累计延迟减少了很多，从SEO角度来说渲染结果对搜索引擎也很友好。
当然，这样的做法需要给整体的架构增加一个独立的单元，给开发和部署都带来了更高复杂性。
本文提到的DOM渲染的三种方式，虽然第三个阶段最适于提供最优的使用体验，但不一定实际开发中最佳的方式，在特定的场景下，可以根据场景的特性来选择最简单的方法来完成。比如在网络延迟很低的情况下（内部网络），就没有必要选取服务器端js渲染的方式，纯前端渲染就可以带来低延迟的使用体验