先上张简单分析的图：
思维导图
1. DNS 域名解析
- 第一步，浏览器会检查缓存中有没有这个域名对应的解析过的 IP 地址，如果有，解析结束。
浏览器中的缓存有时间空间限制。 - 查找操作系统的缓存中是否有这个域名对应的 DNS 解析结果。
在 Windows 系统中通过 C:\Windows\System32\drivers\etc\hosts 文件可以将域名解析到任何能够访问的 IP 地址，浏览器会首先使用这个地址。Linux 中这个配置文件是 /etc/named.conf。
缓存时间同样受域名失效时间与缓存空间大小限制。 - 如果以上还没解析结束，操作系统会把域名发送到 LDNS ( Local DNS Server )，即本地区的域名服务器。
到这里已经可以解决 80% 的请求了。 - 如果 LDNS 还没有，直接到 Root Server 域名服务器请求解析。
- 根域名服务器返回给本地域名服务器一个所查询的主域名服务器( gTDL Server )地址。gTDL 是国际顶级域名服务器，如 .com、.cn 等。
- 本地域名服务器再向主域名服务器发送请求。
- 接受请求的主域名服务器查找并返回此域名对应的 Name Server 域名服务器地址，它是注册的域名服务器，如域名提供商的服务器。
- Name Server 域名服务器查询存储的域名与 IP 的映射关系表，得到 IP 与 TTL值（TTL 值是控制返回时间的）。
2.建立TCP连接
TCP三次握手
- 第一次握手：建立连接。客户端发送 SYN 包到服务器，Sequence Number 为 x，进入 SYN_SENT 状态，等待服务器确认。
- 第二次握手：服务器收到 SYN 包，对这个报文进行确认，设置 Acknowledgment Number 为 Sequence Number + 1；同时自己也要发送 SYN 包，Sequence Number 为 y；服务器将这些所有信息放入 SYN + ACK 包中发送给客户发，服务器进入 SYN_RCVD 状态。
- 第三次握手：客户端收到 SYN + ACK 包。将 Acknowledgment Number 设为 y + 1，即服务器发来的 Sequence Number + 1，并向服务器发送 ACK 包，发送完成后客户端和服务器都进入 ESTABLISHED 状态。
TCP三次握手与四次挥手
3. 发起 HTTP 请求
请求方法
下面只列举了 HTTP/1.1 支持的方法。
| 方法 | 说明 | 备注 |
|---|---|---|
| GET | 获取资源 | |
| POST | 传输实体主体 | |
| DELETE | 删除文件 | 不带验证机制，任何人都可以删除 |
| PUT | 传输文件 | 不带验证机制，任何人都可以上传，存在安全问题 |
| TRACE | 追踪路径 | 容易引发 XSL 跨站攻击 |
| HEAD | 获得报文首部 | |
| OPTIONS | 询问支持方法 | 查询针对请求 URI 指定的资源支持的方法，响应如 Allow: GET,POST,HEAD
|
| CONNECT | 要求用隧道协议连接代理 | 主要使用 SLL 和 TLS 协议把通信内容加密后经网络隧道传输 |
请求报文
请求报文
4. 接收响应结果
状态码
状态码的类别
| 类别 | 原因 | |
|---|---|---|
| 1XX | Informational | 请求的信息正在处理 |
| 2XX | Success | 请求正常处理完毕 |
| 3XX | Redirection | 需要进行附加操作以完成请求 |
| 4XX | Client Error | 服务器无法处理请求 |
| 5XX | Server Error | 服务器处理请求出错 |
具体状态
- 2XX
- 200 OK
表示从客户端发来的请求在服务器端被正常处理了 - 204 No Content
服务器接收的请求已成功处理，但在返回的响应报文中不含实体的主体部分 - 206 Partial Content
客户端进行了范围请求，而服务器成功执行了这部分的请求。响应报文中包含Content-Range指定范围请求的实体内容。
- 200 OK
-
3XX
- 301 Move Permanently
永久重定向。表示该资源已经分配了新的 URI，以后应使用资源现在的 URI。 - 302 Found
临时重定向。表示该资源已经分配了新的 URI，希望用户本次能使用新的 URI 访问。
与 301 不同的是，302 已经移动的资源对应的 URI 将来还有可能改变。 - 303 See Other
由于请求对应的资源存在另一个 URI，应使用 GET 定向获取请求的资源。 - 304 Not Modified
它与重定向没有关系。
服务器资源未改变，可直接使用客户端未过期的缓存。304返回时，不包含任何主体部分。
- 301 Move Permanently
-
4XX
400 Bad Request
请求报文中存在语法错误。401 Unauthorized
需要有通过 HTTP 认证的认证信息403 Forbidden
对请求资源的访问被服务器拒绝了404 Not Found
无法找到请求的资源
-
5XX
- 500 Internal Server Error
服务器端在执行请求时发生了错误 - 503 Service Unavailable
服务器暂时处于超负载状态或正在维护
- 500 Internal Server Error
响应报文
响应报文
5. 浏览器解析 HTML
渲染引擎开始解析 HTML / SVG / XHTML，并将标签转化为内容树中的 DOM 节点，产生 DOM Tree。接着，它解析 CSS 文件以及标签中的 style 样式信息，形成 CSSOM 树。DOM 树与 CSSOM 树共同构成 Render Tree，即渲染树。
6. 浏览器布局渲染
渲染的流程：
- 计算 CSS 样式
- 构建 Render Tree
- Layout 布局
- 绘制
Reflow / Layout：发生在元素尺寸改变时，或者将 display 由 block 变为 none 时。
Repaint：屏幕的一部分要重绘时，如某个元素背景色的变化。
注：Reflow 的成本比 Repaint 的成本大很多。
值得注意的是，这个 5、6 是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
