浏览器从输入url到渲染的过程

文章详细描述了从URL输入到页面渲染的完整过程,包括URL解析、TCP三次握手、HTTP请求、服务器响应、HTML/CSS解析、DOM/CSSOM构建、Render树生成、布局计算和页面绘制,以及JavaScript的执行
摘要由CSDN通过智能技术生成
  1. URL 解析
    当用户在浏览器地址栏输入 URL 时,浏览器会首先对 URL 进行解析。这个过程包括解析协议(如 HTTP、HTTPS)、域名、端口号和路径等信息。

  2. 缓存判断:
    浏览器会判断所请求的资源是否在缓存里,如果请求的资源在缓存里并且没有失效,那么就直接使用,否则向服务器发起新的请求。

  3. DNS 解析
    获取解析出的域名对应的 IP 地址
    首先会判断本地是否有该域名的 IP 地址的缓存,如果有则使用,如果没有则向本地 DNS 服务器发起请求。本地 DNS 服务器也会先检查是否存在缓存,如果没有就会向上级 DNS 服务器发送请求,直到找到目标域名的 IP 地址为止。

  4. 通过3次握手,让浏览器和服务器建立 TCP 连接

  5. 发送 HTTP 请求
    一旦建立了 TCP 连接,浏览器就会向服务器发送 HTTP 请求。这个请求中包含了用户请求的资源信息,如请求方法(GET、POST 等)、请求头、Cookies 等。

  6. 服务器处理请求,并返回响应
    服务器处理完请求后,会生成一个 HTTP 响应,并将响应发送回浏览器。这个响应包含了请求的资源(如 HTML 文件、CSS 文件、JavaScript 文件、图片等)以及响应头信息。

  7. 页面渲染
    首先根据html文件,创建DOM树;根据css文件,创建CSSOM树;
    当 DOM 树和 CSSOM 树建立好后,根据它们来构建渲染树(Render 树)
    渲染树构建好后,会根据渲染树来进行布局。
    布局完成后,就绘制页面。

  8. 4次挥手,断开连接


TCP 的三次握手是在客户端和服务器之间建立 TCP 连接时执行的过程。它的步骤如下:

  1. 第一次握手(SYN):客户端向服务器发送一个特殊的 TCP 报文段,其中包含了 SYN 标志位(同步序列编号),表示客户端请求建立连接,并选择一个初始序列号。

  2. 第二次握手(SYN + ACK):服务器收到客户端的 SYN 报文段后,会回复一个 TCP 报文段,其中既包含了 SYN 标志位,又包含了 ACK 标志位(确认序号),表示服务器已经收到了客户端的连接请求,并且同意建立连接,同时也选择一个初始序列号。

  3. 第三次握手(ACK):客户端收到服务器的 SYN+ACK 报文段后,会向服务器发送一个确认报文段,其中包含了 ACK 标志位,表示客户端也确认了服务器的连接请求。

这样,通过三次握手,客户端和服务器之间就建立了可靠的 TCP 连接,双方可以开始进行数据传输。

总之,TCP 的三次握手是由客户端和服务器之间进行的,它们通过交换特定的 TCP 报文段来协商并建立连接。


补充:

  1. URL 解析
    当用户在浏览器地址栏输入 URL 时,浏览器会首先对 URL 进行解析。这个过程包括解析协议(如 HTTP、HTTPS)、域名、端口号和路径等信息。

  2. DNS 解析
    把从输入的URL中解析出的域名发送给 DNS 服务器进行解析,以获取该域名对应的 IP 地址。如果 DNS 缓存中有对应的记录,则会直接返回 IP 地址;否则,DNS 解析器会向上级 DNS 服务器发送请求,直到找到目标域名的 IP 地址为止。

  3. 建立 TCP 连接
    浏览器通过解析得到的 IP 地址,使用 HTTP 协议向服务器发送一个 TCP 连接请求。在建立 TCP 连接的过程中,浏览器会执行三次握手,确保与服务器之间的可靠连接。

  4. 发送 HTTP 请求
    一旦建立了 TCP 连接,浏览器就会向服务器发送 HTTP 请求。这个请求中包含了用户请求的资源信息,如请求方法(GET、POST 等)、请求头、Cookies 等。

  5. 服务器处理请求
    服务器接收到浏览器发送的 HTTP 请求后,会根据请求的内容进行处理。这个过程包括读取请求头、执行服务器端代码(如 PHP、Python、Node.js 等)、访问数据库等操作。

  6. 服务器返回响应
    服务器处理完请求后,会生成一个 HTTP 响应,并将响应发送回浏览器。这个响应包含了请求的资源(如 HTML 文件、CSS 文件、JavaScript 文件、图片等)以及响应头信息。

  7. 接收响应数据
    浏览器接收到服务器返回的 HTTP 响应后,会开始接收响应的数据。这个过程涉及到 TCP 协议的数据传输和分段重组。

  8. 解析 HTML
    浏览器收到 HTML 文件后,会对其进行解析。这个过程包括构建 DOM 树、解析 CSS 和 JavaScript 文件的引用等操作。

  9. 构建 DOM 树
    浏览器会根据 HTML 文件中的标签和元素构建 DOM 树(文档对象模型),这是页面结构的内存表示形式。

  10. 构建 CSSOM 树
    浏览器会解析 CSS 文件,并构建 CSSOM 树(CSS 对象模型),这是样式信息的内存表示形式。

  11. 合并 DOM 和 CSSOM,生成 Render 树
    浏览器会将 DOM 树和 CSSOM 树合并,生成一个 Render 树,这个 Render 树包含了每个节点的可见样式信息。

  12. 布局计算
    浏览器根据 Render 树中的节点信息,进行布局计算。这个过程确定了每个节点在页面中的位置和大小。

  13. 绘制页面
    浏览器根据布局计算得到的信息,使用渲染引擎将页面内容绘制到屏幕上。

  14. JavaScript 解析与执行
    如果页面中包含了 JavaScript 代码,浏览器会解析并执行这些代码。JavaScript 的执行可能会修改 DOM 树、CSSOM 树或触发重新布局和重绘。

  15. 页面渲染完成
    当所有的资源都被加载、解析和执行完成,并且页面内容已经被绘制到屏幕上时,页面渲染完成。

以上是浏览器从输入 URL 到页面渲染的主要过程,其中涉及到了网络通信、HTML 解析、CSS 解析、JavaScript 解析、页面布局和渲染等多个环节。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值