输入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 -> 渲染页面元素 -> 完成加载

相关推荐
修炼的dance8 分钟前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M14 分钟前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写16 分钟前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李18 分钟前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易32 分钟前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马43 分钟前
前沿视界
前端
kyriewen1 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易1 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员
IT_陈寒1 小时前
Vue的这个响应式陷阱,差点让我加班到天亮
前端·人工智能·后端
Flynt3 小时前
别写拖拽行为,只声明"能拖到哪":UIST 最佳论文的拖拽方案我实测了
前端·svg·preact