输入url后，触发的前端相关事件

在浏览器输入 URL 后，通常会触发以下一系列事件和操作：

1. URL 解析 ：浏览器会解析用户输入的 URL，包括协议（如 http:// 或 https://）、主机名、端口号（如果有）、路径和查询参数等。

2. DNS 查询：如果 URL 中包含主机名，浏览器会向 DNS 服务器发送查询请求，以获取主机名对应的 IP 地址。

3. 建立 TCP 连接：浏览器使用获取到的 IP 地址和端口号，与服务器建立 TCP 连接。

4. 发起 HTTP 请求：一旦建立了 TCP 连接，浏览器会向服务器发送 HTTP 请求，请求资源对应的路径。

5. 服务器响应：服务器收到请求后，会处理请求并返回相应的 HTTP 响应，包括响应头和响应体。

6. 接收响应：浏览器接收到服务器的响应后，开始处理响应内容。

7. 渲染页面：如果响应是 HTML 页面，浏览器会解析 HTML、构建 DOM 树、构建 CSSOM 树，然后将它们合并成渲染树，最终将页面内容显示在浏览器窗口中。

8. 下载资源：页面中可能包含其他资源（如 CSS 文件、JavaScript 文件、图片等），浏览器会解析 HTML，发现这些资源，并且对每个资源发起相应的 HTTP 请求。

9. 并行加载资源：浏览器会尽可能地并行加载多个资源，以减少页面加载时间。

10. 执行 JavaScript：如果页面中包含 JavaScript 代码，浏览器会下载并执行 JavaScript 文件，以完成页面的交互和动态效果。

11. 渲染页面元素：浏览器会根据 DOM 树和 CSSOM 树，计算每个元素的位置和样式，然后将页面元素绘制在浏览器窗口中。

12. 完成加载 ：当页面中的所有资源都加载完成，并且页面渲染完成后，浏览器会触发 load 事件，表示页面加载完成。

总结：

URL解析 -> DNS查询 -> DNS查询 -> 建立TCP连接 -> 发起HTTP请求 -> 服务器响应 -> 接收响应 -> 渲染页面 -> 下载资源 -> 并行下载资源 -> 执行js -> 渲染页面元素 -> 完成加载