浏览器、网络与 API

输入网址后发生什么#

1. 浏览器解析 URL；
2. DNS 把域名查询成服务器 IP；
3. 建立网络连接和 TLS 加密连接；
4. 发送 HTTP 请求；
5. 服务器返回 HTML；
6. 浏览器继续发现并下载 CSS、JavaScript、图片；
7. 解析 HTML 为 DOM，解析 CSS 为样式规则；
8. 计算布局、绘制页面；
9. JavaScript 注册事件或继续请求 API。

开始时不必背网络分层，但要知道问题可能发生在 DNS、证书、服务器、接口、代码或浏览器策略的不同位置。

URL#

https://example.com:443/api/tasks?page=2#today
└协议   └域名        └端口 └路径      └查询   └片段

片段通常只在浏览器内定位页面；查询参数会发送给服务器。URL 中不要放密码、Token 等秘密，因为它可能出现在历史和日志里。

请求与响应#

请求包含方法、路径、请求头和可选请求体；响应包含状态码、响应头和响应体。

用 fetch 调用 API#

async function createTask(title) {
  const response = await fetch("/api/tasks", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title })
  });

  const data = await response.json();
  if (!response.ok) {
    throw new Error(data.message || "创建失败");
  }
  return data;
}

不要假设所有响应都有 JSON；204 响应通常没有响应体。生产代码还要考虑超时、取消和重复提交。

浏览器开发者工具#

• Elements：检查真实 DOM 和最终 CSS；
• Console：看 JavaScript 错误和临时运行代码；
• Network：看请求 URL、方法、状态码、耗时和响应；
• Application：看 Cookie、存储和缓存；
• Lighthouse/Accessibility：发现一部分性能和无障碍问题。

排错先看第一个错误，不要被后续连锁错误淹没。

同源与 CORS#

协议、域名、端口共同决定“源”。浏览器会限制页面读取其他源的响应；服务器可用 CORS 响应头明确允许哪些来源。CORS 是浏览器规则，不是登录或防火墙。

Cookie、Session 与 Token#

• Cookie 是浏览器随请求携带的小段数据；
• Session 通常把登录状态主要保存在服务器；
• Token 是能代表身份或授权信息的凭据。

哪种方案都需要 HTTPS、有效期、撤销策略和服务端授权。不要把“能登录”误认为“不会越权”。

缓存#

浏览器缓存能减少重复下载，但也会导致“代码明明改了，页面还是旧的”。先在 Network 面板确认资源是否来自缓存，生产环境用内容哈希管理静态文件版本。

动手练习#

打开任意公开网站的开发者工具，记录首个 HTML 请求和一个图片/API 请求：URL、方法、状态码、内容类型、大小、耗时、是否缓存。再为自己的任务清单模拟 200、400、404、500 四种界面状态。

完成标准#

• 能拆解一个 URL。
• 能解释请求和响应的主要组成。
• 能用 Network 面板定位失败请求。
• 能解释 CORS 不等于认证。
• API 失败时界面提供可理解的反馈。