从输入URL到页面加载完成期间经历了什么?

1、DNS域名解析

回车敲响的那一刻,浏览器检查了输入框,www.sunjiaoshou.com是什么鬼东西??我需要的可是IP地址呀!万般无奈之下找向了浏览器缓存,让其查找是否有这家伙的记录,结果并没有发现,此时找向系统缓存,主要去查找了系统中的hosts文件,同样没有,此时找向路由器缓存,查看路由器映射表,然而,并没有!于是,计算机将域名发给了本地DNS服务器(提供本地连接的服务商),本地DNS服务器找不到会将域名发送给其他服务器,进行递归过程,首先会发送到根域名服务器去找,返回顶级域名服务器的IP地址,再请求顶级域名服务器IP返回二级域名服务器IP,再请求二级域名服务器IP返回三级域名服务器IP…直到找到对应的IP地址,返回给浏览器。

2、发起TCP连接(三次握手)

拿到IP地址后的浏览器很开心,终于可以有目的的去联系远方的“朋友”了,此时作用于传输层的TCP协议向远端服务器发起连接请求,此举成为三次握手:

①源端->远端:你好,我想跟你连接可以吗?(SYN=1,seq=x)

②远端->源端:可以,你确定要连接是吧?(SYN=1,ACK=1,seq=y,ack=x+1)

③源端->远端:确定,我们连接吧!(ACK=1,seq=x+1,ack=y+1)

3、发送HTTP请求,接受HTTP响应

    OK,连接上了,传输吧,这时就需要将用户输入的地址封装成HTTP Request请求报文,发送到服务器,服务器收到请求后会发出应答,即响应数据。

    HTTP请求报文格式:请求行+请求头+空行+消息体,请求行包括请求方式(GET/POST/DELETE/PUT)、请求资源路径(URL)、HTTP版本号        

    HTTP响应报文格式:状态行+响应头+空行+消息体,状态行包括HTTP版本号、状态码、状态说明。

4、断开TCP连接(四次挥手)

    传也传完了,那咱们断开连接吧!

①源端->远端:好了,咱们断开吧(FIN=1,seq=u)

②远端->源端:行,等我稍微检查一下还有没有要发你的数据(ACK=1,seq=v,ack=u+1)

③远端->源端:可以了,咱们断开吧,拜拜(FIN=1,ACK=1,seq=w,ack=u+1)

④源端->远端:好的,再会,拜拜(ACK=1,seq=u+1,ack=w+1)

5、浏览器解析HTML代码,请求js,css等资源,最后进行页面渲染,呈现给用户

    浏览器获取文件后开始利用内核解析了,解析过程中也会出现一些HTTP请求请求一些资源,如js,css等文件,将这些文件下载到本地。浏览器解析HTML文件时会自上而下,起初产生一个DOM树,解析CSS之后产生CSS规则树,后将两树进行融合,合成为渲染层,最后调用操作系统的Native GUI的API绘制。

————————————————
版权声明:本文为优快云博主「孙叫兽」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.youkuaiyun.com/weixin_41937552/article/details/114693406

### 前端网络协议面试题整理 以下是关于前端网络协议的一些常见面试问题及其解答: #### HTTP 协议基础 1. **什么是 HTTPHTTPS?它们有什么区别?** - HTTP 是一种用于客户端和服务器之间通信的应用层协议,而 HTTPS 则是在 HTTP 上加入了 SSL/TLS 加密技术的安全版协议。HTTPS 提供了加密传输、身份认证等功能,因此更加安全[^2]。 2. **HTTP 请求的主要方法有哪些?分别适用于哪些场景?** - HTTP 请求的方法主要包括 GET、POST、PUT、DELETE 等。GET 方法通常用于获取资源;POST 方法用于提交数据并创建新资源;PUT 方法用于更新已有资源;DELETE 方法用于删除指定资源。 3. **浏览器如何完成一次完整的 URL 访问流程?** - 当用户输入 URL 后,浏览器会依次执行以下操作:解析 URL 地址,查询本地缓存(如 DNS 缓存、浏览器缓存等),如果没有命中则发起 DNS 解析以获得目标 IP 地址,随后与服务器建立 TCP 连接并通过三次握手确认连接有效性,接着发送 HTTP 请求,接收服务器响应并最终渲染页面[^4]。 #### HTTP 版本差异 4. **HTTP/1.1 和 HTTP/2 之间的主要区别是什么?** - HTTP/2 引入了多路复用功能,允许在一个连接上同时处理多个请求,显著提升了效率。它还采用了 HPACK 算法对头部信息进行压缩,减少了冗余数据量,并支持服务器推送技术以便提前加载可能需要的资源[^3]。 5. **为什么说 HTTP/2 更高效?具体体现在哪里?** - HTTP/2 的改进之处在于其二进制分帧结构设计使得消息交换更紧凑快速;通过实现单连接上的多流交互减少延迟时间;以及利用头字段压缩技术和预判式推送机制进一步加快网页加载速度。 #### TCP/IP 层面的知识点 6. **TCP 的三次握手过程是如何工作的?为什么要这样做?** - 客户端向服务端发送 SYN 报文段表示希望建立连接(SYN=x),等待回应;当服务端收到该报文后回复自己的初始序号加上对方期望值加一即 ACK=y+1 并带上自己同步标志位设置为 true (SYN=z); 最终客户再次回送包含正确应答编号给定的服务端从而正式确立起稳定可靠的双向通讯链路关系。此方式能够有效防止错误连接的发生并确保双方都准备好参与交流活动[^5]。 7. **描述一下 TCP 断开连接时所经历的四个阶段?** - 在断开端口关联期间需遵循如下顺序步骤——由一方率先发出终止信号 FIN 包告之另一侧即将结束当前对话环节(设序列参数 u),相对方知晓情况之后立即反馈确认指令 ACK 继续维持原有逻辑直至自身也打算停止运作才另外投递出另一个方向性的终结标记 FIN(w), 对家最后予以终极许可 ACK(u+1,ack=w+1). 8. **TCP 如何保障可靠的数据传递?涉及到哪些关键技术手段?** - 关键措施涵盖了基于连续增量编码体系下的差错检验办法来验证每批次送达单元的真实性完好度状况; 若发现异常情形存在则触发重新传送相应受损片段动作直到满足预期质量标准为止; 另外借助动态调节窗口大小策略调控生产者产出节奏匹配消费者接纳能力范围之内规避溢出现象发生的同时兼顾整体吞吐表现水平提升抗压韧性特性增强适应复杂环境变化需求的能力. --- ### 示例代码展示 下面是一个简单的 JavaScript 实现模拟 HTTP 请求的例子: ```javascript fetch('https://example.com/api/data', { method: 'GET', }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` 上述脚本展示了如何使用 Fetch API 发起一个 GET 类型的 HTTP 请求,并对其结果进行基本处理。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值