浏览器探究之渲染流程（3）

浏览器探究之渲染流程（3）

浏览器运行机制里面渲染部分主要由浏览器完成，上一篇已经了解了浏览器Network线程做完安全检查后，会把任务交给UI线程，UI线程所属进程——Browser进程会通过IPC（进程间通信）告诉Rende Process（渲染进程）开始渲染。

Rende Process 进程

Rende Process 进程负责把HTML文档解析为DOM树，完成CSS选择器匹配，计算布局，绘制，分块（把文档切分为小块），最后再把这些小块组合成一个位图并显示。

详细解析

1. 解析HTML文档为DOM树

   • HTML文档是一个文本文件，需要被解析成DOM树才能被浏览器理解。
   • DOM树是一个层次结构，它了HTML文档中的元素及其之间的关系。
   • DOM树的根节点是html元素，它的子节点是head元素和body元素。
   • head元素包含了文档的元数据，如标题、作者和关键词。
   • body元素包含了文档的主体内容，如段落、列表和表格。

2. 完成CSS选择器匹配

   • CSS选择器用于从DOM树中选择元素。
   • CSS选择器可以根据元素的名称、ID、类名、属性或其他特征来选择元素。
   • 当CSS选择器匹配到一个元素时，该元素将被应用CSS规则。

3. 计算布局

   • 布局计算是指确定DOM树中元素的位置和大小。
   • 布局计算是通过CSS盒模型来完成的。
   • CSS盒模型把每个元素都看作一个盒子，盒子有四个边框：上边框、下边框、左边框和右边框。
   • 盒子的内容区域是盒子内部的区域，它不包括边框和内边距。
   • 盒子的填充区域是盒子内容区域与边框之间的区域。
   • 盒子的边距区域是盒子与其他元素之间的区域。

4. 绘制

   • 绘制是指把DOM树中的元素绘制到屏幕上。
   • 绘制是通过图形API（如OpenGL或DirectX）来完成的。
   • 图形API提供了一组函数，这些函数可以用来绘制各种图形元素，如矩形、圆形和文本。

5. 分块

   • 分块是指把文档切分为小块。
   • 分块是为了提高渲染性能。
   • 当浏览器滚动页面时，只需要重新绘制被滚动的部分，而不是整个页面。

6. 组合位图并显示

   • 最后，浏览器会把分块的小块组合成一个位图，并显示在屏幕上。
   • 位图是一个由像素组成的图像。
   • 每个像素都有一个颜色值。
   • 当浏览器组合位图时，它会把每个小块的像素颜色值组合成一个新的像素颜色值。
   • 新的像素颜色值将被应用到屏幕上的相应位置。