在浏览器中输入URL后都会发生什么

文章详细阐述了从输入URL到显示网页的整个过程,包括浏览器地址补全、DNS解析、TCP的三次握手建立连接、HTTP请求与响应、HTML解析及渲染树的生成,以及最终的页面显示和TCP的四次挥手关闭连接。
  1. 浏览器补全地址和DNS对域名进行解析;
    1>当搜索baidu.com,实际访问的是http://www.baidu.com,浏览器会补全地址。
    因为一个URL由协议、主机名、路径、搜索内容、哈希组成。
    2>DNS解析过程:客户机先插本地缓存,找不到再将域名发到DNS服务器,它先查它管理的区域,如果就查本地缓存,还找不到就发送给根域名DNS服务器。
    根域名解析请求域名的根域部分,把下一级域名信息的DNS服务器地址返回给客户机的DNS服务器地址。客户机DNS服务器利用根域名返回的DNS服务器地址一级一级查找DNS服务器地址。最终能在模板DNS服务器上找到相应的IP地址。
  2. 建立TCP连接(三次握手);
    第一次
    第一次握手:建立连接时,客户端发送syn包(seq=j)到服务器,并进入SYN_SENT状态,等待服务器确认;SYN:同步序列编号(Synchronize Sequence Numbers)。
    第二次
    第二次握手:服务器收到syn包,必须确认客户端的SYN(ack=j+1),同时自己也发送一个SYN包(seq=k),即SYN+ACK包,此时服务器进入SYN_RECV状态。

确认syn包都是回复ack以顺序号seq+1

第三次
第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。
完成三次握手,客户端与服务器开始传送数据,在上述过程中,还有一些重要的概念。

  1. 发送HTTP请求;
    浏览器把请求包装成请求报文,如GET/HTTP/1.0,当然请求也可能是POST。
    头部信息:User-Agent Hos成对出现
    主体:请求头部和主体之间有一个回车换行。如果是get请求,则没有主体部分,post有请求主体。

  2. 服务器处理请求;
    返回数据,比如请求的资源,一般是html页面。

  3. 返回响应结果;
    返回给客户端状态码。如果有错误,直接显示在页面上。
    1XX被接收,继续处理
    2XX成功
    3XX:重定向错误
    4XX:如404,属于客户端错误。
    5XX:服务器错误状态,一般是编码错误

  4. 关闭TCP连接(四次挥手);
    对于一个已经建立的连接,TCP使用改进的四次挥手来释放连接(使用一个带有FIN附加标记的报文段)。TCP关闭连接的步骤如下:
    第一步,当主机A的应用程序通知TCP数据已经发送完毕时,TCP向主机B发送一个带有FIN附加标记的报文段(FIN表示英文finish)。
    第二步,主机B收到这个FIN报文段之后,并不立即用FIN报文段回复主机A,而是先向主机A发送一个确认序号ACK,同时通知自己相应的应用程序:对方要求关闭连接(先发送ACK的目的是为了防止在这段时间内,对方重传FIN报文段)。
    第三步,主机B的应用程序告诉TCP:我要彻底的关闭连接,TCP向主机A送一个FIN报文段。
    第四步,主机A收到这个FIN报文段后,向主机B发送一个ACK表示连接彻底释放。

  5. 浏览器解析HTML;
    浏览器通过解析HTML,生成DOM(文档对象模型 Document Object Model)树(是一种HTML元素的树形数据结构),解析CSS,生成CSS规则树,然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同,渲染树中并没有head、display为none等不必显示的节点。

  6. 浏览器布局渲染;
    把html解析完,并且加载脚本文件,执行样式等,显示前端文件效果。
    html解析->外部样式、脚本加载->外部样式执行->外部脚本执行->html继续解析->dom树构建完成->加载图片->页面加载完成

### 浏览器输入URL发生的全过程解析 当用户在浏览器输入一个完整的URL并按下回车键后,浏览器会经历一系列复杂的网络请求和本地处理流程,最终将页面内容渲染到屏幕上。整个过程可以分为以下几个主要阶段: #### DNS解析与TCP连接建立 在接收到用户的URL输入后,浏览器首先需要对域名进行解析以获取对应的IP地址。这一过程通过DNS(Domain Name System)完成,通常涉及本地缓存、操作系统缓存以及递归查询等多个环节 [^2]。一旦获得目标服务器的IP地址,浏览器便会尝试与该IP地址上的特定端口(如HTTP默认为80,HTTPS为443)建立TCP连接。 建立TCP连接时采用三次握手机制:客户端发送SYN报文发起连接请求;服务端回应SYN-ACK确认收到请求并表示同意建立连接;最后客户端再发送ACK确认,从而完成连接建立 [^1]。 #### 发送HTTP/HTTPS请求 成功建立TCP连接之后,浏览器根据用户提供的URL构造相应的HTTP或HTTPS请求消息,并通过已有的连接发送至服务器。此阶段还包括设置各种请求头信息,例如Accept-Language, User-Agent等,用以告知服务器关于客户端的一些偏好及能力 [^4]。对于HTTPS协议而言,在正式传输数据前还需要额外执行TLS握手来协商加密参数并验证证书有效性。 #### 服务器处理与响应 服务器接收到来自客户端的请求后,对其进行解析,理解所需资源的位置及相关条件。接着,它可能需要访问数据库或其他后端系统来生成动态内容或者直接读取静态文件。完成后,服务器将构建包含状态码、响应头部以及实体主体的完整HTTP响应返回给客户端 [^4]。 #### 接收响应与缓存判断 浏览器接收到服务器发回的数据包后,开始分析响应中的状态码(比如200 OK),检查是否存在重定向指令。如果发现是重定向,则重复上述步骤直至到达最终目的地。同时,也会依据Cache-Control、Expires等字段决定是否将当前资源缓存下来以便下次快速加载 [^2]。 #### 构建DOM树与CSSOM树 拿到HTML文档后,浏览器启动渲染引擎逐行解析文本内容,逐步构建出一棵代表文档结构的DOM树。与此同时,遇到外部样式表链接时会异步下载并解析CSS规则,形成CSSOM树。值得注意的是,虽然CSS加载不会阻塞HTML解析,但JavaScript脚本的执行却会中断后续HTML代码的解析过程 [^1]。 #### 渲染树构建与布局计算 当DOM树与CSSOM树都准备就绪后,两者结合生成仅包含可见元素及其样式的渲染树。随后进入布局阶段,即确定每个节点在视口内的具体位置和大小,这一步骤也被称为“回流”(Reflow)。任何影响几何属性的操作都会触发此操作,进而可能导致视觉上的变化 [^3]。 #### 绘制与合成 紧接着是绘制(Painting),即将各个元素转换为像素点的过程。现代浏览器为了提高效率,往往会把不同部分分层渲染,最后由合成器负责把这些图层组合成一幅完整的图像呈现给用户。这种分层策略有助于减少不必要的重复绘制工作,特别是在动画效果频繁更新的情况下尤为重要 [^3]。 #### JavaScript执行的影响 在整个过程中,JavaScript的运行可能会打断正常的渲染流程。特别是那些没有defer或async属性的<script>标签内嵌脚本,它们会导致HTML解析暂停直到脚本完全执行完毕。因此合理安排脚本的位置和加载方式对于优化页面性能至关重要 [^1]。 #### 性能优化考量 为了提升用户体验,开发者可以通过多种手段加速页面加载速度,包括但不限于压缩资源体积、利用CDN分发静态文件、预加载关键性CSS以及延迟非必要JS的执行等措施 [^2]。此外,了解并控制好关键渲染路径上的各项活动也是实现高效前端开发的关键所在。 ```javascript // 示例:强制同步布局导致的潜在性能问题 function updateElementStyle(elementId) { const el = document.getElementById(elementId); // 修改样式 el.style.width = '200px'; // 强制立即获取offsetWidth,引发同步布局 console.log(el.offsetWidth); } ``` 上述示例展示了如何无意间造成强制同步布局的情况,这类行为应尽量避免以免干扰浏览器正常的异步优化机制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值