浏览器网络

网络模型

五层网络模型包括：

1. 应用层：面向网页、邮件、文件等场景，常见协议有 HTTP、FTP、SMTP、DNS、POP3。
2. 传输层：通过 TCP 或 UDP 选择可靠连接或无连接传输方式。
3. 网络层：通过 IP 和路由解决目标定位与路径选择。
4. 数据链路层：使用 MAC 地址和交换机在子网中传输数据。
5. 物理层：通过双绞线、光纤等介质在二进制数据和物理信号之间转换。

四层模型将数据链路层和物理层合并为物理链路层。七层模型依次为应用层、表示层、会话层、传输层、网络层、数据链路层和物理层。

Cookie

Cookie 由键、值、Domain、Path、Secure 和过期时间等信息组成。服务器可以通过 Set-Cookie 响应头下发，浏览器端 JavaScript 也可以添加。没有设置 Expires 或 Max-Age 时，Cookie 通常在会话结束后过期。

发送请求时，浏览器会检查 Cookie 是否过期，并核对 Domain、Path 和 Secure 条件。符合条件的键值对会拼接到请求头的 Cookie 字段中。

同源策略与 CORS

同源要求协议、主机和端口相同。浏览器对 CSS、JavaScript 等资源加载相对宽松，对 AJAX 跨源访问限制更严格。原笔记列出的解决方式有代理、JSONP 和 CORS。

CORS 的简单请求通常使用 GET、POST 或 HEAD，并只包含安全请求头。浏览器会自动添加 Origin，服务器通过 Access-Control-Allow-Origin 表明是否允许。

不满足简单请求条件时，浏览器先发送 OPTIONS 预检，请求头包含 Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers。服务器用对应的 Access-Control-Allow-* 响应头确认允许的方法和请求头，并可通过 Access-Control-Max-Age 缓存预检结果；通过后才发送真实请求。

输入 URL 后的过程

1. 浏览器补全协议和端口，并对 URL 进行编码。
2. 浏览器检查本地缓存，判断强缓存或协商缓存是否可用。
3. 通过 DNS 解析服务器 IP。
4. 建立 TCP 连接；HTTPS 还需要 SSL/TLS 握手。
5. 浏览器判断应携带的 Cookie，补全请求头并发送请求。
6. 服务器处理请求并返回 HTTP 响应。
7. 浏览器根据协议版本和 Connection 判断是否保留 TCP 连接，不保留时进行四次挥手。
8. 浏览器根据状态码、Content-Type 和其他响应头处理响应，并更新缓存或 Cookie。
9. 对 HTML 从上到下解析，遇到外部 JavaScript、CSS 等资源时继续请求。
10. 构建 DOM 树和 CSSOM 树，合成渲染树，计算布局并交给 GPU 绘制。
11. DOM 构建完成后触发 DOMContentLoaded，全部资源加载完成后触发 load。

原笔记将 URL 编码写成“转为 Base64”，该表述与前后内容不一致，因此整理时只保留为 URL 编码，没有延伸结论。

DNS 解析

原笔记记录的查询顺序是：浏览器缓存、系统缓存、Hosts 文件、本地 DNS 服务器；未命中时继续向根域名服务器、顶级域名服务器和权威域名服务器查询。