JS 全栈 计算机网络知识

更新: 6/14/2026 字数: 0 字 时长: 0 分钟

1. HTTP 状态码：先看数字归哪一类，排障能少走一半弯路

接口报错时第一眼看状态码就能定位责任方。2xx 成功，3xx 重定向（301 永久、302 临时、304 命中协商缓存），4xx 是请求方的锅（401 没登录、403 没权限、404 路径错、429 被限流），5xx 是服务端挂了（500 代码抛异常、502 网关拿不到上游响应、504 上游超时）。前端遇到 502/504 别急着改代码，多半是 Node 服务没起来或响应太慢；遇到 401 先查 token 有没有带上。

2. CORS 跨域与预检请求：OPTIONS 不是多余的一次请求

浏览器同源策略限制跨域读取响应。前端调后端接口报 CORS 错误，本质是后端响应头没带 Access-Control-Allow-Origin。带自定义头、用 PUT/DELETE、Content-Type 为 application/json 时，浏览器会先发一个 OPTIONS 预检，后端必须正确响应 Allow-Methods、Allow-Headers 才放行真正的请求。要带 Cookie 跨域时，前端设 credentials: 'include'，后端 Allow-Origin 不能写 *，得回显具体域名，还要加 Allow-Credentials: true。这一段配置错了，控制台报错但 Network 里看不到响应体，很容易误判成接口挂了。

3. TCP 三次握手与连接复用：Keep-Alive 省下的是真实延迟

每个 HTTP 请求底层都要先建 TCP 连接，三次握手就有一个往返的开销，HTTPS 还要再叠 TLS 握手。Connection: keep-alive 让同一条连接复用给多个请求，省掉反复握手。Node 里用 http.Agent({ keepAlive: true }) 给下游服务发请求，高并发下能明显降低延迟和文件描述符消耗——很多人调用第三方 API 慢，就是因为每次都新建连接。前端这边表现为：首屏多个请求排队等连接，开了 Keep-Alive 和 HTTP/2 后瀑布图会明显紧凑。

4. HTTPS / TLS 握手与证书链：证书报错先看是哪一环断了

HTTPS 在 TCP 之上做 TLS 握手：协商加密套件、验证服务器证书、交换密钥，之后通信全程加密。浏览器验证证书要看证书链——服务器证书由中间 CA 签发，中间 CA 由根 CA 签发，根 CA 在系统信任库里。证书报错常见三类：过期、域名不匹配、链不完整（服务器没把中间证书一起发）。本地开发用 localhost 自签或 mkcert 时手机不信任，是因为根 CA 没装进手机。Node 服务端配 HTTPS 要把证书和中间证书拼在一起发，否则部分客户端会报链不完整。

5. DNS 解析：域名连不上时它常是隐藏的第一现场

浏览器拿到域名要先解析成 IP，顺序是本地 hosts → 浏览器 / 系统缓存 → 递归 DNS（运营商或 8.8.8.8） → 根 / 顶级 / 权威域名服务器。前端调试时改 hosts 把域名指到本地或测试机，是绕开线上的常用手段。线上偶发"域名解析失败"或首次请求特别慢，往往是 DNS 在作怪。Node 里 dns.lookup 默认走 libuv 线程池且可能阻塞，高并发拉第三方域名时建议配 DNS 缓存或换 dns.resolve。切环境前先 ping / nslookup 确认域名解析到的 IP 对不对，能排掉一大类"接口连不上"。

6. HTTP 缓存：分清强缓存和协商缓存，才知道为什么改了不生效

强缓存（Cache-Control: max-age / Expires）在有效期内浏览器直接读本地，连请求都不发，Network 里显示 from disk cache。协商缓存（ETag / Last-Modified）会发请求带 If-None-Match / If-Modified-Since 问服务器变没变，没变返回 304 不传响应体。打包产物用 hash 文件名配长 max-age 永久强缓存，HTML 入口用 no-cache 走协商缓存——这套组合既快又能及时更新。"改了代码线上没变"九成是强缓存还没过期或 CDN 没刷新；Node 静态服务记得给资源带上正确的缓存头。

7. HTTP/1.1、HTTP/2、HTTP/3：搞懂队头阻塞才知道升级有没有用

HTTP/1.1 一条连接同一时间只能处理一个请求，浏览器靠开 6 条并发连接硬扛，请求多了就排队（队头阻塞）。HTTP/2 在一条连接上多路复用，多个请求并行收发，还能头部压缩、服务端推送，首屏小文件多的站点提升明显。但 HTTP/2 底层还是 TCP，一旦丢包整条连接都卡（TCP 层队头阻塞）。HTTP/3 换成基于 UDP 的 QUIC，把丢包影响限制在单个流，弱网下更稳。实务上：上了 HTTP/2 就别再做雪碧图、域名分片这些 HTTP/1.1 时代的优化，反而会拖后腿。

8. 实时通信：轮询、SSE、WebSocket 按场景选，别一上来就 WebSocket

服务器要主动推数据给前端，有三条路。短轮询是前端定时问，简单但延迟高、浪费请求；长轮询服务端 hold 住请求有数据再返回，省一点但仍有开销。SSE（EventSocket / text/event-stream）是服务器单向持续推、自动重连、走普通 HTTP，做消息通知、AI 流式输出很合适，Node 里实现就是设好响应头不断 write。WebSocket 是全双工长连接，双向实时，适合聊天、协同编辑、实时游戏。选型就一句话：只需服务器单向推用 SSE，要双向高频互动才上 WebSocket。

9. Cookie、Token 与 SameSite：跨站带不带 Cookie 决定登录态能不能跨域用

Cookie 由服务器 Set-Cookie 下发、浏览器自动随请求带上，三个属性最关键：HttpOnly 让 JS 读不到，防 XSS 偷 token；Secure 只在 HTTPS 下发送；SameSite 控制跨站是否携带——Strict 完全不带，Lax（现代浏览器默认）只在顶级导航带，None 任意跨站都带但必须配 Secure。前后端分离部署在不同域名时登录态丢失，几乎都是 SameSite 没设成 None; Secure。如果改用 Token 放 Authorization 头，就绕开了 Cookie 的跨站限制，但要自己防 XSS 别把 token 存进容易被读取的地方。

10. DevTools Network 面板：看懂瀑布图和 TTFB 才能对症调优

排接口和性能问题，Network 面板是第一工具。每个请求的 Timing 分段要会看：Queueing / Stalled 排队太久说明连接数撑满或被优先级压着；DNS、Initial connection、SSL 是建连开销；TTFB（Time To First Byte）长代表服务器处理慢，该去查 Node 后端而非前端；Content Download 长是响应体太大或带宽不够。瀑布图里请求一级一级往后错开，是典型的串行依赖，可以并行化或预加载。配合 Disable cache、按类型筛选、看 Size 列区分 from cache 和真实下载，基本能定位大部分慢和错。