从输入URL到页面展示,这中间究竟发生了什么(浏览器角度分析)?

58 阅读4分钟

“在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,涉及到了网络、操作系统、Web 等一系列的知识。下面从浏览器角度分析整个过程:

一、浏览器各个进程

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

  • 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。

  • 渲染进程的主要职责是把从网络下载的 HTML、JavaScript、CSS、图片等资源解析为可以显示和交互的页面。

二、整体过程概览

  • 首先,浏览器进程接收到用户输入的 URL 请求,浏览器进程便将该 URL 转发给网络进程。

  • 然后,在网络进程中发起真正的 URL 请求。

  • 接着网络进程接收到了响应头数据,便解析响应头数据,并将数据转发给浏览器进程。

  • 浏览器进程接收到网络进程的响应头数据之后,发送“提交导航 (CommitNavigation)”消息到渲染进程;

  • 渲染进程接收到“提交导航”的消息之后,便开始准备接收 HTML 数据,接收数据的方式是直接和网络进程建立数据管道;

  • 最后渲染进程会向浏览器进程“确认提交”,这是告诉浏览器进程:“已经准备好接受和解析页面数据了”。

  • 浏览器进程接收到渲染进程“提交文档”的消息之后,便开始移除之前旧的文档,然后更新浏览器进程中的页面状态。

三、用户输入

该阶段主要任务是讲用户的输入转换成为完整的URL。

当用户在地址栏中输入一个查询关键字时,浏览器地址栏会判断输入的关键字是搜索内容,还是请求的 URL。

  • 如果是搜索内容,地址栏会使用浏览器默认的搜索引擎,来合成新的带搜索关键字的 URL。

  • 如果判断输入的额内容符合URL规则,那么地址栏会根据规则,把输入内容加上协议,合成为完整的 URL。

当浏览器开始加载一个地址后,标签页的图标进入加载状态,此时浏览器页面还是之前的页面。

四、URL 请求过程

该阶段主要任务是获取资源和数据,获取后返回给浏览器进程,未后续渲染进程渲染提供源材料。

当有了完整的URL,浏览器进程会通过进程间通信(IPC)把 URL 请求发送至网络进程,网络进程会首先从本地缓存查找资源,如果有资源直接返回给浏览器进程;如果没有则会从网络中进行查找。

4.1 发送请求

进行DNS解析,获取目标服务器的IP地址;

建立TCP连接;

构建请求行、请求头等信息,向服务器发送构建的请求信息。

4.2 重定向

在导航过程中,如果服务器响应行的状态码包含了 301、302 一类的跳转信息,浏览器会从响应头的 Location 字段里面读取重定向的地址,跳转到新的地址继续导航;如果响应行是 200,那么表示浏览器可以继续处理该请求。

4.3 响应数据类型处理

Content-Type 是 HTTP 头中一个非常重要的字段, 它告诉浏览器服务器返回的响应体数据是什么类型,然后浏览器会根据 Content-Type 的值来决定如何显示响应体的内容。

如果 Content-Type 字段的值被浏览器判断为下载类型(application/octet-stream),那么该请求会被提交给浏览器的下载管理器,同时该 URL 请求的导航流程就此结束。但如果是 HTML(text/html),那么浏览器则会继续进行渲染。

五、渲染

5.1 渲染进程准备

渲染进程策略是:

  • 通常情况下,打开新的页面都会使用单独的渲染进程;

  • 如果从 A 页面打开 B 页面,且 A 和 B 都属于同一站点的话,那么 B 页面复用 A 页面的渲染进程;如果是其他情况,浏览器进程则会为 B 创建一个新的渲染进程。

渲染进程准备好之后,还不能立即进入文档解析状态,因为此时的文档数据还在网络进程中,并没有提交给渲染进程,所以下一步就进入了提交文档阶段。

5.2 提交文档

所谓提交文档,就是指浏览器进程将网络进程接收到的 HTML 数据提交给渲染进程。

5.3 渲染

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

极客时间《浏览器工作原理与实践》学习笔记 Day06