浏览器原理 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能保证数据按照顺序接收的!









目录
相关文章
|
3月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
257 0
|
11天前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
|
16天前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
18天前
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
1月前
|
前端开发 JavaScript 异构计算
简述浏览器的渲染原理
浏览器渲染原理主要包括以下步骤:1)解析HTML文档生成DOM树;2)解析CSS生成CSSOM树;3)结合DOM与CSSOM生成渲染树;4)布局计算(回流)确定元素大小和位置;5)绘制(Paint)将节点转为图形内容;6)合成(Composite)多层图像。整个过程从文档解析到最终输出完整网页,并通过优化技术提升性能。
|
2月前
|
JSON 前端开发 JavaScript
java中post请求调用下载文件接口浏览器未弹窗而是返回一堆json,为啥
客户端调接口需要返回另存为弹窗,下载文件,但是遇到的问题是接口调用成功且不报错,浏览器F12查看居然返回一堆json,而没有另存为弹窗; > 正确的效果应该是:接口调用成功且浏览器F12不返回任何json,而是弹窗另存为窗口,直接保存文件即可。
142 2
|
3月前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
62 5
|
3月前
|
Web App开发 JSON 数据格式
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
【Azure Developer】浏览器查看本地数据文件时遇见跨域问题(CORS)
|
15天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
13天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。