浏览器架构粗解
目前主流的浏览器基本采用多进程的架构
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241121/7aa49afccc1ffae152a6d260574630db.png)
进程说明
* 浏览器主进程 :页面显示、子进程管理、用户交互、数据存储等功能。
* 渲染进程 :HTML、CSS、JS渲染出网页,V8引擎和排版Blink在该进程下运行,渲染进程在沙箱下运行,每个tab页对应一个渲染进程。
* 网络进程 :负责网络资源加载,之前在浏览器主进程运行。
* GPU进程 :实现3D效果、网页和Chroma界面渲染。
* 插件进程 :插件运行进程,在沙箱下运行,插件崩溃不会影响页面运行。
我们写的JS主要运行在渲染进程中,在渲染进程中又存在多个线程。
渲染进程的主要线程:
* 主线程:这是我们JS执行的地方,事件循环也发生在这个线程中
* 合成线程:这里是将HTML、CSS等合成为视口附近图块的位图
* 栅格化线程:渲染进程中维护一个栅格化线程池,每个栅格化线程会从合成线程获取位图数据,调用GPU进程交互生成图像信息
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241121/4e25237a236d52af8f394cb695bc7c5a.png)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241121/55a60ef3264e45844f09fdfdcfd75e98.png)
因为页面JS运行在渲染进程的主线程下,所以通常说JS一个单线程 。
问题
«浏览器是一个页面一个线程吗?
还是一个页面可以有多个线程?»
* 通常情况下,每打开一个新的Tab页都会创建一个渲染进程。
* 从A页面打开B页时,如果B页和A页属于同一个站点,则B页和当A页共用一个渲染进程。否则浏览器会为B页创建新的渲染进程。
«同一站点:是指两个请求地址的【根域名】相同、【协议】相同,包括根域名下的所有子域名和端口。»
https://time.geekbang.org
https://www.geekbang.org
https://www.geekbang.org:8080
这三个网址属于同一站点,因为他们的协议相同、根据域名相同。所以在浏览器中用3个Tab页打开,但是使用相同的渲染进程。
一个渲染进程里面会有多个线程,页面JS主要运行在渲染进程的主线程上。