1.概述
1.1 CPU,GPU,操作系统,应用程序
四者关系如下:
CPU,GPU ⇒ 操作系统 ⇒ 应用程序
GPU
即Graphics Processing Unit
,图像处理器
CPU、GPU 都属于计算机硬件提供汇编语言API
供操作系统调度,操作系统又提供高级语言API
供应用程序操作
1.2 应用程序里的进程、线程
应用程序(program)由多个进程(process)
构成,进程是CPU资源分配的最小单位;
单个进程又由多个线程(thread)
构成,线程是CPU调度的最小单位
如下图所示:
线程共享CPU分配给进程的资源内存空间,可以彼此通信,而同个程序里的进程之间内存地址是相互隔离的,需要通过IPC(Inter Process Communication)
进行通信
进程间彼此相互隔离,工作独立,一个进程GG了也不会影响其他进程
1.3 浏览器架构
浏览器按多个进程分成多个模块,各个模块相互独立,且有着单一职责,又相互联系,浏览器各个模块如下:
浏览器模块(Browser): 负责整个浏览器内行为协调,调用各个模块
网络模块(Network): 负责网络请求
存储模块(Storage): 负责本地存储
用户界面模块(UI): 负责浏览器提供给用户的界面模块
GPU模块: 负责绘图
渲染模块(Renderer): 负责渲染网页
设备模块(Device): 负责与各种本地设备交互
在Chrome浏览器里点击左上角的三个点按钮
⇒ 更多工具
⇒ 任务管理器
,可以看到浏览器里运行的各个进程
补充:
1.每一个页面会在这个渲染进程中运行,js是其中的一个单线程
2.Chrome在web是多进程,在移动设备由于资源有限故采用单进程
1.4 站点隔离
站点隔离
是将不同站点各自运行在独立的进程里,不许通信,实现沙盒隔离,从而阻碍了iframe绕过同源策略进行安全攻击的可能,因为同个进程站点之间可以进行数据通信
2.导航功能
在开始介绍浏览器的导航功能之前,先抛出一个经典问题:从输入一个url到显示一个页面,浏览器背后发生了些什么?
这个问题的背后其实涉及到了浏览器的很多个进程之间的通信,下面来逐个过一过这些模块
2.1 UI线程
ui线程
是浏览器进程
中的一个线程,负责浏览器UI展示和用户交互。用户在导航搜索栏输入时,会通过ui线程解析校验输入的url,在用户敲击回车后,ui线程控制网页tab栏开启loading动画,通知网络进程
发送请求
2.2 网络线程
网络线程
在拿到url后就会启动服务,DNS寻址
后通过一系列网络协议与服务器建立安全链接,在收到响应后,检查请求头header
里的content-type
字段发现是html类型数据,然后由浏览器进程通过IPC
该数据交由渲染进程
作处理
补充:
1.为提高效率,UI线程在通知网络线程发送请求的同时也会实例化一个渲染进程
等着
2.若content-type
为zip
或者其他类型文件,会将数据交由下载管理器进程
处理
2.3 渲染进程
渲染进程
在接收到html
数据后,就会解析html文件,开始渲染页面(具体渲染过程这里不展开),在完成渲染后,通过IPC
告知浏览器进程里的ui线程
停止tab栏的loading动画
流程图如下
参考
1.现代浏览器内部机制 Part 1 | 多进程架构
2.精读《深入了解现代浏览器一》
3.从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理