【前端也该懂】搞懂 TCP：让你的接口更稳、页面更快！

前言: 

作为前端开发,大家每天都在HTTP,HTTPS,WebSocket打交道,但你有没有想过,这些协议背后的"搬运工"是谁?答案就是——TCP(Transmission Control Proptocol)

如果你正在做性能优化,处理网络错误,搞WebSocket通信,了解TCP的底层机制能让你事半功倍

一、TCP是什么?

TCP是一种传输层协议,负责在网络中稳定,可靠地传输数据 

• 是HTTP,HTTPS,WebSocket等常见协议的底层基础 
• 是面向连接,可靠传输,按需到达的协议

打个比方: 
        HTTP是写在信立的内容,TCP是运送信件的顺丰快递,IP是写在信封上的地址 

二、TCP的特点: 为什么它"可靠"?

特性	说明
面向连接	通信之前必须建立连接(三次握手)
数据有序	每个数据包都有序号,保证先发的先到
丢包重传	丢了会重发,直到收到确认为止
流量控制	控制发送速率,防止对方接收不过来
拥塞控制	遇到网络拥堵自动江苏,避免整体瘫痪
全双工通信	双方可以同时发送和接收数据

三、三次握手 & 四次挥手: 连接和断开

1.三次握手(建立连接)

客户端: 我要连接你(SYN)

服务端: 好的我知道了,你来吧(SYN+ACK)

客户端: 确认连接(ACK)

完成后,双方可以开始传输数据

2.四次挥手(断开连接)

客户端: 我发完了,断开吧(FIN)

服务端: 收到,等我发完(ACK)

服务端: 我也发完了(FIN)

客户端:确认断开(ACK) 

四次挥手的原因是TCP支持双向通信,两边要分别关闭

四、前端为什么要懂TCP?

1.所有接口都基于TCP连接

HTTP/1.1 请求会复用TCP连接(Keep-alive),HTTP/2会在一个TCP上路多复用,HTTP/3干脆不用TCP而是用了QUIC(基于UDP+TLS)——这都和TCP有关 

2.性能优化依赖TCP理解

• DNS->TCP握手->TLS握手->请求->响应
  
  每一步都花时间,了解TCP握手才能分析页面加载慢在哪
• 滑动窗口,拥塞控制可能导致突发数据延迟 

3.WebSocket,SSE都基于TCP

• WebSocket是在TCP长连接上"升级"出来的协议
• 掌握TCP,才能更好地处理断线重连,心跳保活等机制

4.网络问题排查更清晰

• 连接失败?是握手失败还是TLS握手超时 
• 数据慢?是TCP拥塞还是窗口堵住了?
• 请求掉了?是TCP丢包还是服务器没响应?

五.TCP vs UPD: 传输界的"顺丰"和"飞鸽传输"

协议	是否连接	是否可靠	是否有顺序	是否重传	速度	应用场景
TCP	是	是	是	是	较慢	HTTP/WebSocket/FTP
UDP	否	否	否	否	快	视频直播/游戏/DNS

六. 小结

TCP是一个前端不写也离不开的"幕后英雄",它负责稳定,安全地把你请求的数据送到对方手里,也是我们处理各种网络问题,优化体验的重要知识点