传统的DOM渲染方式？

1.什么是DOM渲染？

　　DOM渲染指的是对于浏览器中展示给用户的DOM文档的生成的过程。

2.DOM渲染的演化过程，大体能够分为能够分为三个阶段：

• 纯后端渲染：
  • 　　DOM树的生成彻底是在后端服务器中完成的，后端服务器的程序会把须要的数据拼合成一个相似于前端DOM节点组成的DOM树，并转化成字节流做为HTTP Response的body返回浏览器
• 纯前端渲染：
  • 　　前端渲染把DOM生成的主体逻辑都放在前端，后端以后返回一个框架的DOM结构，而后由js代码把页面的主题渲染到框架中。能够解决后端渲染中出现的各类体验问题。
• 服务端的js渲染结合前端渲染:
  • 　　主要是把前两个阶段中，一些交给纯后端DOM渲染逻辑分离的很差，可是交给纯前端DOM渲染又会形成较高延迟的部分单独分离出来造成了一独立DOM渲染阶段，保留的代码中自然的展现层和数据层的分离，又把API请求的累计延迟减小了不少，从SEO角度来讲渲染结果对搜索引擎也很友好。固然，这样的作法须要给总体的架构增长一个独立的单元，给开发和部署都带来了更高复杂性。

（1）.纯后端渲染：采用这样的渲染方式，就是每个页面中，在Chrome中展开获得的DOM，和服务器返回的DOM是基本一致的（能够经过查看网页源代码来获得服务器返回的DOM）。固然，这里是“基本”一致，由于实际操做中，页面或多或少仍是会带有一些js代码，而且在浏览器端中运行这些js代码来对DOM进行的渲染，不过这一部分js代码并不影响DOM的主体是由服务端返回的。纯后端的DOM渲染，DOM树的生成彻底是在后端服务器中完成的，至关于后端服务器的程序会把各类的数据拼成一个DOM树，并转换成一个字节流做为HTTP Response的body返回给浏览器。

（2）纯前端渲染：纯前端渲染能够解决纯后端渲染中出现的各类体验问题。纯前端渲染把DOM生成的主题逻辑都放在了前端，这时后端只会返回一个框架的DOM结构，好比只带一个容器元素的的DOM，而后由js代码把页面的主题渲染到这个容器元素中。

（3）服务端的js渲染结合前端渲染：目前是最适于提供最优的使用体验，但不必定开发中最好的方式，在不一样的地方，根据不一样的方法来解决。

浏览器会解析三个东西：

（1）一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS，解析CSS会产生CSS规则树。
Javascript，脚本，主要是经过DOM API和CSSOM API来操做DOM Tree和CSS Rule Tree.
 （2）解析完成后，浏览器引擎会经过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意：
Rendering Tree 渲染树并不等同于DOM树，由于一些像Header或display:none的东西就不必放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每一个Element。也就是DOM结点。也就是所谓的Frame。
而后，计算每一个Frame（也就是每一个Element）的位置，这又叫layout和reflow过程。
 （3）最后经过调用操做系统Native GUI的API绘制。