WebKit 主流程
- 用户输入URL，浏览器向web服务器发送一个http请求，接受文档内容（HTML、CSS、JS、Images等等）。
- 渲染引擎开始解析 HTML 文档，并将各标记逐个转化成DOM Tree上的节点
- 由 DOM 元素和属性节点构成的树结构。DOM 是文档对象模型 (Document Object Model) 的缩写，是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树的根节点是Document对象。
- 解析 HTML由两个阶段组成：标记化和树构建
- 解析CSS生成CSS Rule Tree
- 解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree
- 由可视化元素按照其显示顺序而组成的树，也是文档的可视化表示。它的作用是让您按照正确的顺序绘制内容。
- Rendering Tree和 DOM 元素相对应的，但并非一一对应
- 进入布局处理，为每个节点分配一个应出现在屏幕上的确切坐标。
- 下一步是绘制。系统会遍历Rendering Tree，并调用Rendering器的“paint”方法，将内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。
- 这是一个渐进的过程。为达到更好的用户体验，render力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建render tree和layout。在不断接收和处理来自网络的其余内容的同时，render tree会将部分内容解析并显示出来。
网友评论