1. 用户输入

• 输入url链接: www.baidu.com 直接跳转网页
• 输入关键词: 开启搜索

并且执行离开页面的beforeunload事件

2. URL 请求过程

浏览器将url通过进程间通信(IPC)发送到网络进程中, 发起网络请求.

为了快速显示页面会有缓存, 所以先访问缓存, 没有缓存再发起请求.

1. 查询是否有本地缓存,

   1. 有 ⇒ 直接返回浏览器进程展示页面
   2. 无 ⇒ 发起网络请求

2. 进行DNS解析, 用url获取ip地址, 如果是https, 建立TLS连接

3. TCP连接

4. 浏览器构建请求, 将请求行, 请求头, 还有cookie, 一起发送到服务器.

5. 服务器接收信息, 响应数据, 浏览器在网络进程中接收数据

   1. 当返回的状态码为301, 302, 则浏览器重定向到新地址, 再从第一步重新发起请求

   2. 解析http头中的Content-Type,

      1. 如果是下载类型 ⇒ 交给下载器
      2. 如果是HTML类型, 继续进行导航流程

3. 准备渲染进程

为每个页面分配一个渲染进程,

如果是从一个页面打开的新页面是同一个站点, 会共用一个渲染进程.

官方把这个默认策略叫 process-per-site-instance

4. 提交文档

浏览器进程 通知 网络进程接收到的HTML数据提交给渲染进程, 浏览器进程等待接收数据.

1. 浏览器进程 接收到 网络进程的数据后, 通知 渲染进程去发起”提交文档”的的消息
2. 渲染进程接收到消息后, 就跟 网络进程建立”管道”通信
3. 传输完了, 渲染进程返回”确认提交”的消息给浏览器进程
4. 浏览器进程 收到确认提交后, 更新页面, 还有安装状态, 地址栏url, 前进后退的历史状态

5. 渲染阶段

页面生成完了, 通知给浏览器进程, 停止loading. 更新web页面, 可以看到页面了.

总结

整个导航的过程, 就是我想通过url链接看到一个网页.

整个流程是, 我打来浏览器输入url链接, url地址是一个门牌号, 得通过DNS服务器去获取实际的ip地址, 拿到ip地址, 再通过https向这个ip地址上的服务器发起请求, 服务器返回给浏览器一堆数据, 浏览器就得解析这些数据, 解析完了就生成网页了.

感性的可以认为:

我(浏览器)想吃个辣椒炒肉, 我要去菜市场(url)买菜, 但是我不知道菜市场具体在哪里,

然后我去村口门卫(DNS)那去问菜市场具体的位置(IP地址),

然后我找到了菜市场, 说买个辣椒, 买个肉, 买点蒜(网路进程), 然后小贩把菜给我(服务器响应数据),

然后我回家拿了个锅(单开的渲染进程)准备炒菜, 然后我把辣椒,肉,蒜都放进锅里(提交文档),

看着锅里的锅气出来了, 就炒好了(渲染进程通知浏览器进程), 出锅装盘(更新web页面).

开吃!