浏览器工作原理笔记1（资源传输阶段）

清水寺小和尚
368 阅读7分钟

前置知识 进程VS线程

进程

一个进程就是一个程序的运行实例。当启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码，运行中的数据和一个执行任务的主线程，我们把这样一个运行环境叫做进程。

线程依赖于进程，在进程中使用多线程并行处理能提升运算效率。

  1. 进程中任意线程出错，会导致整个进程崩溃
  2. 线程之间共享进程的数据
  3. 当一个进程关闭后，操作系统会回收进程所占用的内存
  4. 进程之间内容相互隔离

浏览器演化

浏览器演化：单进程（07年之前）》多进程（08年后）》面向服务的架构（2016年后）

为什么打开一个标签页会出现4个进程？（浏览器更多工具-任务管理器可查看）

由浏览器的进程架构决定，包括主进程+渲染进程+GPU进程+网络进程

tips:现代浏览器都是面向服务的了，为了便于理解，还是按进程思想理解

数据如何传输

在衡量 Web 页面性能的时候有一个重要的指标叫“FP（First Paint）”，是指从页面加载到首次开始绘制的时长。那什么影响 FP 指标呢？其中一个重要的因素是网络加载速度。

TCP/IP如何工作的

一个数据包的旅程

  1. IP(Internet Protocol):把数据包送达目的主机

ip.png

  1. UDP(User Datagram Protocol):把数据包传输到应用程序

    IP 通过 IP 地址信息把数据包发送给指定的电脑，而 UDP 通过端口号把数据包分发给正确的程序

udp.png

  1. TCP Transmission Control Protocol

    是一种面向连接的、可靠的、基于字节流的传输层通信协议

    相对于 UDP，TCP 有下面两个特点:

对于数据包丢失的情况，TCP 提供重传机制； TCP 引入了数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件。

tcp.png

一个完整的 TCP 连接的生命周期包括了“建立连接”“传输数据”和“断开连接”三个阶段。

三次握手 and 四次挥手

浏览器端发起 HTTP 请求流程

  1. 构建请求 GET /index.html HTTP1.1
  2. 查找缓存（浏览器缓存是一种在本地保存资源副本，以供下次请求时直接使用的技术）
  3. 准备IP地址和端口（DNS查询）因为浏览器使用HTTP 协议作为应用层协议，用来封装请求的文本信息；并使用TCP/IP 作传输层协议将它发到网络上，所以在 HTTP 工作开始之前，浏览器需要通过 TCP 与服务器建立连接。也就是说HTTP 的内容是通过 TCP 的传输数据阶段来实现的。
  4. 等待 TCP 队列（Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接，如果在同一个域名下同时有 10 个请求发生，那么其中 4 个请求会进入排队等待状态，直至进行中的请求完成。）
  5. 建立TCP连接
  6. 发送HTTP请求

req.png

完整流程

full.png

服务器处理HTTP请求流程

res.png

从用户输入到页面呈现进程间交互如图所示：

url.png

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

具体流程：

  1. 用户输入

    • 如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带搜索关键字的 URL。
    • 如果判断输入内容符合 URL 规则，比如输入的是 time.geekbang.org，那么地址栏会根据规则，把这段内容加上协议，合成为完整的 URL

  2. URL 请求过程

    网络进程会查找本地缓存是否缓存了该资源。如果有缓存资源，那么直接返回资源给浏览器进程；如果在缓存中没有查找到资源，那么直接进入网络请求流程。这请求前的第一步是要进行 DNS 解析，以获取请求域名的服务器 IP 地址。如果请求协议是 HTTPS，那么还需要建立 TLS 连接。

    接下来就是利用 IP 地址和服务器建立 TCP 连接。连接建立之后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，然后向服务器发送构建的请求信息。

    服务器接收到请求信息后，会根据请求信息生成响应数据（包括响应行、响应头和响应体等信息），并发给网络进程。等网络进程接收了响应行和响应头之后，就开始解析响应头的内容了。（为了方便讲述，下面我将服务器返回的响应头和响应行统称为响应头。）

    • 重定向(301/302)

      在接收到服务器返回的响应头后，网络进程开始解析响应头，如果发现返回的状态码是 301 或者 302，那么说明服务器需要浏览器重定向到其他 URL。这时网络进程会从响应头的 Location 字段里面读取重定向的地址，然后再发起新的 HTTP 或者 HTTPS 请求，一切又重头开始了。

    • 响应数据类型处理

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

  3. 准备渲染进程

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

    打开一个新页面采用的渲染进程策略就是：

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

  4. 提交文档

    “提交文档”的消息是由浏览器进程发出的，渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”。

    等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程。

    浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页面。

下一节进入渲染阶段

思考题？

  1. 为什么很多站点第二次打开速度会很快？
  2. 登录状态是如何保持的？

参考

缓存相关

常见响应状态吗

avatar
文章
阅读
粉丝