深度解析浏览器中输入 URL 后发生了什么

深度解析浏览器中输入 URL 后发生了什么

先上张简单分析的图：

思维导图

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三次握手与四次挥手
   
2. 发起 HTTP 请求
   请求方法
   下面只列举了 HTTP/1.1 支持的方法。
   
   方法 说明 备注
   GET 获取资源
   POST 传输实体主体
   DELETE 删除文件 不带验证机制，任何人都可以删除
   PUT 传输文件 不带验证机制，任何人都可以上传，存在安全问题
   TRACE 追踪路径 容易引发 XSL 跨站攻击
   HEAD 获得报文首部
   OPTIONS 询问支持方法 查询针对请求 URI 指定的资源支持的方法，响应如 Allow: GET,POST,HEAD
   CONNECT 要求用隧道协议连接代理 主要使用 SLL 和 TLS 协议把通信内容加密后经网络隧道传输
   请求报文
   请求报文
   
3. 接收响应结果
   状态码
   状态码的类别
   
   类别 原因
   1XX Informational 请求的信息正在处理
   2XX Success 请求正常处理完毕
   3XX Redirection 需要进行附加操作以完成请求
   4XX Client Error 服务器无法处理请求
   5XX Server Error 服务器处理请求出错
   具体状态
   2XX
   200 OK
   表示从客户端发来的请求在服务器端被正常处理了
   204 No Content
   服务器接收的请求已成功处理，但在返回的响应报文中不含实体的主体部分
   206 Partial Content
   客户端进行了范围请求，而服务器成功执行了这部分的请求。响应报文中包含 Content-Range 指定范围请求的实体内容。
   3XX

301 Move Permanently
永久重定向。表示该资源已经分配了新的 URI，以后应使用资源现在的 URI。
302 Found
临时重定向。表示该资源已经分配了新的 URI，希望用户本次能使用新的 URI 访问。
与 301 不同的是，302 已经移动的资源对应的 URI 将来还有可能改变。
303 See Other
由于请求对应的资源存在另一个 URI，应使用 GET 定向获取请求的资源。
304 Not Modified
它与重定向没有关系。
服务器资源未改变，可直接使用客户端未过期的缓存。304返回时，不包含任何主体部分。
4XX

400 Bad Request
请求报文中存在语法错误。

401 Unauthorized
需要有通过 HTTP 认证的认证信息

403 Forbidden
对请求资源的访问被服务器拒绝了

404 Not Found
无法找到请求的资源

5XX

500 Internal Server Error
服务器端在执行请求时发生了错误
503 Service Unavailable
服务器暂时处于超负载状态或正在维护
响应报文
响应报文

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 的成本大很多。