从输入URL到页面渲染加载的过程

63 阅读3分钟

浏览器是多进程的

浏览器之所以能运行起来,那是因为操作系统给它的进程分配了资源( CPU 与内存),即每打一个 Tab 页签,就相当于创建了一个独立的浏览器进程。

但为了性能考虑,浏览器的优化策略会将多个空的 Tab 页签进程合并为一个,在有输入内容之后才分离出来创建一个新的浏览器进程

浏览器工作的网络部分

1. DNS 解析

  1. 浏览器接收 URL 并开启一个新进程(浏览器的进程与线程的关系)
  2. 浏览器解析输入的 URL,提取出其中的协议、域名和路径等信息(URL 组成部分)
  3. 浏览器向 DNS 服务器发送请求,DNS 服务器通过多层查询将该域名解析为对应的 IP 地址,然后将请求发送到该 IP 地址上(DNS 递归查询)(其实 DNS 解析就是一个“翻译”的过程,将网址 URL 翻译成 IP 地址)

2. 建立 TCP 连接

  1. HTTP 协议是使用 TCP 作为其传输协议的,HTTP 报文是包裹在 TCP 报文中发送的,服务器收到 TCP 报文时会解包提取出 HTTP 报文(HTTP 协议有信息泄露的风险,因为 HTTP 报文是明文的,我们就需要在其进去 TCP 报文之前,使用 SSL 或 TSL 对 HTTP 报文进行一次加密,这也是 HTTPS 协议的本质)
  2. 浏览器使用 HTTP/HTTPS 协议与服务器建立 TCP 连接(TCP 三次握手/五层网络协议)
  3. 传输数据之前,需要客户端与服务器进行一个握手(SSL 与 TSL 握手),握手过程中确立双方加密传输信息的密码信息

3. 发送 HTTP 请求

浏览器向服务器发送一个 HTTP 请求,其实就是构建 HTTP 请求报文,包含

  • 请求方法getpost 等)
  • 请求头user-agentcookie 等)
  • 请求体post 请求携带的数据)

4. 服务器接收并处理请求

  • 动态生成页面
  • 查询数据库
  • 读取文件

5. 服务器返回响应数据(HTTP 报文)

服务器处理完请求后,会生成一个 HTTP 响应,包含

  • 状态码
  • 响应头(响应头包含了 content-type、缓存控制等)
  • 响应体

6. 浏览器接收到响应数据(HTTP 报文)

  • 解析响应头和响应体
  • 根据状态码判断是否成功

7. 浏览器解析渲染页面

浏览器接收到 HTTP 数据包后,会边解析边渲染

  1. 首先开始解析 HTML 文档(词法分析),并构建 DOM 树
  2. 再将 CSS 样式表解析成 CSSOM 树,计算出每一个元素的样式
  3. 等 DOM 树与 CSSOM 树构建完后,合并生成 render 渲染树(样式计算)
  4. 浏览器开始布局渲染树并将其绘制到屏幕上(layout 布局、分层,调用 GPU 绘制等)
  5. 最后将绘制的结果合成最终的页面图像,显示在页面上(回流与重绘)

8. 连接结束,断开TCP连接(四次挥手)

新垣结衣.png

最后附上我老婆在图书馆帮忙查阅到的相关资料,祝大家也找到一位爱学习的老婆哟