一文搞懂从输入 url 到页面显示都发生了什么
从输入 url 到页面加载都发生了什么？
从输入 URL 到页面加载完成，涉及了多个步骤和技术。以下是这个过程的简要描述：
- 解析 URL： 浏览器首先解析输入的 URL，分析出协议、域名、路径等信息。
- DNS 查询： 浏览器根据域名查询 DNS（域名系统）服务器，获取域名对应的 IP 地址，以便建立连接。——> 注意获取的是 ip 地址而不是域名！
- 建立 TCP 连接： 浏览器使用获取到的 IP 地址，与服务器建立 TCP 连接。这是一个三次握手的过程，用于确保连接的可靠性。——> 断开连接不需要说明
- 发送 HTTP 请求： 浏览器发送 HTTP 请求，请求服务器上的资源，例如 HTML 文件、CSS 文件、JavaScript 文件等。——> 这里的描述其实并不涉及 ajax 请求，只是一些静态资源而已！
- 服务器处理请求： 服务器接收到请求后，根据请求的资源类型和路径，进行相应的处理。服务器可能会返回请求的资源，或者进行一些后端逻辑处理。
- 接收 HTTP 响应： 浏览器接收到服务器返回的 HTTP 响应，其中包含了请求的资源内容以及其他相关信息（比如状态码）。
- 渲染页面： 浏览器开始解析 HTML 文档，并构建 DOM 树（文档对象模型）和 CSSOM 树（CSS 对象模型）。然后，浏览器==将 DOM 树和 CSSOM 树组合，生成渲染树（Render Tree）==，用于计算页面布局和绘制。
- 布局和绘制： 浏览器使用渲染树计算出各个元素的位置和尺寸，然后进行绘制，将页面内容显示在用户界面上。——> 进行回流和重绘！
- 执行 JavaScript： 如果 HTML 中包含了 JavaScript 代码，浏览器会解析并执行这些代码。JavaScript 可以修改 DOM、处理用户交互等。
- 加载其他资源： 页面中的其他资源（如图片、字体、媒体文件等）可能也会在页面加载过程中被请求和加载，这里还可能会发送一些 ajax 请求。
- 页面完成加载： 页面上的所有资源都加载完成后，页面加载完成，用户可以与页面进行交互。
需要注意的是，上述过程是一个简化的描述，实际中还涉及更多细节和技术，如缓存、HTTPS 加密、服务器端渲染等。整个过程的速度和效率对于用户体验和性能至关重要，因此现代浏览器和开发者都在不断优化和改进这个过程。