浅谈传统DOM渲染方式

传统的DOM渲染方式

说起传统DOM的渲染方式，首先来说说什么是DOM吧！

DOM概念：
文档对象模型（DOM）是表示和操作HTML和XML文档内容的基础API。API不是特别复杂，但是需要理解大量的架构细节。首先，应该理解HTML和XML文档的嵌套元素在DOM树对象中的表示。HHTML文档的树状结构包含表示HTML标签或元素和表示文本字符串的节点，它也可能包含表示HTML注释的节点。

DOM渲染

下面来说说DOM渲染
1、首先，什么是DOm渲染呢？
DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。
2、DOM渲染有三种方式

• 纯后端渲染
• 纯前端渲染
• 服务端的JS渲染结合前端渲染

①、纯后端渲染，采用这样的渲染方式，就是每一个页面中，在Chrome中展开得到的DOM，和服务器返回的DOM是基本一致的（可以通过查看网页源代码来得到服务器返回的DOM）。当然，这里是“基本”一致，因为实际操作中，页面或多或少还是会带有一些js代码，并且在浏览器端中运行这些js代码来对DOM进行的渲染，不过这一部分js代码并不影响DOM的主体是由服务端返回的。纯后端的DOM渲染，DOM树的生成完全是在后端服务器中完成的，相当于后端服务器的程序会把各种的数据拼成一个DOM树，并转换成一个字节流作为HTTP Response的body返回给浏览器。
纯后端渲染的整体结构是最简单的渲染方式，把全部的逻辑都交给后端来完成。这样的优点在于返回的HTTP Response是包含着全部页面内容的。

②、纯前端渲染，纯前端渲染可以很大程度上解决纯后端渲染的很多问题。纯前端渲染把DOM生成的主题逻辑都放在了前端，这时后端只会返回一个框架的DOM结构，比如只带一个容器元素的的DOM，然后由js代码把页面的主题渲染到这个容器元素中。在纯前端DOM渲染中，服务器主要是以API的形式返回各种数据，然后由js把数据重新组合成DOM。的大家耳熟能详的各种前端框架，比如Vue.js，React.js，angularjs等等，主要都是以这种方式完成了对于DOM的渲染。相对于纯后端的DOM渲染方式，纯前端DOM渲染的方式形成了一个天然的表现层和数据层的分界，js代码负责交互和展现，后端以API形式提供纯粹的数据。这种改变带来的最大的好处就是，交互的部分可以脱离数据接口独立的开发和调试，让站点的交互能力大幅的提升，并且很好的解耦了表现层和数据层的代码逻辑。

③、这里是把纯前端渲染划分成了两个渲染的子阶段。第一个子阶段即SSR初步渲染完成DOM，也就是把我们上面说到的第一屏先在服务器端通过js渲染出来，这个子阶段在服务器端增加了一个js渲染层的服务，这一层相当于把原来要在客户网络与服务器网络之间进行的大量通信转移到了由服务器网络与服务器网络之间进行，大大缩减了网络通信消耗的时间。第二个子阶段就是前段渲染的阶段，主要是解决首屏加载之后用用户交互问题，这些都和纯前端渲染时完全一致的。

上面提到的三种方式，在不同的情况下，可以选择相对最简单的方式来渲染。