跳到主要内容

1.2-网页的网络交互

Create by fall on — — 2020 Recently revised in 03 May 2024

如何进入网页​

第 1 步，地址栏输入

  • 输入搜索内容：会根据浏览器默认搜索引擎生成网址
  • 输入网址：符合 URL 规则，符合 URL 协议。内容 + 协议，合成合法的 URL

第 2 步，loading状态

呈现之前的界面，新的页面相应数据还没有获得

第 3 步，浏览器通信

将 URL 发送给网络进程

第 4 步，网络进程处理

  • 获取到 URL
    • 有缓存文件，拦截，直接 200 返回
    • 无缓存文件，进入到网络请求的过程
  • 请求 DNS（返回对应 IP 端口）
    • 缓存过当前域名信息，直接返回信息
    • 未缓存，发送请求获取根据域名解析出来的 IP 地址和端口号

第 5 步，TCP 三次握手建立连接

http 请求加上 TCP 头部，向下进行传输，（包括源端口号，目的程序端口号，用于校验数据完整性的序号）

第 6 步，网络层在数据包上加上 IP 头部，继续向下传输到底层，包括源 IP 地址和目标 IP 地址

第 7 步，物理层传输

第 8 步，目的服务器主机

  • 网络层：解析出 IP 头部，识别出数据部分
  • 传输层获取到数据包，解析出 TCP 头部，识别端口

第 9 步，应用层 HTTP 解析请求和请求头

  • 重定向：直接返回相应数据的状态 code，301 或者 302，并在请求头的 Location 字段中附上重定向的地址。
  • 不是重定向：
    • Cache-Control，想要浏览器的缓存数据
    • If-None-Match，没有更新，就返回 304，否则返回新数据，200 的状态码

第 10 步，传输完成，TCP 四次挥手

第 11 步，网络进程（数据包解析）

Content-Type

  • text/html 类型，通知浏览器获取到文档，准备渲染（1.发出“提交文档”消息）
  • 字节流类型，下载管理器，该导航流程结束，不在进行

第 12 步，渲染进程

发出提交文档消息，确认提交给浏览器进程，网络进程建立传输数据的管道（2.建立同网络进程的管道）（3.确认并且提交给浏览器）

第 13 步，浏览器更新界面状态

web 页面是空页面

  • 安全状态
  • 地址栏的URL
  • 前进后退的历史状态

第 14 步，渲染进程，页面解析和子资源加载

  • render tree 渲染树
    • 并行渲染 DOM 树 HTML 解析器
    • 并行渲染 CSS 树 CSS 规则和 CSS 解释器
  • layout 宽高，颜色，位置

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

  • 用户输入 URL 并回车；

  • 浏览器进程检查 URL，组装协议，构成完整 URL；

  • 浏览器进程通过进程通信（IPC）把 URL 请求发送给网络进程；

  • 网络进程接收到 URL 请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程；

  • 如果没有，网络进程向 web 服务器发起 http 请求（网络请求），请求流程如下：

  • 进行 DNS 解析，获取服务器 IP 地址，端口

  • 利用 IP 地址和服务器建立 tcp 连接构建请求头信息

  • 发送请求头信息

  • 服务器响应后，网络进程接收响应头和响应信息，并解析响应内容

  • 网络进程解析响应流程：

  • 检查状态码，如果是 301/302，则需要重定向，从 Location 自动读取地址，重新进行第 4 步，如果是 200，则继续处理请求

  • 200 响应处理：检查响应类型 Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行后续渲染。如果是 html 则通知浏览器进程准备渲染进程进行渲染

  • 准备渲染进程：

  • 浏览器进程检查当前 URL 是否和之前打开的渲染进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的渲染进程

  • 传输数据、更新状态:

  • 渲染进程准备好后，浏览器向渲染进程发起“提交文档”的消息，渲染进程接收到消息和网络进程建立传输数据的“管道”

  • 渲染进程接收完数据后，向浏览器发送“确认提交”

  • 浏览器进程接收到确认消息后 engine 浏览器界面状态：安全、地址 URL、前进后退的历史状态、更新 web 页面

粘包​

粘包出现原因：TCP 粘包是指发送方发送的若干包数据到接收方接收时粘成一包，从接收缓冲区看，后一包数据的头紧接着前一包数据的尾。在流传输中出现。

UDP 不会出现粘包，因为它有消息边界

粘包情况有两种，一种是粘在一起的包都是完整的数据包，另一种情况是粘在一起的包有不完整的包。

为了避免粘包现象，可采取以下几种措施：

  • 对于发送方引起的粘包现象，用户可通过编程设置来避免，TCP 提供了强制数据立即传送的操作指令 push，TCP 软件收到该操作指令后，就立即将本段数据发送出去，而不必等待发送缓冲区满；
  • 对于接收方引起的粘包，则可通过优化程序设计、精简接收进程工作量、提高接收进程优先级等措施，使其及时接收数据，从而尽量避免出现粘包现象；
  • 由接收方控制，将一包数据按结构字段，人为控制分多次接收，然后合并，通过这种手段来避免粘包。分包多发。

以上提到的三种措施，都有其不足之处。

  • 第一种编程设置方法虽然可以避免发送方引起的粘包，但它关闭了优化算法，降低了网络发送效率，影响应用程序的性能，一般不建议使用。
  • 第二种方法只能减少出现粘包的可能性，但并不能完全避免粘包，当发送频率较高时，或由于网络突发可能使某个时间段数据包到达接收方较快，接收方还是有可能来不及接收，从而导致粘包。
  • 第三种方法虽然避免了粘包，但应用程序的效率较低，对实时应用的场合不适合。

一种比较周全的对策是：接收方创建一预处理线程，对接收到的数据包进行预处理，将粘连的包分开。实验证明这种方法是高效可行的。

参考文章​

作者链接
Gabyhttps://juejin.cn/post/7016593221815910408