浏览器和网络复习

Bottle414
127 阅读6分钟

TCP 与 UDP 区别

TCP：可靠、面向连接、面向字节流、点对点、流量控制、拥塞控制（慢启动、拥塞避免、快重传和快恢复），适合对可靠性要求高的场景，如文件传输 UDP：不可靠、无连接、面向报文、支持广播多播，适合对实时性要求高的场景，如在线游戏

TCP 握手挥手

三次握手

  • 客户端向服务端发送建立连接请求，客户端进入 SYN-SEND 状态
  • 服务端收到建立连接请求后，向客户端发送一个应答，服务端进入 SYN-RECEIVED 状态
  • 客户端接收到应答后，向服务端发送确认接收到应答，客户端进入 ESTABLISHED 状态

为什么是三次？

  1. 确认双方收发能力：
    • 第一次：客户端确认自己能发。
    • 第二次：服务端确认自己能收能发。
    • 第三次：客户端确认自己能收。
  2. 避免历史报文干扰：三次握手能识别并丢弃延迟的旧 SYN 请求。
  3. 保证双方状态一致：都进入 ESTABLISHED，不会出现“单方面已建立”的情况。

四次挥手

  1. 客户端向服务端发送断开连接请求，表示不再发送数据了, 但仍然可以接收数据，进入半关闭状态。
  2. 服务器收到断开请求后，回复表示收到请求了。此时服务器可能还有数据要传输，所以不会立刻关闭连接。
  3. 服务器数据发送完毕后，再告诉客户端可以断开连接，表示也不发数据了
  4. 客户端收到后，等待一会儿（TIME_WAIT，默认 2MSL, MSL是TCP报文最大生存时间, 大于等于TTL变为0的时间, TTL是经过的跳数）然后连接断开。客户端要等待 TIME_WAIT 是为了防止服务器没收到最后一个 ACK，导致连接一直卡住。

HTTP

HTTP/1.0

  • 连接：默认 短连接，每次请求都要建立一个新的 TCP 连接，开销大。
  • 缓存：只支持简单的 Expires 和 last-modified \ if-modified-since。
  • 请求/响应：只能传输文本，且每次只能请求一个资源。
  • 头部冗余：每次请求都会带完整的 Header（如 Cookie），即使数据没变。

HTTP/1.1

  • 连接复用（Keep-Alive） ：默认开启长连接，一个 TCP 连接可以发送多个请求。
  • 流水线（Pipelining，实验性的） ：允许在一个连接里连续发多个请求，但 响应必须按顺序返回 → 会产生 队头阻塞（Head-of-Line Blocking） ，所以后来几乎没人用。
  • 缓存：增加了更丰富的缓存控制，如 Cache-Control、ETag。
  • 分块传输（Chunked Transfer Encoding） ：支持边生成边发送，不需要提前计算内容长度。
  • 带宽优化：增加 Range 头，支持断点续传、部分请求。

HTTP/2.0

是一次大改造，核心目标是解决 性能瓶颈：

  • 二进制分帧（Binary Framing） ：不再是纯文本协议，所有传输都分为帧（头 + 数据，frame），更高效。
  • 多路复用（Multiplexing） ：一个 TCP 连接中可以并行发送多个请求/响应，且互不阻塞，因为每个数据流都有编号，彻底解决了 HTTP/1.1 的队头阻塞。
  • 头部压缩（HPACK） ：使用静态/动态表 + Huffman 编码，大幅减少头部体积。
  • 服务器推送（Server Push） ：服务器可以主动推送资源。

HTTP/3.0

也是一次大改造，把 TCP 踢走了，解决了队头阻塞问题

  • 底层协议：以 UDP 为基础的 QUIC 协议
  • 内建加密（TSL1.3）：使得建立连接的 RTT 减少
  • 头部压缩：QPACK
  • 连接迁移：基于 TCP 的连接由 IP 地址和端口号标识。而 QUIC 使用一个唯一的连接 ID，使得在网络切换时连接得以保持。

总结

  • HTTP/1.0：短连接，请求一次建一次连接，效率低。
  • HTTP/1.1：默认长连接，引入缓存控制、分块传输、断点续传，但仍然有队头阻塞。
  • HTTP/2.0：二进制分帧 + 多路复用，彻底解决队头阻塞，头部压缩 + Server Push，性能显著提升。
  • HTTP/3.0：从 “基于TCP” 到 “基于QUIC/UDP”，解决队头阻塞，并进一步提升连接速度和移动体验。

HTTPS

HTTPS 详解一：附带最精美详尽的 HTTPS 原理图 - 个人文章 - SegmentFault 思否

输入 URL 发生什么

  • 域名解析（协议、域名、资源路径……）
  • DNS 解析（查浏览器缓存 → 查操作系统缓存 → 递归查询）
  • TCP 连接（三次握手）
  • TLS 握手（如果是 HTTPS）
  • 发送 HTTP 请求
  • 服务器处理 & 返回响应
  • 浏览器解析 HTML，并行构建 DOM / CSSOM，再合成渲染树
  • 重排、重绘
  • 执行 JS（可能会阻塞渲染），开始事件循环

javascript - 掌握浏览器重绘(repaint)重排(reflow))-前端进阶 - OBKoro1前端分享 - SegmentFault 思否

✊构建浏览器工作原理知识体系（浏览器内核篇）为什么你觉得偶尔看浏览器的工作原理，但总是忘呢😵‍💫，因为你没有形成一个 - 掘金

浏览器缓存

彻底理解浏览器的缓存机制浏览器的缓存机制也就是我们说的HTTP缓存机制，其机制是根据HTTP报文的缓存标识进行的，所以在 - 掘金

垃圾回收

「硬核JS」你真的了解垃圾回收机制吗JavaScript 是门魅力无限的语言，关于它的 GC（垃圾回收）方面，你了解多少 - 掘金

事件循环

同步任务执行完后，先执行一个宏任务，再执行一队微任务。宏任务有多个队列，微任务只有一个。如此循环。

常见宏任务：I/O、setTimeout、setInterval、UI渲染

常见微任务：promise.then、MutationObserver

localStorage、sessionStorage、cookie

比较项localStoragesessionStoragecookie
生命周期持久化存储，除非手动清除页签关闭可设置过期时间，默认在浏览器关闭时失效
大小5MB5MB4KB
共享同源的所有页面仅当前页签同源的所有页面
存储位置客户端客户端塞 HTTP 头里
场景长期有效的数据，例如用户偏好设置、主题选择临时数据，例如表单填写的中间状态适合与服务器交互的少量数据，如登录状态

POST 与 GET 区别

  • 数据量：POST 多，GET 少
  • 信息载体：POST 塞 body 里，GET 塞 URL 里
  • GET 没有请求体
  • POST 是非幂等提交，一般指向资源集合，用于创建新资源（PUT 幂等，一般指向具体资源，用于更新资源），GET 是拿

OPTIONS 请求方法

一般用于向服务器确认某个 URL 允许的方法，或者获取服务器支持的方法；也可以用在 CORS 预检请求头（当浏览器发现跨域请求不安全时（比如 POST 携带自定义头），会先自动发送 OPTIONS 请求给目标服务器）。

特点：

  • 可能有请求体（一般没用），可能有响应体
  • 幂等，安全，不能缓存
  • 不能用在 HTML 表单

有些请求比较安全，如 GET，没有请求体，就可以直接发；不然就使用预检请求向服务器询问后，再发送真正的请求。 会发起预检的情况：

  • 使用了 非简单方法（比如 PUT、DELETE、PATCH）。
  • 请求里有 自定义头部（比如 X-Token、Authorization）。
  • Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data、text/plain 之一（比如 application/json）。
avatar
文章
阅读
粉丝