# 输入一个 url 会发生什么
本问题在之前的学习合集文章 ———— 计算机网络与浏览器原理篇有过总结，因为本问题经典、关键、常见，所以此处单独开一篇博文再次作以更为详细的总结～
# 输入一个 url 会发生什么？
- URL 解析
步骤：
浏览器解析用户输入的 URL，提取协议（如 http 或 https）、域名（如 google.com）、端口（默认 80 或 443）、路径和查询参数。
示例：
输入 https://www.google.com/search?q=vue，浏览器会解析出：
协议：https
域名：www.google.com
路径：/search
查询参数：q=vue
- DNS 查询
步骤：
浏览器通过 DNS（域名系统）将域名解析为对应的 IP 地址。
如果本地缓存中有域名对应的 IP 地址，则直接使用；否则，浏览器会向 DNS 服务器发起查询请求。
示例：
解析 www.google.com 可能会返回 142.250.190.78。
- 建立 TCP 连接
步骤：
浏览器通过 IP 地址和端口与服务器建立 TCP 连接。
如果是 HTTPS，还会进行 TLS 握手，建立加密通道。
示例：
与 142.250.190.78:443 建立 TCP 连接，并进行 TLS 握手。
- 发送 HTTP 请求
步骤：
- 浏览器向服务器发送 HTTP 请求，包括请求方法（如 GET）、路径、请求头和请求体。
示例：
发送 GET /search?q=vue HTTP/1.1 请求。
- 服务器处理请求
步骤：
服务器接收到请求后，根据路径和参数处理请求，生成响应数据（如 HTML 页面）。
服务器返回 HTTP 响应，包括状态码（如 200）、响应头和响应体。
示例：
服务器返回 200 OK 和 Google 搜索结果的 HTML 页面。
- 浏览器接收响应
步骤：
浏览器接收到服务器的响应后，开始解析响应内容。
如果是 HTML 页面，浏览器会解析 HTML、CSS 和 JavaScript，并加载页面所需的资源（如图片、样式表、脚本等）。
示例：
解析 Google 搜索结果的 HTML，并加载相关资源。
- 渲染页面
步骤：
浏览器根据 HTML 和 CSS 构建 DOM 树和 CSSOM 树，然后合并生成渲染树。
根据渲染树计算布局，绘制页面内容。
执行 JavaScript 代码，动态更新页面。
示例：
渲染 Google 搜索结果的页面，并显示给用户。
- 加载完成
步骤：
页面加载完成后，触发 load 事件。
如果有异步操作（如 AJAX 请求），页面可能会继续更新。
示例：
Google 搜索页面加载完成后，用户可以与页面交互。
# 如果 URL 是 google.com 会有什么不同？
- 域名解析：
特殊情况：
在国内，由于网络限制，本地 DNS 服务器可能无法解析 google.com 的 IP 地址。
如果用户没有使用 “梯子”（VPN 或代理），DNS 查询会失败，浏览器会显示 “无法访问此网站” 或类似的错误。
如果用户使用了 “梯子”，DNS 查询会通过代理服务器进行，成功解析到 google.com 的 IP 地址（如 142.250.190.78）。
浏览器会解析 google.com，但通常会重定向到 www.google.com（Google 的主域名）。
例如，输入 google.com 后，浏览器可能会收到 301 或 302 重定向响应，指向 https://www.google.com。
- HTTPS 强制跳转：
Google 会强制使用 HTTPS，因此即使输入 http://google.com，浏览器也会重定向到 https://www.google.com。
- 首页内容：
如果访问的是 https://www.google.com，服务器会返回 Google 搜索首页的 HTML 页面。
页面内容相对简单，主要是搜索框和一些链接。
- 资源加载：
Google 首页的资源（如图片、CSS、JavaScript）通常较少，加载速度较快。
Google 会使用 CDN 和缓存技术，进一步加速页面加载。
- 用户体验：
Google 首页设计简洁，加载速度快，用户可以立即进行搜索操作。
# 总结
输入 URL 后，浏览器会执行以下步骤：
URL 解析：提取协议、域名、路径等信息。
DNS 查询：将域名解析为 IP 地址。
建立 TCP 连接：与服务器建立连接（HTTPS 还会进行 TLS 握手）。
发送 HTTP 请求：向服务器发送请求。
服务器处理请求：服务器生成响应并返回。
浏览器接收响应：解析 HTML、CSS 和 JavaScript。
渲染页面：构建 DOM 树、CSSOM 树，绘制页面。
加载完成：页面显示并触发 load 事件。
