day13:网页加载过程| 青训营

186 阅读3分钟

一个网页从输入域名到加载出来一般经历以下步骤:

一、在网页地址栏输入url地址(例如:www.example.com

  1. 协议(Protocol):URL 的第一部分是协议,例如 "http://"、"https://"、"ftp://" 等。它指定了要使用的通信协议,如 HTTP、HTTPS、FTP 等。
  2. 域名(Domain):URL 的下一个部分是域名,它标识了要访问的资源所在的服务器的名称。域名是由一系列的标签(label)组成,每个标签之间用点(.)分隔。例如,URL "www.example.com" 中的域名是 "www.example.com"。
  3. 端口(Port):有些 URL 可能会包含一个端口号,用于指定要访问的服务器上的特定服务。HTTP 默认端口为 80,HTTPS 默认端口为 443。如果没有明确指定端口号,则会使用默认端口。
  4. 路径(Path):路径指定了服务器上资源的具体位置。它是 URL 中域名后面的部分,通常以斜杠(/)开头。例如,URL "www.example.com/blog/articl…" 中的路径是 "/blog/article.html"。
  5. 查询字符串(Query String):查询字符串是一种传递额外参数给服务器的方法,通常以问号(?)开头,参数键值对之间用&连接。例如,URL "www.example.com/search?q=ke…" 中的查询字符串是 "q=keyword&page=1"。
  6. 锚点(Fragment):锚点用于在 HTML 文档中定位到特定的位置。它由一个井号(#)和后面的标识符组成。例如,URL "www.example.com/page.html#s…" 中的锚点是 "section1"。

解析 URL 的目的是为了将其转换为可理解和使用的形式,以便进行网络资源的访问。

二、 域名解析

  1. 首先,浏览器会根据输入的域名()向本地 DNS 服务器发送解析请求,获取目标网站的 IP 地址。
  2. 如果本地 DNS 服务器没有缓存对应的 IP 地址,它将会依次向其他 DNS 服务器进行查询,直到找到目标网站的 IP 地址或者查询失败。
  3. 通过域名解析,我们可以将域名转换为可被计算机识别的 IP 地址,以此访问网络资源。

三、建立TCP连接

一旦浏览器获取到目标网站的 IP 地址,它会使用该 IP 地址与服务器建立 TCP 连接,主要通过三次握手完成。

四、发送HTTP请求

一旦建立了TCP连接,浏览器会通过该连接向服务器发送HTTP请求。请求中包含了要访问的资源地址、请求方法(GET、POST等)、请求头信息等。

五、服务器响应

服务器接收到浏览器发送的HTTP请求后,会解析请求,根据请求的内容生成相应的响应数据。响应数据包括状态码、响应头、响应体等。

六、下载资源

一旦服务器生成了响应数据,它会通过TCP连接将响应数据传输给浏览器。浏览器会根据响应头中的信息解析响应数据,根据需要下载网页文档、CSS样式表、JavaScript脚本、图片、音视频等资源。

七、渲染页面

当浏览器下载完所有的资源后,它会解析网页文档、执行JavaScript脚本、渲染页面。浏览器会根据HTML标记语言渲染网页结构,并将CSS样式应用于网页元素,最终呈现出用户可见的网页界面。

八、与服务器断开TCP连接(四次挥手)

参考资料:
【从输入域名到最后呈现经历的过程】juejin.cn/post/684490…
【当我们在浏览器地址栏输入网址,到最后看到页面,中间都经历了什么?】juejin.cn/post/684490…