在浏览器输入一个网址,按回车之后发生了什么?


详细参考网址:http://www.cnblogs.com/wenanry/archive/2010/02/25/1673368.html

这个问题涉及到浏览器、网络、服务器三者之间的一系列行为,希望能为大家阐述下自己的理解:


首先,当我们输入一个网址的时候,这个网址例如www.baidu.com,我们需要知道这个网址其实是一个主机名,需要通过映射关系根据主机名获取IP地址。这个映射关系可以称为DNS。

有哪些方法途径可以获取IP地址呢?第一个是我们的浏览器。浏览器会将我们近一段时间访问的主机名及对应的IP地址进行缓存,缓存时间与浏览器有关,在该缓存时间内,我们输入同样的主机名就可以快速从浏览器缓存区获取IP地址并建立连接。第二是我们的Host文件。当浏览器的缓存不存在我们想要的IP地址时,系统会查找C盘下的一个system32内的Host文件,该文件会记录我们常用的主机名及IP地址对应关系。第三是路由上的DNS缓存,路由器会缓存主机名及IP地址对应关系。第四最后则是查找为我们提供网络服务的服务商的DNS服务器,如电信、联通网络服务商等。一系列的方法为完成的目的只有一个,根据主机名获取IP地址。


接下来,当完成了IP地址获取之后会干嘛呢?这里需要做的就是建立TCP连接,其实就是三次握手,具体三次握手是干嘛,无非就是SYN,ACK,ESTABLISHED。每次响应报文码都会加1,而报文码的产生和系统有关,小编记得好像是从0开始,每0.5s增加6400.具体过程可以参考我的其他文章。


完成了三次握手之后就是发送HTTP请求,请求的方式是GET和POST两种。GET请求是从服务器获取数据,然后讲其加到?之后作为参数返回给服务器来获取数据,而POST请求则是讲请求内容加到请求体中,并经过编码压缩交给服务器。通常GET请求可以用于获取轻量级的数据,而POST请求的内容数据量比较庞大些。关于请求和响应的状态码,如200、301、302、304、404等具体含义小编会写一篇文章来阐述。总之,浏览器和服务器之间通过GET和POST完成数据的请求和响应,最终一系列的数据会根据请求头的内容来返回,如指定的文件格式、压缩方式等。

这里需要提及一点的就是,由于服务器上的带宽限制,有时候在进行数据获取与返回的时候,需要使用缓存、预取、并行、压缩等方式来进行,有利于大大提高数据获取的效率。

当数据完成请求到返回的过程之后,根据Keep-alive属性可以选择是否断开连接,HTTP/1.1一般支持同一个TCP多个请求,而不是1.0版本下的完成一次请求就发生断开。TCP的断开与连接不一样,断开可以分为主动关闭和被动关闭,可以经过4次握手。

在网络访问中,还有一点就是需要明白session和cookies的区别。在网络访问过程中,服务端和客户端都保持各自的状态,session用来记录服务端的状态,而建立连接时每个服务端需要和客户端保持通信,并且获得客户端的状态,于是,服务端将自身记录的客户端状态通过一个标识符来返回给客户端,客户端上就使用cookies来记录这个标示。




### 浏览器输入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); } ``` 上述示例展示了如何无意间造成强制同步布局的情况,这类行为应尽量避免以免干扰浏览器正常的异步优化机制。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值