关于浏览器在运作时的流程

浏览器是如何运作的

我们要理解浏览器是如何运作的过程，首先要理解一个概念，也就是进程与线程

进程是操作系统进行资源分配和调度的基本单元可以申请和拥有计算机资源进程是程序的基本执行实体
线程是操作系统能够进行运算调度的最小单位一个进程中可以并发多个线程每条线程并行执行不同的任务

在我们了解了进程与线程的概念以后，就可以和你介绍浏览器的运作流程了
当我们在电脑上打开打了浏览器时，相当于运行了浏览器这个应用程序

浏览器的多进程结构

而浏览器这个是一个多进程的浏览器结构，根据进程功能不同来拆分浏览器，我们可以将浏览器分解为：

1.浏览器进程

 负责控制浏览器除标签页外的用户界面 

 包括地址栏 书签 后退 和前进按钮 以及负责与浏览器的其他进程协调工作

2.GPU进程

 负责整个浏览器界面的渲染

3.插件进程

 负责控制网站使用的所有插件

4.缓存进程
5.网络进程

负责发起接受网络请求

6.渲染器进程

用来控制显示tab标签内的所有内容 浏览器在默认情况下会为每个标签页创建一个渲染器进程

浏览器的渲染过程

当你在浏览器地址栏输入地址时浏览器的ui线程会捕捉你的输入内容
如果访问的是网址则ui线程会启动一个网络线程来请求dns进行域名解析
接着连接服务器获取数据
当网络线程获取到数据后会通过 safeBrowsing来检查站点（检查是否是恶意站点，会弹出警告）

safebrowsing是谷歌内置的一套站点安全系统通过检测该站点的数据来判断是否安全
当安全校验通过时网络线程会通知ui线程准备好了然后ui线程会创建一个渲染器进程来渲染页面浏览器进程通过ipc管道将数据传递给渲染器进程
渲染器进程的核心任务就是把 html css js 等资源渲染成用户可以交互的web界面渲染器进程的主线程将html进行解析构造dom数据结构在加载完成后我们会获得一个dom tree
在知道dom的结构和每个节点的样式后接下来需要知道每个节点放在页面上的哪个位置也就是节点的坐标以及该节点需要占用多大的区域这个阶段被称为layout布局主线程通过遍历dom和计算好的样式来生成layout ree 上面的每个节点都记录了x y 坐标与边框尺寸（这里注意dom tree 与layout tree并不是一一对应的设置的display：none的节点并不会出现在layout tree上而在before伪类添加了content值的元素会出现在layout tree 而不会出现在dom tree上）
为了保证在屏幕上展示正确的层级主线程遍历layout tree创建一个绘制记录表记录了绘制的顺序该阶段被称为绘制 paint
主线程遍历layout tree 生成layer tree
主线程将这些layer tree 和绘制信息传递给合成器线程合成器线程将他们切分为许多图块然后将每个图块发送给栅格化线程栅格化线程栅格化每个图块并将他们存储在gpu内存中当图块栅格化完成后合成器线程将收集称为“draw quads”的图块信息这些信息里记录了图块在内存中的位置和在页面的那个位置绘制图块的信息根据这些信息合成器线程生成了一个合成器帧这个合成器帧通过ipc传送给浏览器进程接着浏览器进程将合成器帧传送到gpu 然后gpu渲染展示到屏幕上当页面发生变化比如滚动页面都会生成一个新的合成器帧重复之前的流程
此时，你就可以看到显示在可视区域的图块了