前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
  • HTTP

    • 基础篇

      • HTTP的前世今生
      • HTTP是什么
      • HTTP世界全览
      • HTTP分层
      • 键入网址到回车发生什么
      • HTTP报文是什么样子的
      • 理解请求方法
      • URI
      • 响应状态码
      • HTTP有哪些特点
      • HTTP优缺点
      • HTTP的实体数据
      • HTTP传输大文件
      • HTTP的连接管理
      • HTTP的重定向
      • HTTP的Cookie机制
      • HTTP的缓存控制
      • HTTP的代理服务
      • HTTP的缓存代理
    • 高级篇

    • 扩展篇

  • 浏览器相关

  • 计算机基础

# HTTP世界全览

30 秒速记

  • 两个角色:请求方 User Agent(浏览器、爬虫、curl)和应答方(Nginx、Apache、Node 服务)
  • 先找到人:DNS 把域名解析成 IP,URI 用「协议 + 主机 + 路径」标明要哪个资源
  • 再靠下层运:HTTP 通常跑在 TCP/IP 上,HTTPS = HTTP + TLS + TCP/IP
  • 中间人:CDN 做边缘缓存,代理做转发、负载均衡,也是 502 / 504 最常见的来源
  • 排查按链路顺序走:解析 → 连接 → TLS → 代理 / CDN → 源站

一次 HTTP 访问其实是一条链路:浏览器通过 DNS 找到地址,经过 CDN、代理这些中转站,最后到源站拿资源。 浏览器、爬虫都叫 User Agent,是发请求的一方;Nginx 这类服务器是应答的一方。中间的 CDN 和代理能缓存、能分流,但也多了出错的环节,线上很多 502、504 其实是代理和源站之间的问题。HTTPS 也没换掉 HTTP,只是在它下面垫了一层 TLS 来加密和验身份。所以排查问题我会顺着这条链路一段一段往下看。

  • 互联网上绝大部分资源都使用 HTTP 协议传输;
  • 浏览器是 HTTP 协议里的请求方,即 User Agent;
  • 服务器是 HTTP 协议里的应答方,常用的有 Apache 和 Nginx;
  • CDN 位于浏览器和服务器之间,主要起到缓存加速的作用;
  • 爬虫是另一类 User Agent,是自动访问网络资源的程序。

  • TCP/IP 是网络世界最常用的协议,HTTP 通常运行在 TCP/IP 提供的可靠传输基础上
  • DNS 域名是 IP 地址的等价替代,需要用域名解析实现到 IP 地址的映射;
  • URI 是用来标记互联网上资源的一个名字,由“协议名 + 主机名 + 路径”构成,俗称 URL;
  • HTTPS 相当于“HTTP+SSL/TLS+TCP/IP”,为 HTTP 套了一个安全的外壳;
  • 代理是 HTTP 传输过程中的“中转站”,可以实现缓存加速、负载均衡等功能

原理拆解: 用户输入地址后,客户端先解析 URI,再通过 DNS 获得可连接的地址;建立传输连接后发送 HTTP 请求,目标节点依据方法、路径和首部返回状态行、响应首部及可选消息体。若链路经过代理或 CDN,请求可能在边缘缓存处结束,也可能继续回源。使用 HTTPS 时,传输应用数据前还要完成 TLS 协商,用证书验证服务端身份,并为后续字节流提供机密性与完整性保护。

最小验证: 输入为访问 https://www.example.com/news?id=7,以下报文要验证 HTTP 只处理请求应答语义:域名解析、连接建立和加密协商发生在发送该报文之前。

GET /news?id=7 HTTP/1.1
Host: www.example.com
Accept: text/html
Connection: close

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 31
Cache-Control: public, max-age=60

<p>resource id: 7 is ready</p>
@前端进阶之旅: 代码已经复制到剪贴板

请求行只携带路径与查询,主机由 Host 指明;响应的 200 表示处理成功,Content-Type 描述消息体,缓存字段允许共享缓存短期复用。预期抓包时能看到这些语义字段;在 HTTPS 链路上,未持有会话密钥的中间观察者只能看到加密后的应用数据。若 DNS 失败或连接被拒绝,则根本不会产生这份 HTTP 响应。

边界与排查: CDN 命中能减少回源距离和源站压力,但缓存键配置错误可能把不同查询、语言或身份的响应混用;反向代理可做负载分配,却也可能因超时、首部转发或健康检查配置产生 502、504。定位问题时应按层检查:域名是否解析、目标端口能否连接、TLS 证书与主机名是否匹配、请求是否到达代理、代理是否命中缓存、源站最终返回什么。这样可避免把连接故障误判为应用接口错误。

面试官追问

追问 1用域名访问失败,直接用 IP 能打开,先查什么?
参考回答

先查 DNS:dig example.com 或 nslookup 看解析结果对不对,是不是还指向老机器。不过直连 IP 能打开也不能百分百定案,证书和虚拟主机都依赖域名,最好用 curl --resolve example.com:443:1.2.3.4 https://example.com 带着正确域名测。

追问 2线上偶发 502,前端、运维、后端互相甩锅,怎么切?
参考回答

502 是网关说「我连上游失败或者上游回了垃圾」,基本可以排除前端。看代理的 error.log:connect() failed 是源站进程挂了或端口不对,upstream prematurely closed 是源站中途断开;504 则是源站处理太慢超时。

追问 3活动页接 CDN 之后,有用户看到了别人的昵称,可能是什么原因?
参考回答

典型的缓存键没区分身份。个性化接口被 CDN 当成静态资源缓存了,第一个用户的响应被发给后面所有人。带用户信息的响应要返回 Cache-Control: private 或 no-store,CDN 只缓存真正公共的内容。

追问 4爬虫不是浏览器,算不算 HTTP 的请求方?
参考回答

算,它也是 User Agent,只是没有界面、自动发请求。服务端很多策略就是靠 User-Agent 头区分它的,比如 SEO 预渲染、限流,所以爬虫一样要遵守 robots.txt 和服务器的速率限制。

基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
  • HTTP

    • 基础篇

      • HTTP的前世今生
      • HTTP是什么
      • HTTP世界全览
      • HTTP分层
      • 键入网址到回车发生什么
      • HTTP报文是什么样子的
      • 理解请求方法
      • URI
      • 响应状态码
      • HTTP有哪些特点
      • HTTP优缺点
      • HTTP的实体数据
      • HTTP传输大文件
      • HTTP的连接管理
      • HTTP的重定向
      • HTTP的Cookie机制
      • HTTP的缓存控制
      • HTTP的代理服务
      • HTTP的缓存代理
    • 高级篇

    • 扩展篇

  • 浏览器相关

  • 计算机基础

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

HTTP世界全览|HTTP协议篇

# HTTP世界全览

30 秒速记

  • 两个角色:请求方 User Agent(浏览器、爬虫、curl)和应答方(Nginx、Apache、Node 服务)
  • 先找到人:DNS 把域名解析成 IP,URI 用「协议 + 主机 + 路径」标明要哪个资源
  • 再靠下层运:HTTP 通常跑在 TCP/IP 上,HTTPS = HTTP + TLS + TCP/IP
  • 中间人:CDN 做边缘缓存,代理做转发、负载均衡,也是 502 / 504 最常见的来源
  • 排查按链路顺序走:解析 → 连接 → TLS → 代理 / CDN → 源站

一次 HTTP 访问其实是一条链路:浏览器通过 DNS 找到地址,经过 CDN、代理这些中转站,最后到源站拿资源。 浏览器、爬虫都叫 User Agent,是发请求的一方;Nginx 这类服务器是应答的一方。中间的 CDN 和代理能缓存、能分流,但也多了出错的环节,线上很多 502、504 其实是代理和源站之间的问题。HTTPS 也没换掉 HTTP,只是在它下面垫了一层 TLS 来加密和验身份。所以排查问题我会顺着这条链路一段一段往下看。

  • 互联网上绝大部分资源都使用 HTTP 协议传输;
  • 浏览器是 HTTP 协议里的请求方,即 User Agent;
  • 服务器是 HTTP 协议里的应答方,常用的有 Apache 和 Nginx;
  • CDN 位于浏览器和服务器之间,主要起到缓存加速的作用;
  • 爬虫是另一类 User Agent,是自动访问网络资源的程序。

  • TCP/IP 是网络世界最常用的协议,HTTP 通常运行在 TCP/IP 提供的可靠传输基础上
  • DNS 域名是 IP 地址的等价替代,需要用域名解析实现到 IP 地址的映射;
  • URI 是用来标记互联网上资源的一个名字,由“协议名 + 主机名 + 路径”构成,俗称 URL;
  • HTTPS 相当于“HTTP+SSL/TLS+TCP/IP”,为 HTTP 套了一个安全的外壳;
  • 代理是 HTTP 传输过程中的“中转站”,可以实现缓存加速、负载均衡等功能

原理拆解: 用户输入地址后,客户端先解析 URI,再通过 DNS 获得可连接的地址;建立传输连接后发送 HTTP 请求,目标节点依据方法、路径和首部返回状态行、响应首部及可选消息体。若链路经过代理或 CDN,请求可能在边缘缓存处结束,也可能继续回源。使用 HTTPS 时,传输应用数据前还要完成 TLS 协商,用证书验证服务端身份,并为后续字节流提供机密性与完整性保护。

最小验证: 输入为访问 https://www.example.com/news?id=7,以下报文要验证 HTTP 只处理请求应答语义:域名解析、连接建立和加密协商发生在发送该报文之前。

GET /news?id=7 HTTP/1.1
Host: www.example.com
Accept: text/html
Connection: close

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 31
Cache-Control: public, max-age=60

<p>resource id: 7 is ready</p>
@前端进阶之旅: 代码已经复制到剪贴板

请求行只携带路径与查询,主机由 Host 指明;响应的 200 表示处理成功,Content-Type 描述消息体,缓存字段允许共享缓存短期复用。预期抓包时能看到这些语义字段;在 HTTPS 链路上,未持有会话密钥的中间观察者只能看到加密后的应用数据。若 DNS 失败或连接被拒绝,则根本不会产生这份 HTTP 响应。

边界与排查: CDN 命中能减少回源距离和源站压力,但缓存键配置错误可能把不同查询、语言或身份的响应混用;反向代理可做负载分配,却也可能因超时、首部转发或健康检查配置产生 502、504。定位问题时应按层检查:域名是否解析、目标端口能否连接、TLS 证书与主机名是否匹配、请求是否到达代理、代理是否命中缓存、源站最终返回什么。这样可避免把连接故障误判为应用接口错误。

面试官追问

追问 1用域名访问失败,直接用 IP 能打开,先查什么?
参考回答

先查 DNS:dig example.com 或 nslookup 看解析结果对不对,是不是还指向老机器。不过直连 IP 能打开也不能百分百定案,证书和虚拟主机都依赖域名,最好用 curl --resolve example.com:443:1.2.3.4 https://example.com 带着正确域名测。

追问 2线上偶发 502,前端、运维、后端互相甩锅,怎么切?
参考回答

502 是网关说「我连上游失败或者上游回了垃圾」,基本可以排除前端。看代理的 error.log:connect() failed 是源站进程挂了或端口不对,upstream prematurely closed 是源站中途断开;504 则是源站处理太慢超时。

追问 3活动页接 CDN 之后,有用户看到了别人的昵称,可能是什么原因?
参考回答

典型的缓存键没区分身份。个性化接口被 CDN 当成静态资源缓存了,第一个用户的响应被发给后面所有人。带用户信息的响应要返回 Cache-Control: private 或 no-store,CDN 只缓存真正公共的内容。

追问 4爬虫不是浏览器,算不算 HTTP 的请求方?
参考回答

算,它也是 User Agent,只是没有界面、自动发请求。服务端很多策略就是靠 User-Agent 头区分它的,比如 SEO 预渲染、限流,所以爬虫一样要遵守 robots.txt 和服务器的速率限制。

← HTTP是什么HTTP分层 →

fe