从输入URL到页面展示,这中间发生了什么?

281 阅读3分钟

  1. 导航栏输入内容,浏览器进程会判断内容是否符合URL规则。如果符合,那么会给URL添加相应的协议,例如;如果不符合,那么就会当作是搜索关键字,启用浏览器默认的搜索生成新的URL地址。

  2. 当用户在导航栏输入内容并回车之后,在当前页面即将被替换成新页面之前,浏览器给了当前页面一个执行beforeunload事件的机会。beforeunload事件可以取消导航。

  3. 浏览器进程通过进程间通信(IPC,Inter-Process Communication)将URL发送给网络进程,网络进程接收到URL地址之后,发起真正的请求。网络进程会查找本地是否有缓存资源,如果有缓存,可以直接返回缓存的资源给浏览器进程;如果没有缓存,那么进入网络请求流程。请求前的第一步是进行DNS解析,以获取域名服务器的IP地址。如果请求协议是HTTPS,那么还需要建立TLS(安全传输层协议)连接。接下来,通过IP地址建立TCP连接。建立连接之后,浏览器端会构建请求头,请求行等信息,并把和该域名相关的Cookie等数据附加到请求头中,然后向服务器发送构建的请求信息。

  4. 服务器接收到请求信息后,会根据请求信息生成响应数据(包括响应行、响应头、响应体等信息)并发送给网络进程。等网络进程接收响应数据之后就开始解析响应信息了。

    1. 重定向

      网络进程解析响应数据,拿到的响应头中的返回码是301、302的时候,说明服务器需要浏览器重定向到其他URL。网络进程拿到响应头中的Location字段的值就是新的URL地址,然后再发起HTTP或者HTTPS请求,从头开始。

    2. 响应数据类型处理

      浏览器会根据响应头中的Content-Type字段的值来决定如何处理响应体的内容。如果是下载类型,那么该请求会被提交到浏览器的下载管理器,同时该URL请求的导航流程就此结束。如果是HTML,那么浏览器会继续进行导航流程。

  5. 接下来是渲染进程准备,一般情况下,每个页面都会使用单独的渲染进程。除非A和B属于同一站点(),A打开B,B页面复用A的渲染进程。

  6. 渲染进程准备好之后,就进入了提交文档流程。所谓提交文档,就是指浏览器进程将网络进程接收到的HTML数据提交给渲染进程,具体流程如下:

    1. 首先,当浏览器进程接收到网络进程的响应头数据之后,就向渲染进程发起“提交文档”的消息。
    2. 渲染进程接收到发起“提交文档”消息后,会和网络进程建立传输数据的“管道”。
    3. 等文档数据传输完成之后,渲染进程会返回“确认提交”的消息通知浏览器进程。
    4. 浏览器进程在收到“确认提交”消息之后,会更新浏览器界面状态,包括安全状态、地址栏的URL、前进后退的历史状态,并更新web页面。

    到这里,一个完整的导航流程就“走”完了,接下来进入渲染阶段。

  7. 一旦文档被提交,渲染进程就开始页面解析和子资源加载了。一旦页面生成,渲染进程会发消息给浏览器进程,浏览器进程接收到这个消息之后,会停止标签图标上的加载动画。