浏览器运行原理-从搜索框输入URL或关键字到页面成功展示的过程

以下讲解均以Chrome浏览器为例

浏览器的多进程架构

浏览器有四个进程，分别是：

1. 浏览器进程（Browser Process）：负责处理浏览器的各种操作，如后退、标签等页面之外的操作。浏览器线程中有三个重要线程：
   1.1 UI thread 用于处理用户输入信息和操作
   1.2 network thread 用于处理网络请求和响应
   1.3 storage thread 用于处理文件等操作
2. 插件进程（Plugin Process）: 负责处理各种插件的加载执行。
3. 渲染进程（Renderer Process）： 负责处理页面。渲染进程有四种重要线程：
   3.1 main thread 一个主要线程
   3.2 work thread 多个工作线程
   3.3 compositor thread 一个合成器线程
   3.4 raster thread 多个光栅化线程
4. GPU进程（GPU Process）： 负责处理页面GPU任务。

浏览器的进程模式

浏览器也提供了四个进程模式，满足进程模式的页面使用相同进程：

1. Process-per-site-instance 默认进程模式，即该页面和由该页面操作打开的其他页面为一个site-instance。
2. Process-per-site 即同一个注册域名内的网页。
3. Process-per-tab 即每一个tab网页。
4. Single process 即所有tab网页共用

从上述解释可以得出，Process-per-site-instance模式能较好地保证浏览器性能和易用性。

当你搜索时会发生什么

1. 当你输入URL或关键词并敲击回车后，UI thread 将处理后的URL发送给network thread。
2. network thread根据URL向DNS发送请求寻址，如果找到该URL并收到响应报文，那么连接成功建立，如果没有找到或其他原因错误，那么连接失败，页面会有响应体现（404 not found等）。
3. network thread 解析响应报文，如果是HTML文件，会将数据交给渲染进程继续处理，如果是zip等文件会交给storage thread进行下载等操作。。
4. network thread 通知UI thread数据已经准备好，UI thread找到空闲渲染进程，进行页面渲染操作。

网页渲染流程

1. 收到数据后，main thread 会将数据构建成DOM对象
2. main thread遇到link、图片、视频等需要加载的文件，main thread会发送消息给network thread去下载资源。
3. main thread遇到async、await标签会暂时绕过该语句，防止运行阻塞。
4. main thread遇到样式语句时，会将其解析计算，再渲染到页面上。

网页交互流程

1. 页面渲染完成后，用户的各种操作都会被Browser Process监听
2. 当用户做出操作，Browser Process会识别到操作发生的位置和类型，将信息发送给Renderer Process，RendererProcess找到目标对象，并分析事件，将其交给对应线程处理。