前端学习-浏览器在网页展示过程中负责干什么

WebKit 主流程

1. 用户输入URL，浏览器向web服务器发送一个http请求，接受文档内容（HTML、CSS、JS、Images等等）。
2. 渲染引擎开始解析 HTML 文档，并将各标记逐个转化成DOM Tree上的节点

• 由 DOM 元素和属性节点构成的树结构。DOM 是文档对象模型 (Document Object Model) 的缩写，是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树的根节点是Document对象。
• 解析 HTML由两个阶段组成：标记化和树构建

3. 解析CSS生成CSS Rule Tree
4. 解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree

• 由可视化元素按照其显示顺序而组成的树，也是文档的可视化表示。它的作用是让您按照正确的顺序绘制内容。
• Rendering Tree和 DOM 元素相对应的，但并非一一对应

5. 进入布局处理，为每个节点分配一个应出现在屏幕上的确切坐标。
6. 下一步是绘制。系统会遍历Rendering Tree，并调用Rendering器的“paint”方法，将内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。

• 这是一个渐进的过程。为达到更好的用户体验，render力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建render tree和layout。在不断接收和处理来自网络的其余内容的同时，render tree会将部分内容解析并显示出来。