传统的dom的渲染方式

传统的dom的渲染方式

DOM渲染的过程大致分为三个阶段：

　　后端渲染

　　前端渲染

　　独立DOM渲染（前后端相结合渲染）

1、后端渲染：DOM树的生成完全是在后端服务器中完成的，后端服务器的程序会把需要的数据拼合成一个类似于前端DOM节点组成的DOM树，并转化成字节流作为HTTP Response的body返回浏览器

 

2、前端渲染：前端渲染把DOM生成的主体逻辑都放在前端，后端之后返回一个框架的DOM结构，然后由js代码把页面的主题渲染到框架中。可以解决后端渲染中出现的各种体验问题。

 

3、主要是把前两个阶段中，一些交给纯后端DOM渲染逻辑分离的不好，但是交给纯前端DOM渲染又会造成较高延迟的部分单独分离出来形成了一独立DOM渲染阶段，保留的代码中天然的展示层和数据层的分离，又把API请求的累计延迟减少了很多，从SEO角度来说渲染结果对搜索引擎也很友好。当然，这样的做法需要给整体的架构增加一个独立的单元，给开发和部署都带来了更高复杂性。

 

浏览器会解析三个东西：
（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绘制。
 

posted on 2019-07-15 22:13 党党天下 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/dd86/p/11191923.html