前端还是要了解一下的网络协议相关滴!

964 阅读23分钟

TCP、UDP的区别 ?

1)TCP是面向连接的(三次握手,四次挥手),UDP是无连接的; 

(2)TCP提供可靠的服务,通过TCP连接传输的数据无差错、不丢失、不重复,且按序到达(拥塞控制);UDP则是尽最大努力交付,但是不保证可靠性; 

(3)TCP是面向字节流,UDP面向报文(UDP 只是报文的搬运工,不会对报文进行任何拆分和拼接操作);

(4)TCP只能端对端;UDP支持一对一、多对多、一对多、多对一;

(5)TCP的首部较大,约有20字节;UDP有8字节(所以UDP具有高效性);

拥塞控制相关博客:blog.csdn.net/m0_37962600…

TCP、UDP头部相关博客:blog.csdn.net/xiaoxianerq…

三次握手以及四次挥手?

三次握手:

1.客户端首先发送SYN=1;

2.服务端接收到,然后增加一个ACK=1返回给客户端。(返回给客户端的是ACK=1,SYN=1)

3.客户端需要发送一个消息给服务端进行确认,所以给服务端发送了一个ACK=1;

四次挥手:

1.首先客户端请求关闭与服务端的连接,客户端先发送一个FIN=1;

2.服务端接收到消息后,返回一个ACK=1;

3.在这个状态下实际上一个方向已经关闭了,所以服务端也需要给客户端发送一个FIN=1,ACK=1;

4.客户端接收到后发送ACK=1,表示接收到消息。

HTTP为什么需要三次握手?

如果发送2次就能建立连接的话,可能会出现以下问题:

如果一个连接请求在网络中超时了,在这个时候客户端会重新发送请求,但是最终超时的请求还是会到服务端,服务端接收了两个请求,就会创建出2个连接。浪费了资源。

但是在三次握手的情况下,发生这种情况,多出的一次请求会被抛弃掉。

HTTP为什么需要四次分手?

TCP是双向的,所以需要在服务端和客户端都需要关闭。当客户端关闭和服务端的连接后,依旧是可以接收到服务端的消息的,只是客户端不再往服务端发送消息。

FastTCP

FastTCP被认为是目前全球最先进的电信级TCP/IP协议单边部署加速技术。

FastTCP不修改TCP协议内TCP包头(TCP Packet Header)的标准格式,只对TCP包头里的(Sequence Number, Window Scaling )等数值作修改,并且优化了流量控制的算法,大大提高了TCP流量的效率,从而提高了广域网带宽的利用率。FastTCP对TCP包本身的内容(Payload)和标准的TCP包格式并不作改变。

FastTCP技术特点包括:
1、在现有架构中即插即用,与主要厂商网络设备完全兼容
2、单边部署,客户端不需要安装任何软、硬件
3、完全兼容并加速各种标准及变种TCP协议流量
4、应用软件无须作任何改变
5、能对不可压缩或缓存内容进行加速
6、支持Bypass功能和高可靠组架构,保证网络不会因FastSoft加速器故障而中断
       

        与一般的TCP相比,FASTTCP的不同主要表现在三个方面:首先,它是一个基于平衡(Equilibrium)的算法,因此消除了包级振荡;第二:它使用队列时延(Queuing Delay)作为主要的拥塞测量,在高速、长距离网络的中,队列时延对拥塞的测量比丢包率具有更高的可靠性;第三,它具有稳定的流动态性,能够在平衡状态获得加权指数级的公平性,且不会给长距离TCP流不公正的待遇。 FASTTCP拥塞控制算法可分为四个部分,其中,数据控制(Data Control)部分决定哪些包将要被发送,窗口控制(Window Control)部分决定要发送多少个包,爆发控制(Burstiness Control) 部分决定何时发送这些包,这些决定都是在估计(Estimation)部分提供的信息的基础上作出的。窗口控制以往返时间为时标控制TCP包传输,而爆发控制工作在一个较小的时标。

——估计部分:该估计信息被其它三部分使用。当收到肯定确认,将RTT平滑计算到平均RTT;当收到否定确认,将生成丢失指示。
——窗口控制:使用队列时延作为其主要的拥塞测量。在一般的网络条件下,FastTCP周期性的根据平均RTT来更新拥塞窗口。当网络的流式样或者拓扑结构改变时平衡点会发生偏移,FASTTCP采用平衡性和公平性算法实现效率最大化。
——数据控制:从候选池中选择下一次要发送的数据包:新数据包,被否定确认的包,或传输后还未被确认的包。数据控制部分决定如何将三个候选池中数据包混合发送。特别是在当前带宽-时延积越来越大的情况下,这个决定变得尤其重要。
——爆发控制:爆发控制部分通过使用一种类流方式追踪可用带宽,以达到平滑数据包发送的目的。FASTTCP使用两种爆发控制机制,一个补充流出的单个包的自同步,另一个使用小爆发使窗口平滑的增加。

什么是XSS,如何防御?什么是CSRF,如何防御?

XSS(跨站脚本攻击)

XSS攻击指的是攻击者在网站上注入恶意的代码,通过恶意脚本对客户端网页进行篡改,从而在客户浏览网页的时候,对用户浏览器进行控制或获取用户的隐私数据。

XSS防御

1.httpOnly防止劫取Cookie,浏览器禁止JavaScript去访问带有HttpOnly属性的Cookie。(注意:HttpOnly并不是阻止了XSS,而是能够阻止XSS攻击后的Cookie劫持攻击。)

2.输入、输出检查(针对<>这一类的特殊字符)。

3.CSP

CSP 本质上也是建立白名单,规定了浏览器只能够执行特定来源的代码。

通常可以通过 HTTP Header 中的 Content-Security-Policy 来开启 CSP

只允许加载本站资源    Content-Security-Policy: default-src ‘self’

只允许加载 HTTPS 协议图片   Content-Security-Policy: img-src https://*

允许加载任何来源框架  Content-Security-Policy: child-src 'none'

CSRF(跨站请求伪造)

CSRF指的是劫持受信任用户向服务器发送非预期请求。

CSRF防御

1.验证码

2.token

3.referer,http头中又一个字段叫做referer,它记录了该HTTP请求的来源地址。通过Referer Check能够检查请求是否来自合法的源。

4.SameSite

可以对 Cookie 设置 SameSite 属性。该属性设置 Cookie 不随着跨域请求发送。

其他网络安全相关(包含XSS、CSRF、SQL注入、clickjacking攻击):www.cnblogs.com/liqiongming…

介绍下如何实现 token 加密

  1. 需要一个secret

  2. 后端利用secret和加密算法,返回前端

  3. 前端每次request在header中带上token

  4. 后端用同样的算法解密

强缓存和协商缓存(包括浏览器机制)

缓存分为强缓存和协商缓存。

强缓存不过服务器,协商缓存需要过服务器,协商缓存返回的状态码是304。

两类缓存机制可以同时存在,强缓存的优先级高于协商缓存。当执行强缓存时,如若缓存命中,则直接使用缓存数据库中的数据,不再进行缓存协商。

强缓存

Expires(HTTP1.0):

Expires的值为服务端返回的数据到期时间。当再次请求时的请求时间小于返回的此时间,则直接使用缓存数据。

缺点:使用的是绝对时间,如果服务端和客户端的时间产生偏差,那么会导致命中缓存产生偏差。

Pragma(HTTP1.0):

当值为"no-cache"时强制验证缓存,服务端响应添加'Pragma': 'no-cache',浏览器表现行为和刷新(F5)类似。

Cache-Control(HTTP1.1):

  • private:客户端可以缓存

  • public:客户端和代理服务器都可以缓存

  • max-age=t:缓存内容将在t秒后失效

  • no-cache:需要使用协商缓存来验证缓存数据

  • no-store:所有内容都不会缓存 

协商缓存

1、浏览器第一次请求数据时,服务器会将缓存标识与数据一起响应给客户端,客户端将它们备份至缓存中。

2、再次请求时,客户端会将缓存中的标识发送给服务器,服务器根据此标识判断。若未失效,返回304状态码,当浏览器拿到此状态码就可以直接使用缓存数据了。

相关的http头部

1.etag -- if-none-match

        1)如果缓存中有ETag 令牌,客户端请求时会自动在“If-None-Match” HTTP 请求标头内提供 ETag 令牌。

        2)服务器根据当前资源核对令牌,验证是否发生变化,将验证结果通知给客户端,客户端根据结果看看是否需要从缓存中读取还是发送资源请求。

参考文献:www.jianshu.com/p/3e2afe089…

2.last-modified -- if-modified-since

Last-Modified 是由服务器往客户端发送的 HTTP 头,另一个 If-Modified-Since是由客户端往服务器发送的头。

blog.csdn.net/tianmohust/…

缓存的场景

1、不需要缓存使用 Cache-control: no-store。

2、频繁变动的资源使用 Cache-Control: no-cache 并配合 ETag 使用,表示该资源已被缓存,但是每次都会发送请求询问资源是否更新。

3、对于代码文件来说,通常使用 Cache-Control: max-age=31536000 配合策略缓存使用,然后对文件进行指纹处理,一旦文件名变动就会立刻下载新的文件。

DNS解析时,有什么算法和方式减少重复操作?

DNS解析的时候可以使用DNS缓存去减少重复操作。

DNS缓存有浏览器DNS缓存、系统DNS缓存、路由DNS缓存、服务商DNS缓存。

DNS有两种查询的方式,分为递归查询和迭代查询。

递归查询是访问根域名服务器,根域名服务器层层下发,找到目标域名的IP地址后返回。

迭代查询是访问根域名服务器后,根域名服务器返回一个其他DNS服务器的地址,然后再向其他DNS服务器去查询。

DNS缓存

在浏览器中输入URL的时候,DNS会根据域名找到对应的IP地址。

在DNS查找目标域名对应的IP地址的时候,首先会去访问浏览器缓存,看最近访问的网址中有没有目标域名。如果没有则会访问系统DNS缓存中的是否存在,依旧不存在则会去路由缓存中查找,但是还是不存在的话就会去ISP服务商的缓存中查找是否有目标域名的IP地址。

如果缓存中都不存在则会访问根域名服务器去查找目标域名的IP地址,根域名服务器会层层下发直到找到对应域名的IP地址为止。

Cookie 和Session、LocalStorage

生命周期:

cookie:可设置失效时间,没有设置默认是关闭浏览器后失效。

localStorage:除非被手动清除,否则将会永久保存。

sessionStorage: 仅在当前网页会话下有效,关闭页面或浏览器后就会被清除。

存放数据大小:

cookie:4KB左右

localStorage和sessionStorage:可以保存5MB的信息。

http请求:

cookie:每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题

localStorage和sessionStorage:仅在客户端(即浏览器)中保存,不参与和服务器的通信

缓存位置

1.from Service Worker

2.from memory cache

3.from disk cache

Service Worker

Service Worker相比于LocalStorage、SessionStorage,后两者只是单纯的接口数据缓存,而前者可以缓存静态资源,甚至拦截网络请求,根据网络状况作出不同的缓存策略。

memory cahce

事实上,所有的网络请求都会被浏览器缓存到内存中。但是缓存不能无限存放在内存中,因为内存是有限的。 内存缓存的控制权在浏览器,前后端都不能干涉。

disk cache 

disk cache也叫http cahce,它将资源缓存在硬盘中,因为其严格遵守http响应头的字段来判断哪些资源是否要被缓存,哪些资源是否已经过期。缓存的控制权在后端。

localStorage和sessionStorage

localStorage永久保存在浏览器里面(在没被清除的情况下),sessionStorage是关闭网页就清除了信息。

localStorage可以用来跨页面(跨窗口)传递参数,而sessionStorage用来保存一些临时的数据,防止用户刷新页面之后丢失了一些参数。

WebSocket

WebSocket 是在最初建立连接时需要借助于现有的HTTP协议,通信是基于TCP的。

通过WebSocket可以在客户端和服务器之间以数据流的形式实现各种应用数据交换(包括JSON 及自定义的二进制消息格式),而且两端都可以随时向另一端发送数据。

Keep-alive

Connection:Keep-alive

HTTP协议采用“请求-应答”模式。

在不开启KeepAlive模式时,每个req/res客户端和服务端都要新建一个连接,完成后立即断开连接(HTTP协议为无连接的协议);

当开启Keep-Alive模式(又称持久连接、连接重用)时,Keep-Alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接。

HTTP各个版本

相对于HTTP1.0,HTTP1.1的优化:

1、缓存处理:多了Entity tag,If-Unmodified-Since, If-Match, If-None-Match等缓存信息(HTTTP1.0 If-Modified-Since,Expires)

2、带宽优化及网络连接的使用

3、错误通知的管理

4、Host头处理

5、长连接: HTTP1.1中默认开启Connection: keep-alive。

相对于HTTP1.1,HTTP2的优化:

  • HTTP2支持二进制传送(实现方便且健壮),HTTP1.x是字符串传送

  • HTTP2支持多路复用(多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息

  • HTTP2采用HPACK压缩算法压缩头部,减小了传输的体积

  • HTTP2支持服务端推送

HTTP/2的多路复用

HTTP/2引入二进制数据帧的概念,其中帧对数据进行顺序标识,如下图所示,这样浏览器收到数据之后,就可以按照序列对数据进行合并,而不会出现合并后数据错乱的情况。同样是因为有了序列,服务器就可以并行的传输数据,这就是所做的事情。

  • 解决第二个问题:HTTP/2对同一域名下所有请求都是基于,也就是说同一域名不管访问多少文件,也只建立一路连接

然后还多了个HTTP3.0

QUIC新功能

1、0-RTT

通过使用类似 TCP 快速打开的技术,缓存当前会话的上下文,在下次恢复会话的时候,只需要将之前的缓存传递给服务端验证通过就可以进行传输了。0RTT 建连可以说是 QUIC 相比 HTTP2 最大的性能优势

2、多路复用

同HTTP2.0一样,同一条 QUIC连接上可以创建多个stream,来发送多个HTTP请求,但是,QUIC是基于UDP的,一个连接上的多个stream之间没有依赖。假如stream2丢了一个UDP包,不会影响后面跟着 Stream3 和 Stream4,不存在 TCP 队头阻塞。虽然stream2的那个包需要重新传,但是stream3、stream4的包无需等待,就可以发给用户。

另外QUIC 在移动端的表现也会比 TCP 好。因为 TCP 是基于 IP 和端口去识别连接的,这种方式在多变的移动端网络环境下是很脆弱的。但是 QUIC 是通过 ID 的方式去识别一个连接,不管你网络环境如何变化,只要 ID 不变,就能迅速重连上。

3、加密认证的报文

TCP 协议头部没有经过任何加密和认证,所以在传输过程中很容易被中间网络设备篡改,注入和窃听。但是 QUIC 的 packet中除了个别报文比如 PUBLIC_RESET 和 CHLO,所有报文头部都是经过认证的,报文 Body 都是经过加密的。

4、向前纠错机制

QUIC协议能够向前纠错 ,由于每个数据包除了它本身的内容之外,还包括了部分其他数据包的数据,因此少量的丢包可以通过其他包的冗余数据直接组装而无需重传。

HTTP2.0的多路复用和HTTP1.X中的长连接复用有什么区别?

  • HTTP/1.* 一次请求-响应,建立一个连接,用完关闭;每一个请求都要建立一个连接;

  • HTTP/1.1 Pipeling解决方式为,若干个请求排队串行化单线程处理,后面的请求等待前面请求的返回才能获得执行机会,一旦有某请求超时等,后续请求只能被阻塞,毫无办法,也就是人们常说的线头阻塞;

  • HTTP/2多个请求可同时在一个连接上并行执行。某个请求任务耗时严重,不会影响到其它连接的正常执行;

websocket和长连接区别

长连接:建立SOCKET连接后不管是否使用都保持连接。

长连接:连接->传输数据->保持连接 -> 传输数据-> ........ ->关闭连接。

WebSocket: 浏览器和服务器只需要要做一个握手的动作,在建立连接之后,双方可以在任意时刻,相互推送信息。同时,服务器与客户端之间交换的头信息很小。

长轮询和短轮询是什么?

 短轮询指浏览器向服务器发送一个请求,询问是否有数据更新,服务里立刻返回响应。一段时间后浏览器又发起一个到服务器的新请求。 

长轮询指浏览器向服务器发送一个请求,服务一直保持连接打开,直到有数据可发送,发送完数据后,浏览器关闭连接,随即又发起一个到服务器的新请求。(使用XHR对象和setTimeout()实现) 

常见的HTTP状态码

100:表示请求头已经发送到服务端,服务端表示允许访问,需要客户端再发送主体部分

200:表示请求成功

204:No content,表示请求成功,但响应报文不含实体的主体部分

206:处理了部分请求

301:永久重定向,请求的网页已永久移动到新地址。

302:临时重定向

303:see other,请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。 

304:no modify,自从上次请求后,请求的网页未修改过。

305:请求者只能使用代理访问请求的网页

307:临时重定向

400:服务器不理解请求的语法

401:请求要求身份验证 

403:服务器拒绝请求 

404:服务器找不到请求的网页

405:禁用请求中指定的方法

406:无法使用请求的内容特性响应请求的网页

500:服务器内部错误,无法完成请求

501:服务器不具备完成请求的功能

502:错误网关

503:服务不可用

504:网关超时

浏览器是如何渲染页面的

1、编码: 先将HTML的原始字节数据转换为文件指定编码的字符。 

2、令牌化: 然后浏览器会根据HTML规范来将字符串转换成各种令牌(如<html>、<body>这样的标签以及标签中的字符串和属性等都会被转化为令牌,每个令牌具有特殊含义和一组规则)。

3、生成对象: 接下来每个令牌都会被转换成定义其属性和规则的对象。 

4、构建完毕: DOM树构建完成,整个对象集合就像是一棵树形结构。 

5、当HTML代码遇见<link>标签时,浏览器会发送请求获得该标签中标记的CSS文件,构建CSSOM树。  

6、在构建了DOM树和CSSOM树之后,将DOM树与CSSOM树结合在一起成渲染树。 

7、渲染树构建完毕后,浏览器得到了每个可见节点的内容与其样式,然后计算每个节点在窗口内的确切位置与大小,也就是布局阶段。 

8、当Layout布局事件完成后,浏览器会立即发出Paint Setup与Paint事件,开始将渲染树绘制成像素。

GET和POST的区别

1、Get 请求能缓存,Post 不能。

2、Post 相对 Get 安全一点点,因为Get 请求都包含在 URL 里,且会被浏览器保存历史纪录,但是Post 不会。在抓包的情况下都是一样的。

3、Post 可以通过 request body来传输比 Get 更多的数据,但是Get不行。

4、URL有长度限制,会影响 Get 请求,这个长度限制是浏览器规定的。

5、Post 支持更多的编码类型且不对数据类型限制。

URL输入浏览器的整个过程

(1)、DNS缓存

(2)、TCP的三次握手

(3)、浏览器页面的渲染

(4)、TCP的四次握手

回流和重绘

什么时候会发生回流:

1、添加或删除可见的DOM元素

2、元素的位置发生变化

3、元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)

4、内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代。

5、浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)

何时发生重绘(回流一定会触发重绘):

当页面中元素样式的改变并不影响它在文档流中的位置时(例如:color、background-color、visibility等),浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。

如何避免触发回流和重绘:

CSS:

1、避免使用table布局。

2、尽可能在DOM树的最末端改变class。

3、避免设置多层内联样式。

4、将动画效果应用到position属性为absolute或fixed的元素上

5、避免使用CSS表达式(例如:calc())

6、CSS3硬件加速(GPU加速)

JavaScript:

1、避免频繁操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性

2、避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中

3、也可以先为元素设置display: none,操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘

4、避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来

5、对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流 

HTTPS的握手

1、客户端向服务端发送消息,发送的信息包含 SSL 版本、客户端支持的加密套件和使用的数据压缩算法及随机数1。

2、服务器响应客户端消息,返回的信息包含选定的加密套件、选定的数据压缩方法、会话标识,数字证书及另一个随机数2。

3、客户端验证服务器的SSL数字证书的有效性,如果不通过则提示警告。

4、客户端发送密钥交换的消息。消息包含随机数3。

5、客户端使用加密运算将所有随机数转化为 master secret。

6、服务器使用加密运算将所有随机数转化为 master secret。

7、客户端告知服务器之后使用协商好的对称加密算法生成的密钥通信。

8、服务器告知客户端之后使用协商好的对称加密算法生成的密钥通信。

9、SSL握手结束,接下去使用对称加密算法进行加密通信。

介绍下 HTTPS 中间人攻击

中间人攻击过程如下:

  1. 服务器向客户端发送公钥。

  2. 攻击者截获公钥,保留在自己手上。

  3. 然后攻击者自己生成一个【伪造的】公钥,发给客户端。

  4. 客户端收到伪造的公钥后,生成加密hash值发给服务器。

  5. 攻击者获得加密hash值,用自己的私钥解密获得真秘钥。

  6. 同时生成假的加密hash值,发给服务器。

  7. 服务器用私钥解密获得假秘钥。

  8. 服务器用加秘钥加密传输信息

防范方法:

  1. 服务端在发送浏览器的公钥中加入CA证书,浏览器可以验证CA证书的有效性

为什么利用多个域名来存储网站资源会更有效?

1.CDN缓存更方便;

2.突破浏览器并发限制;

3.节约cookie带宽;

4.节约主域名的连接数,优化页面响应速度;

5.防止不必要的安全问题。

谈一谈对CDN的理解

(1)节省骨干网带宽,减少带宽需求量;

(2)提供服务器端加速,解决由于用户访问量大造成的服务器过载问题;

(3)服务商能使用Web Cache技术在本地缓存用户访问过的Web页面和对象,实现相同对象的访问无须占用主干的出口带宽,并提高用户访问因特网页面的相应时间的需求;

(4)能克服网站分布不均的问题,并且能降低网站自身建设和维护成本;

(5)降低“通信风暴”的影响,提高网络访问的稳定性。

osi模型

物理层、数据链路层、网络层、传输层、会话层、表示层、应用层;