前端学习知识点总结------网络通信（1）

1.简述从浏览器输入网址到显示的完整过程

当前文档卸载、重定向处理、缓存判断、DNS解析查询、建立TCP连接、HTTP请求/响应处理、HTML文档解析，渲染，生成页面

2.谈谈osi七层模型和tcp/ip五层模型

osi七层模型是一种理论模型，tcp/Ip模型为实际使用中的模型，osi七层模型分别为物理层、数据链路层、网络层、传输层、会话层、表示层、应用层，而tcp/ip模型将其中的物理层和数据链路层划分成了网络接口层，将会话层、表示层、应用层划分成了应用层。

物理层主要指像网线、光纤、中继器等这种网络传输的物理设备，数据传输单位为bit

数据链路层为网桥、以太网交换机等进行的传输，数据传输的单位为帧

网络层任务为选择合适的网间路由和交换节点，数据传输单位为数据包，代表协议有ip、ipx协议等

传输层提供了主机之间的交互，数据单元也为数据包，拥有代表性的tcp，udp协议

应用层提供程序之间的交互，它的代表协议为http、dns、ftp、smtp、ntp等

3.谈谈304缓存

缓存分为强缓存和协商缓存两种，

强缓存指的是浏览器直接通过请求的头信息判断本地缓存是否过期，没有过期则直接使用本地缓存数据

与强缓存相关的字段有expires、cache-control，expires是一个绝对时间，代表资源超过某个时间节点后就需要重新向服务器发送请求，但如果服务器时间出现误差，就会导致数据缓存出现偏差，而cache-control则是相对时间，代表经过某个时间段后需要向服务器重新发送请求，如果cache-control与expires同时存在的话，cache-control的优先级高于expires

如果强缓存过期了，则使用协商缓存，客户端发送请求判断资源是否发生变化，如果未发生变化则使用本地缓存，发生变化则重新请求资源

与协商缓存相关的字段有Last-Modified/If-Modified-Since、Etag/If-None-Match，Last-Modified/If-Modified-Since中的Last-Modified是服务端发送给客户端的资源最后发生修改的时间，下次客户端发送请求就会把这个时间作为If-Modified-Since字段发送，来和服务器资源最后修改时间对比判断资源是否发生了修改，Etag/If-None-Match中的Etag则是一个代表资源的字符串，当资源发生改变时，它也会发生变化，客户端和服务端则通过对比字符串是否相同来判断资源是否发生了变化

4.tcp三次握手、四次挥手

三次握手：

tcp三次握手的核心通俗点来说就是确认对方能否收到我发送的消息

第一次:客户端向服务端发送请求连接

第二次:服务端收到消息后对其作出回应给客户端

第三次:客户端收到回应后再给服务端发送确认消息

站在客户端的立场上，它在第一次中给服务端发送了消息，第二次中收到了回应，代表已经确认了服务端能收到客户端发送的消息，并在第三次对此作出了回应

站在服务端的立场上，它在第二次中给服务端发送了消息，第三次中收到了回应，代表已经确认了客户端能收到服务端发送的消息，如果缺少第三次握手，服务端就不能确认自己第二次发送的响应消息是否被客户端接收，假设没有被接收到，但服务端并不知道，它只会继续传输数据，而数据也无法被接收

四次挥手：

第一次:客户端向服务端发送请求断开连接

第二次:服务端收到消息后向客户端作出响应：服务端已经收到消息，但需要判断资源是否都传输完成，传输完成后则会给客户端发送第二次回应

第三次:服务端已经处理完资源传输，向客户端发送可以断开连接了的消息

第四次：客户端对第三次消息作出回应，并进入等待时间，服务端收到消息后断开连接

ps1：关于客户端进入等待是因为如果客户端的第四次挥手服务端迟迟没有接收到，服务端就会重新进行第三次挥手，而如果客户端已经断开连接了，就无法进行第四次挥手了，所以客户端会进入等待时间，如果重新收到了第三次挥手，就会重新进行第四次挥手，并重新计时等待

ps2：如果已经建立了连接，但是客户端突然出现故障了怎么办？

客户端如果出现故障，服务器不会一直等下去，TCP设有一个保活计时器，服务器每收到一次客户端的请求后都会重新复位这个计时器，时间通常是设置为2小时，若两小时还没有收到客户端的任何数据，服务器就会发送一个探测报文段，以后每隔75秒钟发送一次。若一连发送10个探测报文仍然没反应，服务器就认为客户端出了故障，接着就关闭连接。

5.tcp和udp连接的区别

TCP是面向连接的，udp发送数据前不需要先建立链接

TCP只能是1对1的，UDP支持1对1,1对多

TCP的首部较大为20字节，而UDP只有8字节

TCP是面向连接的可靠性传输，而UDP是不可靠的

6.谈谈http1.0/1.1/2.0/3.0/https

http协议是网络传输模型中的应用层的一种超文本传输协议，它是目前是基于tcp的一种协议，它常用的请求方式为get和post。

http1.0：

在http1.0中规定浏览器和服务器只保持短连接，每次请求完成后都会断开tcp连接，在下次请求时再重新与服务器建立tcp连接

http1.1：

基于http1.0的每次请求都要建立重新tcp连接十分消耗资源的问题，http1.1中支持了长连接，在一个tcp连接上可以发送多个请求和响应，一定程度弥补了http1.0的缺点

新增了管道技术，不用等上次请求结果返回，就能发送下次请求，客户端可以同时开启多达6个tcp连接，在客户端并行传输，服务端串行按传输顺序接收

新增了关于缓存的缓存头，cache-control、Etag、 If-None-Match等

新增了put、delete等多种请求方式

在HTTP1.0中认为每台服务器都绑定一个唯一IP地址，但随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机，并且它们共享一个IP地址，所以HTTP1.1的请求消息和响应消息都支持host域来区分同一IP的不同主机，且请求消息中如果没有host域会报错

新增了24个错误状态响应码

http1.0每次传输中断或出现错误时，会重新开始传输，在http1.1中支持断点续传

http2.0:

将数据拆分成了更小的信息或帧，并对它们进行二进制编码，再进行传输

http2.0启用了多路复用，所有的请求通过一个tcp连接传输，浏览器和服务器可以同时发送多个请求和响应，不用顺序一一对应，减少了服务器压力，提升了访问速度

基于https，提高了安全性

http1.x只能单向请求，http2.0启用了服务器推送

可以指定数据的优先级

因为消息头带有大量冗余信息，2.0对消息头进行了压缩

http3.0：

http2.0虽然已经极大改善了很多问题，但仍然存在部分问题，因为一直到http2.0，都是基于tcp协议来实现的，http2.0解决了http的队头阻塞问题，但并没有解决tcp的队头阻塞问题，在tcp传输过程中会把数据拆分成一个个数据包按序传输接收，如果有数据包没有按顺序到达，就会产生tcp的队头阻塞，面对这个问题，如果对tcp协议进行修改，或者使用新的协议都会因为需要对中间设备更新的巨大影响导致一个协议僵化的问题，所以udp就成了新的载体，基于udp使用QUIC技术改造，就是http3.0的产生

https：

https简单来说就是以安全为目标的http通道，它基于http设置了ssl协议，现在为tls协议，和http相比：

https安全性得到了很大的提高

但也拥有不少缺点，如：

https的ssl协议需要额外增加性能开销和金额开销，功能越强大，证书费用也越高，ssl协议需要绑定ip，且同一ip上不能绑定多个域名，ipv4资源经不起如此消耗

ssl协议是基于ca证书的，

https的工作原理最基础类似非对称加密

一般而言，http协议的端口为80，https的端口为443

7.谈谈常用的状态码

200 请求成功

201请求已经成功创建资源文件

202请求已接受，但处理还未完成

203请求成功，但返回的meta信息不在原始的服务器，而是一个副本

204请求成功了，但返回的是一个空资源

205请求完成，请刷新视图重新渲染数据

206服务器成功处理了部分GET请求

301永久重定向

302临时重定向

303查看其它地址

304未修改，进行缓存访问

305使用代理

306已废弃

307临时重定向，和302相似，但用于get请求

400请求语法发生错误

401请求要求用户的身份认证

403请求无权限进行访问

404无法找到在服务端的资源

500服务端发生错误

501服务端不支持请求的功能

502网关向服务端发送了请求，但收到了一个无效响应

503服务器正在维护中

504网关或代理服务器没有及时获取服务端发来的响应

8.什么是跨域？怎么解决

跨域是指在前后端分离后，前端和后端处于不同域下，前端请求后端的资源受到了浏览器同源策略的限制，就形成了跨域问题。我了解的跨域解决方案大概有6种思路，九种方式，分别是：

1.通过jsonp实现跨域：

这种方式原理是利用了script标签可以不受同源策略影响，从不同域名下加载资源，具体实现为使用script标签将数据和回调函数名作为参数发送给服务端，然后服务端传回字符串形式的函数被自动解析为函数执行，但这种方法只能用于get请求。

2.结合iframe实现跨域：

document.domain+iframe:两个页面通过js代码强制设置为相同的document.domain作为基础主域就实现了跨域，但此方案仅限于多级域名的网站，在主域相同，子域不同的情况下进行跨域

location.hash+iframe:两个不同域页面相互通信，通过中间页来实现，不同域之间通过iframe的location.hash单向通信，相同域直接用js通信

window.name+iframe:window的name属性有个特征，在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享同一个window.name,它是持久存在的，并不会因新页面的载入而进行重置，并可以支持长达2MB的name值。

3.postMessage：

这种方式是HTML5中的api，可以用它向其他window对象发送数据，不受跨域问题影响，它接受数据为第一个参数，地址为第二个参数发送数据，利用监听message事件接受数据。

4.跨域资源共享（CORS）：

通过服务端给请求设置请求头来解决跨域，也是应用较广泛的。

5.代理跨域：

因为同源策略是浏览器的安全策略，所以使用一个服务器代理向服务器转发数据

nginx反向代理

通过node实现跨域代理

6.websocket跨域：

websocket是HTML5新增的协议，实现了浏览器和服务器的双向通信，同时也允许跨域

9.谈谈cookie、sessionStorage、localStorage、session

cookie、sessionStorage、localStorage都保存在浏览器端，而session保存在服务端

cookie因为存放在客户端，所以不安全，敏感的信息用session存储

cookie会始终在请求中携带，而webStorage不会自动将数据发送给服务端

cookie的大小只有大约4k左右，很多浏览器都限制一个站点最多保存20个cookie，而webStorage虽然也有限制，但可以达到5M或更大

cookie的生命周期为它设置的时间，sessionStorage仅在当前浏览器窗口关闭前有效，localStorage始终有效，窗口或浏览器关闭也一直保存

sessionStorage不会在不同的浏览器窗口中共享，即使是同一个页面，而localStorage和cookie在所有同源窗口都是共享的

localstorage可以用来在页面传递参数，sessionstorage可以用来保存一些临时的数据

10.谈谈csrf和xss

XSS为跨站脚本攻击, XSS攻击的主要方式是嵌入一段恶意的JS代码在用户浏览网页时获取用户信息，防范方法为

对用户的输入进行检查过滤

可以设置cookie的httponly属性来禁止js脚本访问cookie

可以设置cookie的secure属性告诉浏览器仅在请求为https的时候发送cookie。

CSRF为跨站请求伪造，为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，防范方法主要为

验证 HTTP Referer 字段

使用token

在 HTTP 头中自定义属性并验证

11.get和post

get和post都是基于tcp连接的http协议的请求方式

get请求参数会拼接在url上，post则是在请求体里，因此get相对post更不安全

get会主动缓存，post并不会

get有请求大小限制，一般在2-8k，post没有限制，但产生限制的原因不是http协议，而是浏览器

GET发送一个TCP数据包，POST发送两个TCP数据包

12.谈谈ajax、fetch、axios

它们都是发送异步请求的方法

ajax是最开始基于XMLHttpRequest对象的一种前后端请求技术，JQuery对其进行了简单封装，它多个请求之间如果有先后关系的话，就会出现回调地狱

axios是一个基于promise实现的前后端请求方式，它本质上也是对XMLHttpRequest的封装，它可以拦截请求响应，自动转换json数据，支持async/await语法，支持并发请求（all/spread>>>promise.all），接收的数据为一个数据包，data为真实响应数据

fetch是HTML5增加的一种api，它也是基于promise实现的，但它是原生js，并不是XMLHttpRequest的封装，它更接近底层，它的post请求会发送两次，第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求，请求第一个参数为地址，第二个为数据，返回的数据解析后返回一个promise对象再获取数据

axios和fetch都是基于promise，所以避免了回调地狱问题，语法也更简洁，但axios封装的功能比fetch更加强大，且XMLHttpRequest有个abort方法可以直接阻断请求, fetch没有abort方法

13.简述浏览器渲染原理

当我们在浏览器地址输入URL时，浏览器会发送请求到服务器，服务器将请求的HTML文档发送回浏览器，浏览器将文档下载下来后，便开始从上到下解析，同时会生成DOM，如果页面中有css，会根据css的内容形成CSSOM，然后DOM和CSSOM会生成一个渲染树，浏览器会根据渲染树的内容计算出各个节点在页面中的确切大小和位置，并将其渲染在浏览器上

当遇到script 标签时，会阻断dom的解析，转而去执行js，这时浏览器会进行首次渲染，这是页面从白屏到首次渲染的时间节点，所以为了提高用户体验，且有一个相对完整的dom树结构，js通常放在最后（css放在最前是为了在生成dom的时候，同时生成cssom，提高性能）

ps：当页面引用的所有 js 同步代码执行完毕，触发 DOMContentLoaded 事件，当html 文档中的图片资源，js 代码中所有异步加载的 css、js 、图片资源都加载完毕之后，load 事件触发

因为是自己总结的知识点，所以可能没有特别完整，希望有错误能指出，谢谢