[网络协议]网络基础总结

互联网是如何工作的

一、TCP协议：

分为四个部分，分别是应用层，传输控制层，网络层和链路层，四个层级

1.应用层： -->数据

提供特定于应用程序的协议。http（负责浏览器和网络服务器的协议）、ftp(负责文件传输的协议)、IMAP（负责电子邮件客户端检索邮件的协议）

2.传输控制层：（也称为TCP层）–>数据、源端口、目标端口

2.1 发送数据包到计算机使用特定端口号的应用程序

2.2 TCP：面向连接的可靠字节流服务协议

? 因为TCP必须经过三次握手建立连接之后才能交换数据，每个收到的数据包都会向发送方发送ack确认，以保证发送成功

3.网络层：–> 数据、源端口、目标端口、源ip、目标ip地址

? 3.1 使用ip地址将数据包发送到特定的计算机

? 3.2 ip是不可靠的无连接协议

? ip传送数据包，每个数据包是独立的，而且ip传递不处理顺序可能会造成乱序到达的情况。但是TCP会根据数据包的序列号进行排序重组

4.链路层：

将二进制数据包与网络信号相互之间转换

4.1 注意点

? ip跟ip地址不同，ip代表的网络协议，而ip地址表示是一串数字

? ip地址有两种标准：分别是IP4(Internet Protocol version 4) 和IP6(Internet protocol version 6)

IP4:

采用的32位地址，即4字节，因此地址空间只有2的32次方

因为IP4的地址位置少，所以IP6应运而生

IP6

采用的是128位地址，

从我们当前的电脑访问哔哩哔哩网站的过程：

电脑通过调制解调器（modem）也就是我们常说的猫（将计算机的数字信号翻译成可沿普通电话线传送的模拟信号后，在公共电话网络进行传输）。公共电话网络通过连接Internet server provider（ISP）互联网服务提供商–>也就是三大运营商来接入互联网–>然后ISP会通过NSP（NSP视为ISP提供网络主干服务的公司，ISP可以从NSP那里批量购入带宽，为客户提供网络接入服务），NSP网络通过网络访问点NAP相连来交换数据包流量 ，每个NSP都必须连接到至少三个网络访问点

既然互联网是如此的复杂，互联网是如何帮数据包找到一个正确的路线？把数据包送到目的地

在互联网中有个特殊的计算器-路由器，路由器上有个路由表，记录了其子网络的所有IP地址，然而他并不知道上层网络所包含的IP地址，当数据包到达路由器，路由器检查路由表上是否有目的地的IP地址，如果有则直接发送给那个网络，否则就向上层发送数据在更高的层级中去寻找拥有改IP的路由器，如果依然没有找到，则再次将数据包向上路由，知道到达NSP主干网为止，连接到NSP骨干网的路由器，拥有最大的路由表，通过这张表可以将数据路由到正确的骨干网 ，然后他将开始向下传播，进入越来越小的网络，知道找到目的地址为止

当我们修改地址的时候，通过地址就不能找到我们的数据，所以这时候有了域名，那么问题来了，

浏览器是如何通过域名知道访问哪个IP地址呢？

这里就需要用到Domain Names Service (DNS) 是一个分布式数据库，上面记录了域名和IP地址的对应的关系

当我们在客户端请求数据的时候这时候我们的客户端会先向DNS发送请求，找到对应的IP地址然后拿到IP地址之后在去请求对应IP地址的服务器。

当我们的IP地址发生变化之后我们只需要修改DNS中域名和对应的IP地址，然后重新绑定就可以了。

数据是如何展示到浏览器上的？

二、浏览器的工作原理

1.进程和线程的概念

进程：

是操作系统进行资源分配和调度的基本单位，可以申请和拥有计算机资源，进程是程序的基本执行实体。

线程

是操作系统能够进行运算调度的最小单位，一个进程中可以并发多个线程，每条线程并行执行不同的任务。

2. 根据浏览器进程不同来拆解浏览器:

2.1.浏览器进程：

负责控制Chrome浏览器除标签页外的用户界面，包括地址栏，书签，后退和前进按钮，以及负责浏览器和其他进程协调工作 。

2.2.网络进程

负责发起接受网络请求

2.3.GPU进程

GPU进程负责整个浏览器的界面的渲染

2.4.插件进程

负责控制网站使用的所有插件，例如flash，不包括扩展市场里面安装的扩展

2.5.渲染器进程

渲染器进程用来控制显示tab标签内所有的内容，浏览器默认情况下会为每个标签页都创建一个进程

3.Chrome 一共有四个进程：

1. process-per-site-instance

   访问不同站点和同一站点的不同页面都会创建新的进程

   这个是最占用内存的，但是也是最安全的，当tab中的一个标签卡死时并不会影响其他的标签

2. process-per-site

   表示使用同一站点使用同一进程

3. process-per-tab

   tab里所有站点使用同一进程

4. single process

   让浏览器引擎和渲染引擎共用同一进程

4.浏览器渲染进程的过程

• 浏览器通过网络请求后获取HTML数据，通过TCP传给渲染器进程。
• DOM–主线程将HTML解析结构DOM树
• style–样式计算
• layoutTree --DOM+Style 根据DOM树和样式生成layoutTree
• paint --绘制 通过遍历layoutTree 生成绘制顺序表
• layer --布局 然后根据主线程将layoutTree和绘制信息表传给合成器线程
• 合成器线程 --将得到的信息分图层分成更小的图块
• 栅格线程 --将更小的图块进行栅格化raster,返回给合成器线程draw quads图块信息，存储在GPU中
• frame 合成器将栅格线程返回的图块合成帧交给浏览器进程
• 浏览器进程收到一帧的图像后传给GPU进行渲染。

5.重拍和重绘的概念

5.1重排

• 当改变DOM的属性时，会重新进行样式的计算，会重新布局和绘制，会使用主线程。

5.2重绘

当改变颜色时，只会发生样式的计算和绘制，不会占用主线程。

5.3一些重要方法

requestAnimationFrame()

会将主线程的任务分散到每一帧的间隔，从而不影响动画的流程。

Fiber()

react利用浏览器的空闲时间做优化。

Transform

? 会直接运行合成器线程，所以不会使用主线程的渲染。

? 在移动端使用3d转化可以优化性能（如果设备有3d加速引擎GPU可以提高性能，2d转换是无法调用GPU，2d靠的是CPU）。