渲染树构建、布局及绘制

描述下一个网页是如何渲染出来的，dom树和css树是如何合并的，浏览器的运行机制是什么，什么是否会造成渲染阻塞？

浏览器的组成

1. 用户界面
2. 浏览器引擎
3. 渲染引擎
4. 网络组件
5. js 解析器
6. UI 后端
7. 数据存储持久化层

浏览器中的线程进程

浏览器使用多进程来隔离不同的网页的，没开启一个 tab 页面相当于开启一个进程，每个进程中的渲染引擎实例都是独立的，如果一个页面崩溃是不影响其他页面的。相对于线程，进程之前是不共享资源和地址栏空间的，所以会存在线程之间有可能会恶意修改或者获取非授权数据等复杂的安全问题。

请你描述下一个网页是如何渲染出来的

1. 浏览器根据 html 资源构建 DOM 树。
2. 浏览器根据 css 资源构建 CSSOM 树。
3. DOM 树 和 CSS 树 合并成渲染树。
4. 根据渲染树来布局， 计算每个节点的几何信息。
5. 将各个节点绘制到屏幕上

dom树和css树是如何合并的

1. 从根节点开始遍历所有可见节点
2. 对个每个可视节点，为其找到适配的 CSSOM 规则并应用它们
3. 构建可视节点，连同其内容和计算样式

浏览器的运行机制是什么