浏览器原理 02 # TCP协议:如何保证页面文件能被完整送达浏览器?

简介: 浏览器原理 02 # TCP协议:如何保证页面文件能被完整送达浏览器?

说明

浏览器工作原理与实践专栏学习笔记


FP(First Paint)

在衡量 Web 页面性能的时候有一个重要的指标叫FP(First Paint),是指从页面加载到首次开始绘制的时长。其中一个重要的因素是网络加载速度


一个数据包的“旅程”


互联网,实际上是一套理念和协议组成的体系架构

互联网中的数据是通过数据包来传输的。如果发送的数据很大,那么该数据就会被拆分为很多小数据包来传输。


1. IP:把数据包送达目的主机


数据包要在互联网上进行传输,就要符合网际协议(Internet Protocol,简称 IP)标准。

计算机的地址就称为 IP 地址,访问任何网站实际上只是你的计算机向另外一台计算机请求信息。

简化的 IP 网络三层传输模型:


20201103153247579.png



如上图:

一个数据包从主机 A 到主机 B 的旅程:


上层将含有“极客时间”的数据包交给网络层;

网络层再将 IP 头附加到数据包上,组成新的 IP 数据包,并交给底层;

底层通过物理网络将数据包传输给主机 B;

数据包被传输到主机 B 的网络层,在这里主机 B 拆开数据包的 IP 头信息,并将拆开来的数据部分交给上层;

最终,含有“极客时间”信息的数据包就到达了主机 B 的上层了。



2. UDP:把数据包送达应用程序


IP 是非常底层的协议,只负责把数据包传送到对方电脑,但是对方电脑并不知道把数据包交给哪个程序,因此需要基于 IP 之上开发能和应用打交道的协议,最常见的是“用户数据包协议(User Datagram Protocol)”,简称 UDP


IP 通过 IP 地址信息把数据包发送给指定的电脑,而 UDP 通过端口号把数据包分发给正确的程序。

简化的 UDP 网络四层传输模型:


20201103153312650.png




如上图:


一个数据包从主机 A 旅行到主机 B 的路线:


   上层将含有“极客时间”的数据包交给传输层;


   传输层会在数据包前面附加上 UDP 头,组成新的 UDP 数据包,再将新的 UDP 数据包交给网络层;


   网络层再将 IP 头附加到数据包上,组成新的 IP 数据包,并交给底层;


   数据包被传输到主机 B 的网络层,在这里主机 B 拆开 IP 头信息,并将拆开来的数据部分交给传输层;


   在传输层,数据包中的 UDP 头会被拆开,并根据 UDP 中所提供的端口号,把数据部分交给上层的应用程序;


   最终,含有“极客时间”信息的数据包就旅行到了主机 B 上层应用程序这里。


UDP 不能保证数据可靠性,但是传输速度却非常快




3. TCP:把数据完整地送达应用程序

TCP(Transmission Control Protocol,传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议。


要求数据传输可靠性(reliability)的应用,如果使用 UDP 来传输会存在两个问题:


   数据包在传输过程中容易丢失


   大文件会被拆分成很多小的数据包来传输,这些小的数据包会经过不同的路由,并在不同的时间到达接收端,而 UDP 协议并不知道如何组装这些数据包,从而把这些数据包还原成完整的文件。


相对于 UDP,TCP 有下面两个特点:


   对于数据包丢失的情况,TCP 提供重传机制;


   TCP 引入了数据包排序机制,用来保证把乱序的数据包组合成一个完整的文件。


和 UDP 头一样,TCP 头除了包含了目标端口和本机端口号外,还提供了用于排序的序列号,以便接收端通过序号来重排数据包。


简化的 TCP 网络四层传输模型(TCP 下的单个数据包的传输流程):

20201103153340848.png



TCP 单个数据包的传输流程和 UDP 流程差不多,不同的地方在于,通过 TCP 头的信息保证了一块大的数据传输的完整性。



一个 TCP 连接的生命周期

面向连接:是指在数据通信开始之前先做好两端之间的准备工作。


三次握手:是指在建立一个 TCP 连接时,客户端和服务器总共要发送三个数据包以确认连接的建立。


20201103153357190.png



1、首先,建立连接阶段

   这个阶段是通过三次握手来建立客户端和服务器之间的连接。TCP 提供面向连接的通信传输。


2、其次,传输数据阶段

   在该阶段,接收端需要对每个数据包进行确认操作,也就是接收端在接收到数据包之后,需要发送确认数据包给发送端。所以当发送端发送了一个数据包之后,在规定时间内没有接收到接收端反馈的确认消息,则判断为数据包丢失,并触发发送端的重发机制。同样,一个大的文件在传输过程中会被拆分成很多小的数据包,这些数据包到达接收端后,接收端会按照 TCP 头中的序号为其排序,从而保证组成完整的数据。


3、最后,断开连接阶段

   数据传输完毕之后,就要终止连接了,涉及到最后一个阶段四次挥手来保证双方都能断开连接。



总结

  • 互联网中的数据是通过数据包来传输的,数据包在传输过程中容易丢失或出错。
  • IP 负责把数据包送达目的主机。
  • UDP 负责把数据包送达具体应用。
  • TCP 保证了数据完整地传输,它的连接可分为三个阶段:建立连接、传输数据和断开连接。



精选留言

1、HTTP 协议和 TCP 协议都是 TCP/IP 协议簇的子集。


HTTP 协议属于应用层,TCP协议属于传输层,HTTP 协议位于 TCP 协议的上层。

请求方要发送的数据包,在应用层加上 HTTP 头以后会交给传输层的 TCP 协议处理,应答方接收到的数据包,在传输层拆掉 TCP 头以后交给应用层的 HTTP 协议处理。建立 TCP 连接后会顺序收发数据,请求方和应答方都必须依据 HTTP 规范构建和解析 HTTP 报文。


2、现在的浏览器可以同时打开多个页签,他们端口一样吗?如果一样,数据怎么知道去哪个页签?

   作者回复: 端口一样的,网络进程知道每个tcp链接所对应的标签是那个,所以接收到数据后,会把数据分发给对应的渲染进程


3、http 和 websocket都是属于应用层的协议吗?

   作者回复: 是的,他们都是应用层协议,而且websocket名字取的比较有迷惑性,其实和socket完全不一样,你可以把websocket看出是http的改造版本,增加了服务器向客户端主动发送消息的能力。


4、tcp传送数据时 浏览器端就做渲染处理了么?如果前面数据包丢了 后面数据包先来是要等么?类似的那种实时渲染怎么处理?针对数据包的顺序性?


   作者回复: 接收到http响应头中的content-type类型时就开始准备渲染进程了,

   响应体数据一旦接受到便开始做DOM解析了!

   基于http不用担心数据包丢失的问题,因为丢包和重传都是在tcp层解决的。http能保证数据按照顺序接收的!









目录
相关文章
|
1月前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
57 0
|
1月前
|
缓存 JavaScript
vue阻止浏览器刷新和关闭页面提示
使用场景:在使用vuex进行缓存管理时,页面的缓存会随着页面关闭而消失,如果缓存动作仍在进行中,关闭页面会导致数据丢失,此时需要阻止页面关闭
197 3
|
4天前
|
前端开发 安全 UED
【项目实战】从终端到浏览器:实现 ANSI 字体在前端页面的彩色展示
在学习和工作中,我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级,我们可以使用不同的颜色来呈现,使其更加醒目和易于阅读。 在下图运行结果中,我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色,我们可以在控制台中以彩色的方式显示日志信息。例如,DEBUG 级别的日志使用白色,INFO 级别的日志使用绿色,WARNING 级别的日志使用黄色,ERROR 级别的日志使用红色,CRITICAL 级别的日志使用蓝色。
|
1月前
|
Web App开发 JavaScript 前端开发
浏览器与Node.js事件循环:异同点及工作原理
浏览器与Node.js事件循环:异同点及工作原理
|
18天前
|
JavaScript 前端开发 网络协议
浏览器的工作原理
主要分为导航、获取数据、HTML解析、css解析、执行javaScript、渲染树几个步骤。
19 1
|
1月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
1月前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
72 0
|
1月前
|
Web App开发 缓存 网络协议
|
1月前
|
存储 安全 前端开发
浏览器跨窗口通信:原理与实践
浏览器跨窗口通信:原理与实践
98 0
|
1月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
118 1