浏览器原理：2.从输入URL到页面展示的全过程分析

浏览器的多进程架构

首先我们再回顾一下，多进程浏览器的架构部分

三大进程

• 浏览器进程

  主要负责用户交互、子进程管理和文件存储等功能

• 网络进程

  面向渲染进程和浏览器进程等提供网路下载功能

• 渲染进程

  把从网络下载的资源文件解析为可以显示和交互的页面。因为渲染进程里面所有的内容都是通过网络获取的，会存在一些恶意代码利用浏览器漏洞对操作系统进行攻击，所以运行在渲染进程里面的代码是被不信任的。这也是为什么 Chrome 会让渲染进程运行在安全沙箱里，为了保证系统的安全。

整个过程的大体描述

• 首先用户从浏览器进程里输入请求信息

• 然后网络进程向服务器发起 URL 请求

• 服务器响应 URL 请求后，浏览器进程开始准备渲染进程

• 渲染进程准备好之后，需要向渲染进程提交待渲染的资源文档，提交文段阶段

• 渲染进程接收到文档后，便开始解析页面和加载子资源，完成页面的渲染

• 完成页面的渲染后，将渲染的图片交给浏览器进程，浏览器进程负责展示

这就是从用户发出 URL 请求到页面开始解析的这个过程的大体描述。

从输入 URL 到页面展示的具体细节

• 用户输入

  浏览器首先会判断用户输入的关键字是搜索内容还是请求的URL
  如果是搜索内容，会交给搜索引擎生成对应的url
  如果是请求的url格式，会根据规则自动填充协议（https://）

• URL请求过程

  浏览器进程会通过进程间通信（IPC）把 URL 请求发送至网络进程，网络进程接收到 URL 请求后，会在这里发起真正的 URL 请求流程

  首先，网络进程会查找本地缓存是否缓存了该资源

  • 如果有，就直接返回资源给浏览器进程

  • 如果没有，就进入网络请求流程

    请求前的第一步是进行 DNS 解析，以获取请求域名的服务器 IP 地址，如果请求地址 是 HTTPS，那么还需要建立 TLS/SSL 连接

    接下来啊就是利用 IP 地址和 端口号与服务器三次握手建立 TCP 连接，建立之后，浏览器会构建请求行，请求头，请求主体等信息形成 HTTP 报文发送给，并把 cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息

    服务器接收到请求信息后，会根据请求信息生成响应数据，并发送给网络进程，等网络进程接受了响应行和响应头之后，就开始解析响应头的内容

    • 当状态码为 301，302时，需要重定向到其他 URL ，这时浏览器会读取 Location 字段中的 url 重复上述操作
    • 当状态码为 2 开头，代表响应成功

    响应数据类型处理，在收到服务器传输过来的数据后，浏览器会根据响应头中的 Content-Type 字段，来决定如何显示响应体的内容。即不同 Content-Type 的后续处理流程是不同的，例如输入有些url会直接执行下载操作

    如果是HTML，那么浏览器会继续进行页面渲染，由于 Chrome 页面渲染是运行在渲染进程中的，所以接下来就需要准备渲染进程

• 准备渲染进程

  默认情况下，Chrome 会为每个页面分配一个渲染进程，即每打开一个新页面，Chrome就会创建分配一个新的渲染进程，在某些情况下，浏览器会让多个页面直接运行在同一个渲染进程中。Chrome 的默认策略是，每个标签对应一个渲染进程，但如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的化，那么新页面会复用父页面的渲染进程。process-per-site-instance

  在准备好渲染进程之后，就是提交文档阶段

• 提交文档

  这里的文档 ，是 URL请求的响应体数据

  • 提交文档的信息由 浏览器进程 发出的，渲染进程接收到 提交文档 的消息后，会和网络进程建立传输数据的管道
  • 等文档数据传输完成后，渲染进程会返回 确认提交 的消息给 浏览器进程
  • 浏览器进程在收到确认提交的信息后，会更新浏览器界面状态，包括了安全状态、地址栏的URL、前进后退的历史状态、并更新Web页面

  接下来就是 渲染阶段

• 渲染阶段

  一旦文档被提交，渲染进程便开始页面解析和子资源加载。渲染阶段比较复杂，这里先不详细介绍

总结

从url输入到浏览器展示页面的全过程

• 在输入url，浏览器判断其类型，判断如果为url，自动填充网络协议，并开始准备网络进程

• 浏览器进程会将url请求发送给网络进程，即url请求全过程交由网络进程负责，网络进程在收到 url 请求后，先查找本地是否有资源缓存并且是否过期，如果不满足，则开始向 web 服务器发送http请求

  • 首先进行DNS解析，获取服务器的 IP 地址，端口号则根据 url 中如果有端口号则提取出来，没有则 http 协议中默认为 80
  • 三次握手建立TCP连接
  • 构建请求报文，根据浏览器自身的属性，目标服务器的IP地址和端口号
  • 服务器响应后，网络进程接受响应报文，并根据响应头的内容（主要是状态码）来做出不同的执行，响应体的内容一般就是传输的数据

• 在成功接收到响应报文，且状态码成功后，会开始准备渲染进程，如果是该域名d额根域名与之前存在的根域名相同，则会复用同一个渲染进程

• 准备好渲染进程后，浏览器进程向渲染进程发起 提交文档 的信息，随后渲染进程和网络进程建立连接，在渲染进程成功接受完网络进程传过来的数据过后，会向浏览器进程发起接受成功的消息，在浏览器进程接受到成功的消息后，会及时更新状态栏，安全，历史状态等信息

• 渲染进程开始渲染，渲染完成后，将渲染出来的图片交给浏览器进程，随后浏览器负责展示图片