浏览器工作原理学习笔记--输入URL,页面展示流程

552 阅读5分钟

前提知识

  • 浏览器进程,渲染进程,网络进程的主要职责。
    • 浏览器进程是主要负责用户交互,子进程管理,文件存储功能。
    • 网络进程是面向渲染进程和浏览器进程等提供网络下载功能。
    • 渲染进程主要是把从网络下载的HTML,JS,CSS等资源解析成可显示和交互的页面,因为渲染进程中的内容是通过网络获取的,会存在一些恶意代码和浏览器漏洞对系统进行攻击,所以在渲染进程中的代码是不被信任的。所以Chrome会让渲染进程运行在安全沙箱内,保证系统安全。

流程步骤

  • 首先,用户输入URL,输入请求信息。
  • 然后,网络进程发起URL请求。
  • 服务器响应之后,浏览器准备渲染进程。
  • 渲染进程准备好之后,需要向浏览进程提交数据,称之为提交文档阶段。
  • 渲染进程接受完文档信息后,开始解析页面和加载资源,完成页面渲染。

用户发出URL请求到页面解析的过程,叫做导航。

1.用户输入

先判断输入的关键字是搜索内容还是请求的URL。

  • 如果是搜索内容,地址栏会使用默认的搜索引擎,合成新的带关键字的URL。
  • 如果判断内容符合URL规则,地址栏会根据规则,合成完整的URL,www.baidu.com。这个时候进入加载状态,戴氏并不会立即替换页面,因为需要等待提交文档阶段,页面内容才会被替换。

2.URL请求过程

接下来进入页面资源请求过程,浏览器进程会通过**进程间通信(IPC)**把URL发送至网络进程,网络进程接收到URL请求后,会在这里发起真正的URL请求。

请求流程:

  • 网络进程会查找本地缓存是否缓存了该资源,如果有,直接返回资源给浏览器进程;如果没有在缓存中找到资源,那么进入网络请求流程。
  • 网络请求流程
    • 1.进行DNS解析,获取域名的服务器IP地址,如果是HTTPS,还需要建立TLS连接。
    • 2.利用IP地址和服务器建立TCP连接,连接建立后,浏览器会构建请求行,请求头等信息,并把cookie等数据添加到请求头中,然后向服务器发送构建的请求信息。
  • 服务器接收请求后,会根据请求信息生成响应数据,并发送给网络进程,等网络进程接收后,开始解析响应信息。

1)重定向

接收到响应信息后,开始解析响应头,如果发现返回的状态码是301,302,就要重新定向到其他URL,这是网络进程会从响应头的location字段里面读取重定向的地址,然后重新发送HTTP或HTTPS请求。

    curl -I http://time.geekbang.org

会发现,极客时间服务器会通过重定向的方式把所有的HTTP转换为HTTPS请求。

    curl -I https://time.geekbang.org

发现返回状态码200.以上就是重定向的介绍,

2)响应数据类型处理

怎样区分?

Content-Type:告诉浏览器服务器返回的数据是什么类型的,浏览器会根据Content-Type的值来决定如何显示响应体的内容。

    curl -I https://res001.geekbang.org/apps/geektime/android/2.3.1/official/geektime_2.3.1_20190527-2136_offical.apk

请求极客时间的安装包的地址。 发现Content-Type的类型为octet-stream(字节流)。通常情况下,浏览器会按照下载类型处理该类请求。

3)准备渲染进程

不同 Content-Type 的后续处理流程也截然不同。如果是HTML,浏览器会继续进行导航流程。

默认情况下,Chrome会为每个页面分配一个渲染进程。在某些情况下,浏览器会让多个页面直接运行在同一个渲染进程中,进程ID相同。

什么情况下多个页面会运行在一个渲染进程中?

“同一站点”定义为根域名加上协议

https://time.geekbang.org
https://www.geekbang.org
https://www.geekbang.org:8080

他们属于“同一站点”,因为协议都是HTTPS,根域名都是geekbang.org

Chrome的默认策略是,每个标签页对应一个渲染进程,但如果从一个页面打开了另一个新的页面,而新的页面和当前页面属于“同一站点”的话,那么新页面会复用父页面的渲染进程。官方把这个策略叫 process-per-site-instance。

若新的页面和当前页面不属于“同一站点”,会创建一个新的渲染进程。

4)提交文档阶段

“文档”:指URL请求的响应体数据

  • 提交文档的消息由浏览器进程发出,渲染进程后接收到消息后,会和网络进程建立传输数据的“管道”。
  • 文档数据传输完成后,渲染进程会返回“确认提交”的消息给浏览器进程。
  • 浏览器进程接受“确认提交”消息后Web页面。

这就解释了为什么浏览器的地址栏输入地址后, 之前的页面没有立马消失,而是要加载一会才会更新页面。

5)渲染阶段

一旦文档被提交,渲染进程就开始页面。这部分内容比较重要,专门章节介绍!