HTTP 客户端能力阶梯：同一响应，不同终点

HTTP 客户端能力阶梯：同一响应，不同终点 由 Archify 生成的时序图。 GET /page.html HTML 字节流 到此为止：存下来或打印，不解析 GET /page.html HTML 字节流 解析为数据结构、建索引；不渲染 GET /page.html HTML 字节流 执行 JS 并渲染，但画面只留在内存 GET /page.html HTML 字节流 执行 JS，渲染输出到屏幕 / 扬声器 GET /app.js /style.css … 解析 HTML 发现引用，自动再请求 JS / CSS 字节流 同一段对话：HTTP 交互完全相同 差别在收到之后 Web 服务器 · 返回同一份 HTML · 时序参与者 Web 服务器 返回同一份 HTML 命令行客户端 · curl · 时序参与者 命令行客户端 curl 爬虫 / 搜索引擎 · spider · 时序参与者 爬虫 / 搜索引擎 spider 无头浏览器 · headless · 时序参与者 无头浏览器 headless 浏览器 · chrome / firefox · 时序参与者 浏览器 chrome / firefox 图例 请求 返回 默认消息

同一段对话

  • • 四种客户端与服务器说同一种协议：HTTP
  • • 服务器返回同一份 HTML 字节流，不区分对方是谁
  • • 差别不在交互，而在收到响应之后走多远

能力阶梯

  • • 命令行客户端：字节流存下来，到此为止
  • • 爬虫 / 搜索引擎：解析、建索引，不渲染
  • • 无头浏览器：执行 JS，画面只留在内存
  • • 浏览器：渲染并输出到屏幕与扬声器

为什么叫前端

  • • html / css / js 只在阶梯顶端被执行
  • • 前端技术 = 只有浏览器才执行的技术
  • • 同一份 HTML，人、爬虫、屏幕阅读器看到的是三个东西