前端面试知识点整理——网络_前端面试计网考点

1. JPG/JPEG：兼容性高、传输速度快、内存小、有损压缩，存在失真的情况
2. PNG：压缩不失真、透明背景、渐变图像
3. GIF： 静态的GIF和JPG无异，而动态的GIF图片则是由多幅图片保存为一个图片形成动画效果而制成的，图片质量较差
4. BMP：Windows电脑系统的标准图片格式，内存较大、未经压缩、保存了每个像素的信息
5. TIF：可以保证图片在不失真的情况下压缩，且保留图片的分层或是透明信息
6. PSD：Photoshop专属图片格式
7. SVG：矢量图，文本文件，体积小，压缩性更强，图片可无限放大且不失真，兼容性好
8. WebP：是谷歌开发的一种新图片格式，同时支持无损和有损压缩，具有更小的文件体积
   -在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
   -在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
   -WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

六、http与https

https主要是在http的基础上，利用了SSL/TLS来建立安全信道进行数据包的传输。https在这个过程中主要使用了对称加密（有DES、AES等）、非对称加密（RSA）、哈希算法（MD5）和数字证书（CA颁发）等技术，通过这些技术保证了数据传输的完整性、机密性和确保了身份认证（防止中间人攻击）。

SSL握手的过程：

1. 客户端向服务器发送支持的协议版本号、支持的加密算法和一个随机数1
2. 服务端发送确认要使用的加密算法、随机数2，以及自己的数字证书
3. 客户端验证这个数字证书
4. 若证书有效，使用证书里面的公钥来对随机数3（预主密钥）加密，发送给服务端
5. 服务端使用自己的私钥来解密这个随机数3
6. 这时候其实客户端和服务器端都可以使用约定好的加密算法，来对这三个随机数进行加密，生成一个密钥k，这个k就是之后使用对称加密进行对话的密钥值

CA签发证书的过程（申请SSL证书）：
我的理解：其实这个数字证书的目的就是保证了申请人的公钥的权威性，避免中间人攻击

1. 申请者向CA发送签名请求，就是想要获得一个证书认证
2. CA会对这个申请者做一些验证。通过之后，CA会利用自己的私钥来对证书生成数字签名。
   证书中有这样一些信息：证书颁发机构、证书序列号、有效期、证书签名算法、申请者的公钥 、数字签名等等

客户端验证数字证书的过程：

1. 客户端首先会对证书的颁发机构、有效期进行检查，通过查找操作系统内置的受信任的证书发布机构，来确定证书的可信任性。找不到对应的机构浏览器报错，说明证书不可信任。
2. 如果可信任，那么浏览器会从操作系统取出CA的公钥，使用公钥对数字签名进行解密，并与服务端发来的报文摘要相比较，如果相同，则证书合法，取出里面的公钥，用于后序的加密。

七、cdn

八、get、post、put

1、GET方法：对这个资源的查操作。

2、DELETE方法：对这个资源的删操作。但要注意：客户端无法保证删除操作一定会被执行，因为HTTP规范允许服务器在不通知客

户端的情况下撤销请求。

3、HEAD方法：与GET方法的行为很类似，但服务器在响应中只返回实体的主体部分。这就允许客户端在未获取实际资源的情

况下，对资源的首部进行检查，使用HEAD，我们可以更高效的完成以下工作：

在不获取资源的情况下，了解资源的一些信息，比如资源类型；

通过查看响应中的状态码，可以确定资源是否存在；

通过查看首部，测试资源是否被修改；

4、TRACE方法：会在目的服务器端发起一个“回环”诊断，我们都知道，客户端在发起一个请求时，这个请求可能要穿过防火墙、代理、网关、或者其它的一些应用程序。这中间的每个节点都可能会修改原始的HTTP请求，TRACE方法允许客户端在最终将请求发送服务器时，它变成了什么样子。由于有一个“回环”诊断，在请求最终到达服务器时，服务器会弹回一条TRACE响应，并在响应主体中携带它收到的原始请求报文的最终模样。这样客户端就可以查看HTTP请求报文在发送的途中，是否被修改过了。

5、OPTIONS方法：用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。

区别：

1、PUT和POST

PUT和POST都有更改指定URI的语义.但PUT被定义为idempotent（幂等的）的方法，POST则不是.idempotent的方法:如果一个方法重复执行多次，产生的效果是一样的，那就是idempotent的。也就是说：

PUT请求：如果两个请求相同，后一个请求会把第一个请求覆盖掉。（所以PUT用来改资源）

Post请求：后一个请求不会把第一个请求覆盖掉。（所以Post用来增资源）

2、get和post

1、GET参数通过URL传递，POST放在Request body中。

2、GET请求会被浏览器主动cache，而POST不会，除非手动设置。

3、GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

4、Get 请求中有非 ASCII 字符，会在请求之前进行转码，POST不用，因为POST在Request body中，通过 MIME，也就可以传输非 ASCII 字符。

5、 一般我们在浏览器输入一个网址访问网站都是GET请求

6、HTTP的底层是TCP/IP。HTTP只是个行为准则，而TCP才是GET和POST怎么实现的基本。GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。但是请求的数据量太大对浏览器和服务器都是很大负担。所以业界有了不成文规定，（大多数）浏览器通常都会限制url长度在2K个字节，而（大多数）服务器最多处理64K大小的url。

7、GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

8、在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。但并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。
————————————————

九、TCP三次握手和四次挥手

三次握手：
1.建立TCP连接时，客户端向服务器端发送一段TCP报文，标志位为SYN，序号为seq = x，并进入SYN_SENT阶段
2.服务器收到TCP报文后，结束LISTEN阶段，并返回一段TCP报文，标志位为SYN和ACK，序号为seq = y，确认号为ack = x + 1，进入SYN_RCVD阶段。这表明服务器端确认收到客户端的连接请求，并同意建立连接。
3.客户端收到服务器端的确认报文之后，明确了从客户端到服务器端的数据传输是正常的，结束SYN-SENT阶段，并返回最后一段TCP报文，标志位为ACK，序号为seq = x + 1 ，确认号为ack = y + 1，之后客户端和服务器端进入ESTABLISHED阶段。

四次挥手：
1.客户端想要释放连接，向服务器端发送一段TCP报文，标志位为FIN，序号为seq = U，随后客户端进入FIN-WAIT-1阶段，即半关闭阶段。
2.服务器端接受到报文后，确认了客户端想要释放连接，服务器端结束ESTABLISHED阶段，进入CLOSE-WAIT阶段，并返回一段TCP报文，标志位为ACK，序号为seq = V，确认号为 ack = U + 1
3.客户端接受到TCP报文之后，结束FIN-WAIT-1，进入FIN-WAIT-2阶段。
4.服务器端从发出ACK确认报文之后，经过CLOSE-WAIT阶段，做好了释放连接的准备，再次向客户端发送TCP报文，标志位为FIN，序号为 seq = W，确认号为ack = U + 1，进入LAST-ACK阶段。
5.客户端收到报文后，确认了服务器端已经做好释放连接的准备，结束FIN-WAIT-2阶段，进入TIME-WAIT阶段，并在2MSL之后，进入CLOSED。
6.服务器收到报文后，立刻进入CLOSED阶段。

为什么建立3次，释放4次？
答：这是因为在TCP建立过程中，当服务器第一次收到客户端的请求时，服务器可以立刻发送SYN+ACK作为标志位的报文，但是，在释放连接的过程中，当服务器端接受到客户端的释放连接请求时，服务器端并不能立刻释放，还要处理一些数据，因此先返回了带有ACK的确认报文，在准备就绪之后，再发了FIN报文，因此挥手要多一次。

为什么不能用两次握手？（三次握手的作用）
答：作用是实现数据的可靠传输、防止服务器端保持开启一些无用的连接而增加服务器开销，以及防止已失效的连接请求报文段突然又传到了服务器而产生错误，三次握手是双方确认的必备过程。
如果只是两次握手，那么，只有发起方的起始序列号能被确认，另一方的序列号得不到确认。

为什么客户端要等待2MSL？
答：MSL是一段TCP报文在传输过程中的最大生命周期，等待2MSL是客户端为了确认服务端是否收到了请求，若服务端在1MSL内没有收到，那么他会再次向客户端发送FIN报文，最长时间不会超过2MSL。

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

十、前端工程化的理解

1.前端工程化目的是为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间。（工程化可以理解为软件工程方面的东西）
2.前端工程化包括：模块化、组件化、规范化和自动化
3.模块化：就是把一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。
e.g.webpack
4.组件化：模块化只是在文件层面上对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。是一种分治思想。
e.g.vue、react、angular
5.规范化：规范的制定会直接影响到后期的开发质量
目录结构的制定、编码规范、前后端职责分离、文档规范等等
6.自动化：图标合并、持续集成、自动化构建、自动化部署、自动化测试

十一、bootstrap与webpack相关知识

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

十二、websocket

WebSocket是html5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务器主动向客户端推送数据。在WebSocketAPI中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

websocket可以用来做聊天室，建立在tcp之上，连接机制与https相似

十三、前中后序遍历应用

前序遍历：广度优先、深度优先搜索
中序遍历：顺序输出、加减乘除等一些表达式的运算
后序遍历：先遍历叶子节点、可以用来删除节点、从下往上整合数据

十四、TCP和UDP的区别

1.tcp是面向连接的，udp是无连接的
2.tcp通过校验和、重传控制、序号标识、滑动窗口和累计确认来保证数据可靠传输，udp不可靠，到达的数据包可能是乱序的
3.tcp要三次握手和四次挥手，因此速度慢
4.tcp数据包报头大小是20字节，udp是8字节
5.tcp有流量控制和拥塞控制，udp没有
6.tcp是面向字节流的，udp面向报文
7.tcp连接只能是点对点的，udp支持一对一、一对多和多对多的交互通信
8.tcp适用于一些文件传输（http、https、ftp）、邮件（pop、smtp）、远程登录等对准确性要求较高的场景，udp应用于即时通信、在线视频等要求速度快的场景

十五、http如何保持状态

http是一种无状态协议，即服务器不保留与客户交易时的任何状态，上一次的请求对这次的请求没有任何影响，服务端也不会对客户端上一次的请求进行任何记录处理。

1.cookie：cookie是客户端的存储空间，由浏览器来维持。具体来说cookie机制采用的是在客户端保持状态的方案。cookie会根据从服务器端发送的响应报文内的一个叫做set-cookie的首部字段信息，通知客户端保存cookie，当下次客户端再往该服务端发送请求时，客户端会自动在请求报文中加入cookie值后发送出去。也就是cookie是服务器生成的，但是发送给客户端，并且有客户端来保存。每次请求加上cookie就行了。服务端发现客户端发送过来的cookie之后，会去检查究竟是从哪一个客户端发来的连接请求，然后对比服务器上的记录，最后得到之前的状态信息。

2.session：session是另一种记录客户状态的机制，保存在服务器上。虽然session保存在服务器，对客户端是透明的，他的正常运行仍然需要客户端浏览器的支持。在会话开始时，服务端就会把会话状态保存起来，然后分配一个sessionid给客户端，这个会话标识一般保存在客户端的cookie中，以后每次浏览器发送http请求都会带上sessionid，服务器拿到之后就与之前存在服务端的状态信息与会话联系起来，实现会话保持。

十六、http1.0 和 http1.1 的区别

1.长连接：1.1默认开启长连接keep-alive，减少了每次建立和关闭tcp连接的损耗，1.0需要使用keep-alive参数来设置长连接。
2.节约带宽：1.0存在浪费带宽的情况，例如客户端只是需要某个对象的一部分，而服务器却将整个对象都发过来了，并且不支持断点续传的功能。1.1支持先发送header消息，如果服务端认为客户端有权限请求服务器，则返回100，然后客户端再发送body部分，否则返回401。
3.host域：1.0认为一个主机对应一个ip地址，因此没有host域。随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机，并且他们共享一个ip地址。1.1的请求信息和响应信息都支持host域，如果没有包含，则会报告一个错误400.
4.缓存处理：1.0主要使用expires、if-modified-since，1.1新增了cache-control、etag等缓存头来控制缓存策略
5.错误通知：1.1新增了24个错误状态响应码

十七、http1.1 和 http2.0 的区别

1.多路复用：2.0可以实现多路复用，使用同一个tcp连接并发处理多个请求，而且并发请求的数量比1.1大了好几个数量级。1.1也可以通过建立多个tcp连接来处理并发的请求，但是创建tcp连接本身也是有开销的。
2.头部数据压缩：http1.1只支持消息体的压缩而不支持头部的压缩，2.0则使用HPACK算法对header的数据进行压缩，这样数据体积小了，在网络上传输就会更快。
3.服务端推送：1.1中，网络中的每个资源（html、样式表、脚本、图片等等）都必须明确的请求，时间较长。2.0引入了server push，它允许服务端推送特定资源给客户端。

十八、http常见状态码

100 continue：http1.1 表示发出的请求服务器接收，应当继续发送请求的其余部分
200 ok：请求成功
204 no content：没有新文档
301 moved permanently：文档被永久移除，新的url在location头当中给出，浏览器应该自动访问新的url
302 moved temporately：和301类似，但是url是临时性的替代，而不是永久性的
304 not modified：表示所请求的资源没有被修改，可以继续使用缓存
400 bad request：请求出现语法错误
401 unauthorized：请求需要身份认证
403 forbidden：拒绝执行此请求
404 not found：被请求的文档不在服务器上
500 internal server error：服务器遇到了意想不到的情况，不能完成客户端的请求

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

HTML 和 CSS：