了解前端网络基础

460 阅读17分钟

计算机网络

目前存在的两种网络分层模型:

OSI模型:OSI模型一共分为七层

TCP/IP模型和OSI模型类似,但是只分为四层

OSI模型

层数层名备注
7应用层(Application)例如HTTP、SSH、NFS
6表示层(Presentation)
5会话层(Session)
4传输层(Transport)例如TCP、UDP
3网络层(Network)路由器
2数据链路层(Data Link)交换机
1物理层(Physical)网卡、集线器(Hub

TCP/IP模型

TCP/IP模型分为四层:应用层(Application)、传输层(Host-to-Host Transport)、互联网层(Internet)、网络接口层(Network Interface)。

层数层名备注
4应用层(Application)例如HTTP、SSH、DNS
3传输层(Host-to-Host Transport)例如TCP、UDP
2互联网层(Internet)路由器
1网络接口层(Network Interface)交换机

应用层

当用户使用浏览器来打开网页时,需要利用DNS提供的域名解析服务,来获取网址对应的IP地址,然后再通过另外一个协议HTTP来下载页面内容。在这个过程中出现的两个协议(DNS和HTTP)都是工作在应用层上的协议

传输层

传输层提供数据传输的服务

传输层上最重要的两个协议是TCP和UDP。TCP是面向连接的协议(Connection-Oriented),UDP是无连接的协议(Connection-Less)

TCP/IP协议是传输层协议,主要解决数据如何在网络中传输,而HTTP是应用层协议,主要解决如何包装数据

关于TCP/IP和HTTP协议的关系,网络有一段比较容易理解的介绍:“我们在传输数据时,可以只使用(传输层)TCP/IP协议,但是那样的话,如果没有应用层,便无法识别数据内容,如果想要使传输的数据有意义,则必须使用到应用层协议,应用层协议有很多,比如HTTP、FTP、TELNET等,也可以自己定义应用层协议。WEB使用HTTP协议作应用层协议,以封装HTTP 文本信息,然后使用TCP/IP做传输层协议将它发到网络上。”

TCP与UDP

TCP

当一台计算机要与另一台计算机通信时,两台计算机之间通信需要畅通且可靠,这样才能正确收发数据;

比如你想下载文件,下载的文件要是完整的,不能缺图少字的;这里就用到了TCP,称为传输控制协议,是TCP/IP网络中使用的主要协议之一,用来保证所有的数据按顺序接收,如果不使用TCP协议;数据可能会丢失或者乱序,看不到图像或者文字错乱;

TCP是面向连接的协议,两台计算机在通信之前,要先建立TCP逻辑连接,这里就要通过三次握手来实现;三次握手就是发送方计算机和接收方计算机相互确认的一个过程,:比如A:听得到吗?B说:听得到,你能听到吗?A:能听到。A和B一来一回相互确认后,才开始收发数据;

UDP

和TCP相似,也用于发送和接收数据

不同的是UDP是无连接的,就是通信之前无需建立通讯连接;也不保证数据传输的可靠性,

当使用UDP发送数据时,他并不关心数据是否会被接收到,但也因为如此,他的传输比TCP更快;适用于实时性要求高的应用,比如语音通话,视频聊天

http和https

超文本传输协议,它是一种以明文的方式发送我们的内容,没有任何的加密;比如我们访问一个网站,我们可能会需要在这个网站输入密码,登录账号之类的操作,那我们账号就会发送到服务器上面,但是要是有人在中途截取我们的信息,那我们一些比较重要的信息可能就暴露了;

所以为了解决http不加密的问题,之后就增加了一个SSL协议,这个协议简单来说就是提供数据安全和完整性的协议,也就是负责网络连接的加密;比如我们访问了一个https的网站,那我们电脑会先和服务器建立一个安全的连接通道,然后服务器会先发送一份网站的证书信息到我们电脑;就相当于是告诉我们电脑,你访问的服务器没有问题,确认了信息之后;我们的服务器会生成一个加锁的箱子,但是这把锁有两把不一样的钥匙一把是给我们电脑的一把是服务器自己的,

然后服务器会把上锁的箱子和钥匙发给我们电脑,我们把信息放在箱子以后,用钥匙锁上然后发给服务器,服务器再用自己的钥匙打开箱子,来保证信息的安全;在这个过程中即使消息被拦截,没有服务器的钥匙是很难打开的。

HTTP

http0.9

功能简陋,只有一个命令GET,只支持纯文本内容

HTTP/1.0

​ 只是使用在一些简单网页上和网络请求上,所以比较简单, ​ 任何格式的内容都可以发送,这使得互联网不仅可以传输文字,还能传输图像、视频、二进制等文件。 ​ 除了GET命令,还引入了POST命令和HEAD命令 ​ 每次请求都打开一次新的TCP连接,收到相应之后立即断开连接 ​ http请求和回应的格式改变,除了数据部分,每次通信都必须包括头信息 ​ 不支持断点续传,也就是说,每次都会传送全部的页面和数据。 ​ 通常每台计算机只能绑定一个 IP ​ 只使用 header 中的 If-Modified-Since 和 Expires 作为缓存失效的标准。

HTTP/1.1

引入了持久连接,即TCP连接默认不关闭,可以被多个请求复用 引入了管道机制,即在同一个TCP连接里,客户端可以同时发送多个 请求,进一步改进了HTTP协议的效率。 新增加了 E-tag,If-Unmodified-Since, If-Match, If-None-Match 等缓存控制标头来控制缓存失效 支持断点续传,通过使用请求头中的 Range 来实现。 使用了虚拟网络,在一台物理服务器上可以存在多个虚拟主机,并且它们共享一个IP地址。 新增方法:PUT、 PATCH、 OPTIONS、 DELETE

http1.x版本问题

在传输数据过程中,所有内容都是明文,客户端和服务器端都无法验证对方的身份,无法保证数据的安全性。
HTTP/1.1 版本默认允许复用TCP连接,但是在同一个TCP连接里,所有数据通信是按次序进行的,服务器通常在处理完一个回应后,才会继续去处理下一个,这样子就会造成队头阻塞。
http/1.x 版本支持Keep-alive,用此方案来弥补创建多次连接产生的延迟,
但是同样会给服务器带来压力,并且的话,对于单文件被不断请求的服务,Keep-alive会极大影响性能,因为它在文件被请求之后还保持了不必要的连接很长时间。

HTTP/2.0

  • 新的二进制格式: 二进制分帧 这是一次彻底的二进制协议,头信息和数据体都是二进制,并且统称为"帧":头信息帧和数据帧。。
  • 多路复用: 复用TCP连接,在一个连接里,客户端和浏览器都可以同时发送多个请求或回应,且不用按顺序一一对应,这样子解决了队头阻塞的问题。。
  • **头部压缩:**头部压缩 HTTP 1.1版本会出现 等字段可能会占用几百甚至几千字节,而 Body 却经常只有几十字节,所以导致头部偏重。HTTP 2.0 使用 HPACK 算法进行压缩。。
  • 服务端推送: 允许服务器未经请求,主动向客户端发送资源,即服务器推送。
  • **请求优先级:**可以设置数据帧的优先级,让服务端先处理重要资源,优化用户体验

HTTP状态码

表示客户端HTTP请求的返回结果、标识服务器处理是否正常、表明请求出现的错误等。

1xx 信息类

接受的请求正在处理,信息类状态码。

2XX成功(这系列表明请求被正常处理了)
200OK,表示从客户端发来的请求在服务器端被正确处理
204No content,表示请求成功,但响应报文不含实体的主体部分
206Partial Content,进行范围请求成功
3XX重定向(表明浏览器要执行特殊处理)
301moved permanently,永久性重定向,表示资源已被分配了新的 URL
302found,临时性重定向,表示资源临时被分配了新的 URL
303see other,表示资源存在着另一个 URL,应使用 GET 方法获取资源(对于301/302/303响应,几乎所有浏览器都会删除报文主体并自动用GET重新请求)
304not modified,表示服务器允许访问资源,但请求未满足条件的情况(与重定向无关)
307temporary redirect,临时重定向,和302含义类似,但是期望客户端保持请求方法不变向新的地址发出请求
4XX客户端错误
400bad request,请求报文存在语法错误
401unauthorized,表示发送的请求需要有通过 HTTP 认证的认证信息
403forbidden,表示对请求资源的访问被服务器拒绝,可在实体主体部分返回原因描述
404not found,表示在服务器上没有找到请求的资源
5XX服务器错误
500internal sever error,表示服务器端在执行请求时发生了错误
501Not Implemented,表示服务器不支持当前请求所需要的某个功能
503service unavailable,表明服务器暂时处于超负载或正在停机维护,无法处理请求

HTTP的请求方法

GET方法:发送一个请求来获取服务器上的某一些资源。

POST方法:向URL指定的资源提交数据或附加新的数据。

PUT方法:跟POST方法一样,可以向服务器提交数据,但是它们之间也所有不同,PUT指定了资源在服务器的位置,而POST没有哦。

DELETE方法:删除服务器上的某资源。

HEAD方法:指请求页面的首部

HTTP对比HTTPS

HTTPHTTPS
传输方式明文传输,网站或相关服务与用户之间的数据交互无加密,容易被监听,篡改。在HTTP加入了SSL层,用于数据传输加密
身份认证无任何身份认证,用户无法通过http辨认出网站的真实身份。经过CA多重认证,包含域名管理权限认证等。
需要成本无任何使用成本,所有网站默认是http模式。需要申请SSL证书来实现https。
连接端口80端口。443端口。

TCP

TCP是面向连接的、可靠的、基于字节流的传输层协议

  • 面向连接;所谓面向连接,指的是客户端与服务端的连接,在双方互相通信之前,TCP需要三次握手建立连接,而UDP没有相应的建立连接的过程

  • 可靠性;TCP可靠性主要体现在1 有状态 2 可控制

  • 面向字节流;UDP数据传输基于数据报,仅仅是继承了IP层的特性,而TCP为维护状态,将IP包变成了字节流

    有状态;TCP会精准记录哪些数据发送了,被对方接受了,哪些没有,而保证数据按序到达,不允许差错

    可控制;意识到丢包或者网络环境差,TCP根据具体情况调整自己的行为,控制自己发送速度或重发

TCP三次握手的过程

三次握手要确认双方的两样能力:发送能力与接收的能力。

第一次握手,建立连接时,客户端发送SYN包到服务器,并进入SYN_SENT状态,等待服务器确认,其中SYN就是同步序列编号。

客户端注重发起连接,发送SYN,自己变成了SYN-SENT状态

第二次握手,服务器收到SYN包,必须确认客户的SYN,同时自己也发送一个SYN包,即是SYN+ACK包,此时服务器进入SYN_RECV状态。

服务端收到,返回SYN和ACK(对应客户端发来的SYN),自己变成了SYN-RECD

第三次握手,客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK,此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。

客户端再发送ACK给服务端,自己变成ESTABLISHED(established)状态;服务端收到ACK之后,也变成这个状态

TCP四次挥手断开连接

断开一个TCP连接需要四次挥手

第一次挥手

主动关闭的一方,发送一个FIN,传送数据,用来告诉对方(被动关闭方),说不会再给你发送数据了。---主动关闭的一方可以接受数据。

( )

第二次挥手

被动关闭方 收到 FIN 包,发送 ACK 给对方,确认序号。

(服务端接收后通知应用进程并向客户端发送ACK确认)

第三次挥手

被动关闭方 发送一个 FIN,关闭方,说我不会再给你发数据了。(你不给我发送数据,我也不给你发送数据了)

(服务端处理完后被动关闭再次向客户端发送FIN以及ACK,进入LAST-ACK状态)

第四次挥手

主动关闭一方收到 FIN ,发送要给 ACK ,用来确认序号

(客户端收到服务端发来的FIN后,发送 ACK 给服务端。在等待2MSL后进入CLOSED状态)

HTTP代理的理解,你能回答上来不?

代理服务器功能:

1,负载均衡,

2,保障安全(利用心跳机制监控服务器,一旦发现故障机就将其踢出集群。),

3,缓存代理。

理解代理缓存:

由一个代理服务器下载的页面存储;

一个代理服务器为多个用户提供一条通道;

缓冲的代理允许一个代理服务器减少对同一个网站的同样页面的请求次数

一旦代理服务器的一个用户请求了某个页面,代理服务器就保存该页面以服务于它的其他用户的同样的请求

代理缓存,这种处理减少了用户等待页面显示的时间

web性能优化技术有哪些(减少客户端网络延迟和优化页面渲染性能来提升web性能)

优化技术:

  • DNS查询优化
  • 客户端缓存
  • 优化TCP连接
  • 避免重定向
  • 网络边缘的缓存
  • 条件缓存
  • 压缩和代码极简化
  • 图片优化

如何进行网站性能优化

  1. 内容方面,减少Http请求(合并文件,css精灵,inline Image),减少DNS查询(DNS缓存,将资源分布到合适的数量的主机名),减少DOM元素的数量。

  2. Cookie方面,可以减少Cookie的大小。

  3. css方面,将样式表放到页面顶部;不使用css表达式;使用<link>不使用@import;可将css从外部引入;压缩css。

  4. JavaScript方面,将脚本放到页面底部;将JavaScript从外部引入;压缩JavaScript,删除不需要的脚本,减少DOM的访问。

  5. 图片方面,可优化css精灵,不要再HTML中拉伸图片,优化图片(压缩)

  6. 有哪些渲染优化呢?😝

    第一,我们可以禁止使用iframe

    第二,可以禁止使用gif图片来实现loading效果,降低CPU的消耗,来提升渲染性能,

    第三,使用CSS3代码来代替JS动画。

    对于一些小图标,可以使用base64位编码,以减少网络请求,但不建议大图使用,因为比较耗费CPU,小图标优势在于,可以减少HTTP请求,避免文件跨域,修改及时生效。

    页面头部的style和script会阻塞页面,在Renderer进程中的JS线程和渲染线程是互斥的。

从浏览器地址栏输入url到显示页面的步骤

简单说说,浏览器根据请求的url交给DNS域名解析,查找真正的IP地址,向服务器发起请求;服务器交给后台处理后,返回数据,浏览器会接收到文件数据,比如,html、js、css、图像等;然后浏览器会对加载到的资源进行语法解析,建立相应的内部数据结构;载入解析到得资源文件,渲染页面,完成显示页面效果。

那就再次详细一下,咳咳,从浏览器接收url,开始进行网络请求线程,发出一个完整的HTTP请求,从服务器端接收请求到对应的后台接收到请求,然后是后台和前台的http交互;其中的缓存问题(http的缓存),浏览器接收到http数据包后的解析流程,css的可视化格式模型,js引擎解析过程等;其他呈现页面效果。

浏览器缓存

image-20210717161634179

l 览器缓存分为强缓存和协商缓存,当客户端请求某个资源时,获取缓存的流程如下

² 先根据这个资源的一些 http header 判断它是否命中强缓存,如果命中,则直接从本地获取缓存资源,不会发请求到服务器。

² 强缓存没有命中时,客户端会发送请求到服务器,服务器通过另一些 request header 验证这个资源是否命中协商缓存,称为 http 再验证,如果命中,服务器将请求返回,但不返回资源,而是告诉客户端直接从缓存中获取,客户端收到返回后就会从缓存中获取源。

² 强缓存和协商缓存共同之处在于,如果命中缓存,服务器都不会返回资源; 区别是,强缓存不对发送请求到服务器,但协商缓存会。

² 当协商缓存也没命中时,服务器就会将资源发送回客户端。

² 当 ctrl+f5 强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存。

² 当 f5 刷新网页时,跳过强缓存,但是会检查协商缓存。

l 强缓存

² Expires 该字段是 http1.0 时的规范,值为一个绝对时间的 GMT 格式的时间字串,代表缓存资源的过期时间

² Cache-Control:max-age 该字段是 http1.1 的规范,强缓存利用其 max-age 值来判缓存资源的最大生命周期,它的值单位为秒

l 协商缓存

² Last-Modified 值为资源最后更新时间,随服务器 response 返回

² If-Modified-Since 通过比较两个时间来判断资源在两次请求期间是否有过修改,如果没有修改,则命中协商缓存

² ETag 表示资源内容的唯一标识,随服务器 response 返 回

² If-None-Match 服务器通过比较请求头部的 If-None-Match 与当前资源的 ETag 是否一致来判断资源是否在两次请求之间有过修改,如果没有修改,则命中协商缓存

面试题目

  1. 网页中的图片资源为什么分放在不同的域名下?
  2. 浏览器与服务器建立一个TCP连接后,是否会在完成一个http请求后断开?什么条件下会断开?
  3. 一个TCP连接可以同时发送几个HTTP请求?
  4. 浏览器http请求的并发性是如何体现的?并发请求的数量有没有限制?

最后一句

这是沉曦的学习心得!若有不正,还望斧正。希望掘友们不要吝啬对我的建议哦,回见。