浏览器是如何运作的

Posted 2021-09-17 火腿肠烧烤大赛冠军

浏览器发展史

进程与线程

进程描述

很多应用都是多进程结构，每个进程分配独立的内存空间
进程之间依靠通信管道IPC进行通讯
每个进程独立操作并不会影响其他进程

浏览器的进程

现在的浏览器一般有很多进程 独立的负责自己的模块
浏览器一般会给每个标签页都开启一个进程

步骤

输入URL

浏览器通过ui线程判断是否为地址：
如果是则DNS解析然后通过网络请求地址数据
如果不是则利用默认配置的搜索引擎来进行查询

safebrowsing检测是否安全

网络线程获取数据后，先通过safebrowsing检测当前网站是否安全
如果是则展示一个警告界面（通过数据类似谷歌黑名单来判断是否安全）

创建渲染器进程

当文件准备ok后网络线程会通知UI线程
UI线程会创建一个渲染器进程，然后将数据通过IPC管道传给渲染器进程

DOM树构建

1. 通过tokeniser将输入的内容解析成多个标记
2. 根据识别标记进行DOM数构造
3. 构造中会创建document对象
4. 以document为根节点 向其中不断添加元素
5. js为单进程遇到js调用修改dom树则会重新回到tokeniser步骤

确定节点样式

默认css以及外部css

生成layoutTree

layoutTree每一个节点都记录的元素的坐标以及边框尺寸
dom树与layout树并不是一一对应的
如下图（css实现的样式要么没有要么多）

控制绘制顺序（解决类似z-index）

主线程遍历layoutTree创建一个绘制记录表（PaintRecord）

栅格化

将其转化为像素点显示到屏幕上
早期栅格化（类似懒加载）

新式栅格化方案

1. 将页面的各个部分分成多个图层
2. 分别对其进行栅格化
3. 在合成器页面单独进行合成页面
4. 将所有的页面分图层栅格化好
5. 将用户需要的部分组合成一帧即可
   

栅格过程中将整个图块切分成很多小线程来做

将栅格后的图块放入GPU中 栅格化结束后将栅格后小图块的地址信息以及页面中哪里绘制返回给合成器线程（DrawQuads）
再根据这些图块生成一个合成器帧通过IPC传给浏览器进程

再将其传给GPU展示到屏幕上 （如果滚动页面则会重新生成合成器帧给GPU）

总结

1. 浏览器网络进程获取数据
2. 通过IPC将数据床给渲染器进程的主线程
3. 主线程将html解析构造DOM树
4. 样式计算=》生成layoutTree=》生成绘制表=》生成layer tree
5. 主进程将这些信息传给合成器线程
6. 合成器线程通过分图层并将更小的图块床给栅格进程来进行栅格化
7. 栅格结束后 合成器线程接收到drawquals信息（绘制位置及内存位置）
8. 合成器线程合成了一个合成器帧
9. 再将其床给浏览器进程=》GPU渲染
10. over
    

tips

一、

当我们改变一个元素的尺寸位置时，会重新进行样式计算（重排）-重新进行layout paint以及后面的流程
改变颜色属性 不会重新出发布局但是 也需要触发样式计算和绘制（重绘）
重排重绘都会占用主线程（js也用）
所以不断重排重绘动画其中穿插js并且js没有及时归还主线程则会导致页面的卡顿

该API可以解决 （将js分成小块来进行执行）


二、
栅格化的整个流程是不占用主线程的
CSS的transform不占用主线程，该属性动画不会重新绘制、直接运行在合成器线程和栅格化线程中
同时也减少了很多js计算时间