浏览器知识 主要组件， dom渲染过程

浏览器的主要组件包括以下7个部分

1. 用户界面  包括地址栏，后退/前进， 书签目录等，也就是用户看到的页面
2. 浏览器引擎   用于查询和操作渲染引擎的接口
3. 渲染引擎  用户显示请求的内容 如html
4. 网络  用于完成网络调用 如http请求
5. UI后端 用于绘制类似组合选择框及对话框等基本组件，
6. JS解释器， 用于解释执行JS代码
7. 数据存储 属于数据持久层

浏览器整个流程如上图所示：

1. 当用户输入一个URL时，浏览器就会向服务器发出一个请求，请求URL对应的资源
2. 接受到服务器的响应内容后，浏览器的HTML解析器，会将HTML文件解析成一棵DOM树，DOM树的构建是一个深度遍历的过程，当前节点的所有子节点都构建完成以后，才会去构建当前节点的下一个兄弟节点。
3. 将CSS解析成CSSOM树（CSS Rule Tree）
4. 根据DOM树和CSSOM树，来构建Render Tree（渲染树）,注意渲染树，并不等于DOM树，因为一些像head或display:none的东西，就没有必要放在渲染树中了。
5. 有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS定义，以及它们的从属关系，下一步操作就是Layout,顾名思义，就是计算出每个节点在屏幕中的位置。
6. Layout后，浏览器已经知道哪些节点要显示，每个节点的CSS属性是什么，每个节点在屏幕中的位置是哪里，就进入了最后一步painting,按照算出来的规则，通过显卡，把内容画到屏幕上。

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/103871914