前端网络面试知识整理

最新推荐文章于 2022-03-08 20:05:05 发布

「已注销」

最新推荐文章于 2022-03-08 20:05:05 发布

阅读量189

点赞数 1

文章标签：网络

本文链接：https://blog.csdn.net/weixin_44283145/article/details/114940656

版权

在这里插入图片描述

网络相关的知识也是面试时经常会被问到的问题，面试官很有必要确认面试者是否只会使用$.ajax()方法，还是真正了解网络请求的原理。问题列表

get和post的区别
websocket是否了解
http 2.0对于http 1.x有哪些优点？
jq的ajax返回值是什么？
说一说你知道的HTTP状态码
jsonp的原理
跨域请求资源有哪几种方式？他们的优缺点是什么？
XML和JSON的区别？

1. get和post的区别

get和post的区别这题看上很简单，你肯定能答出1个以上的区别，但是面试官往往期望你能答出更多更深层次的区别。这篇文章写的很详细了，大家可以研究一下——https://www.zhihu.com/question/28586791

我在这里在概括一下：
初级的答案
因为GET方法请求的参数都是放在请求的url上的，所以它与POST有以下明显的区别：

GET请求可以被添加到书签中，也可保存在浏览器历史记录中，POST不能
GET请求可以被浏览器缓存，POST不能
GET请求收到URL长度限制，所以数据长度也受限制，POST不会
GET请求只能传输ASCII字符，而POST不受此限制，还可以传输二进制数据

在语义上两个方法也有区别：

GET 代表获取指定服务器上资源
POST 代表向指定的资源提交要被处理的数据

高级些的答案
GET产生一个TCP数据包；POST产生两个TCP数据包。
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
也就是说，GET只需要汽车跑一趟就把货送到了，而POST得跑两趟，第一趟，先去和服务器打个招呼“嗨，我等下要送一批货来，你们打开门迎接我”，然后再回头把货送过去。

但是需要多解释两句的是：

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

2.websocket是否了解？

通常情况下，面试官问你是否对XX有了解，一般的回答都是要涵盖下面这些点：

是否知道它是什么？
是否知道它的用途是什么？
它和之前某项已有的技术相比，有哪些优缺点？

webSocket和http一样，同属于应用层协议。它最重要的用途是实现了客户端与服务端之间的全双工通信，当服务端数据变化时，可以第一时间通知到客户端。除此之外，它与http协议不同的地方还有：

http只能由客户端发起，而webSocket是双向的。
webSocket传输的数据包相对于http而言很小，很适合移动端使用
没有同源限制，可以跨域共享资源

要想了解更多详细，还是去看阮一峰的教程吧——WebSocket 教程 - 阮一峰的网络日志

3.http 2.0对于http 1.x有哪些优点？

优点（以下摘自HTTP/2.0 相比1.0有哪些重大改进？）：

多路复用：多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息。由于http 1.x的时代中，浏览器向同一域名下发送的http请求数量是受限的，当超出数量限制时，请求会被阻塞，大大降低了用户体验。而HTTP/2 的多路复用允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息。
二进制分帧：HTTP/2在应用层和传输层之间追加了一个二进制分帧层，最终使得多个数据流共用一个连接，更加高效的使用tcp连接。从而使得服务器的连接压力减轻，降低了内存的消耗，增大了网络的吞吐量。
首部压缩：HTTP/2引入了HPACK算法对头部进行压缩，大大减小了数据发送的字节数。

4.jQuery的ajax返回值是什么？

很多公司，尤其是金融或数据分析的公司，他们的web app会与服务端进行大量的数据交互，所以他们的面试官通常会很看重面试者对于网络请求以及异步编程的理解程度。

jQuery中的ajax大家很常用，以至于绝大部分人把他认为是“理所应当”，而忽略了他的底层逻辑和实现原理。 $. a j a x () 方法返回的是一个延迟对象，即$ .Deferred的实例。

所以你可以像下面这样使用$.ajax()方法

//利用done()和fail()方法来处理ajax请求
$.ajax({url:"http://mydomain.com/memberInfo/get",async: false}).done(
	responseData => {
		console.log(responseData)
	}
).fail(
	()=>{console.error('出错了！')}
)

//$.get()也是同样的道理，除了上面延迟对象提供的方法外，还可以使用then()回调
$.get("http://mydomain.com/memberInfo/get").then(responseData => {console.log(responseData);})

如果你想让这两个请求都完成后再进行处理的话，可以用下面的操作：

var memberDef = $.get("http://mydomain.com/memberInfo/get");

var orderDef = $.get("http://mydomain.com/orderInfo/get");

$.when(memberDef, orderDef).then((
	[memberInfo], [orderInfo]
)=>{	
	//这里用到了解构赋值来取得http返回的数据
	console.log('用户信息',memberInfo);
	console.log('订单信息',orderInfo);
})

想要了解更多关于延迟对象的内容，可以访问阮一峰的博客除了上面这一个问题，还可以追问一些下面的问题，这里就不展开解答了：

异步请求和同步请求的区别
ajax 请求有几种数据格式，如何设置数据格式
如何避免浏览器缓存get请求，以便达到每次get请求都能获取最新的数据
等等……

5.说一说你知道的HTTP状态码

以前遇到面试者说 HTTP状态码不应该是前端开发关心的事情。但我总觉得一个前端工程师对于http状态码的了解程度代表了他曾经踩过了多少雷，一个深入了解http状态码的工程师可以快速定位问题。

关于HTTP状态码应该有下面的基本认识：

1xx ：1开头的状态码表示临时的响应
2xx ：请求成功
3xx ：请求被重定向
4xx ：请求错误，表明客户端发送的请求有问题
5xx ：服务器错误，表明服务端在处理请求时发生了错误

知道上面的规律，再看到错误的时候就大概知道问题是后端的锅还是前端的锅了。再说几个常用的http状态码（如果有兴趣了解详细的话还是自己去找吧，网上很多（http://tools.jb51.net/table/http_status_code））：
* 301 ： Moved Permanently 客户端请求的文档在其他地方，新的URL在location头中给出
* 304 ： Not Modified 客户端有缓存的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户端只想到指定日期后再更新文档）。服务器告诉客户，原来缓存的文档还可以继续使用。
* 400 ： Bad Request 请求出现语法错误
* 401 ： Unauthorized 访问被拒绝，客户端试图未经授权访问受密码保护的页面
* 403 ： Forbidden 资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器文件或目录的权限设置导致。
* 404 ： Not Found 无法找到指定位置的资源。
* 405 ： Method Not Allowed 请求方法（GET、POST、PUT等）对指定的资源不适用，用来访问本资源的HTTP方法不被允许。
* 500 ： Internal Server Error 服务器遇到了意料之外的情况，不能完成客户端的请求。
* 502 ： Bad Gateway 服务器作为网管或者代理时收到了无效的响应。
* 503 ： Service Unavailable 服务不可用，服务器由于维护或者负载过中未能应答。
* 504 ： Gateway Timeout 网关超时，作为代理或网关的服务器不能及时的应答。

6.JSONP的原理JSONP是一种跨域共享资源的方法。

很多人会好奇JSONP和JSON是什么关系，JSONP是JSON with padding的缩写，即填充式JSON或参数式JSON，是被包含在函数调用中的JSON，如下面的样子：

callback({“name”: “Chong”});JSONP是通过动态

JSONP之所以可以实现跨域，依赖的是下面的条件：
1. 浏览器请求脚本是不受同源规则限制的
2.

需要注意的是，JSONP是需要服务端配合的，因为JSONP返回的是一段代码。7.跨域请求资源有哪几种方式？他们的优缺点是什么？常见的跨域方式如下：
* JSONP
* 图像Ping
* CORS
* Web Sockets

一个一个说：JSONP优点：简单易用，浏览器支持好。缺点：
1. JSONP是从其他域中加载代码并执行，所以存在很多安全隐患，如果其他服务器在响应中夹带恶意代码的话，没有办法防范。
2. JSONP难以确定请求失败的情况。HTML5中给

图像Ping这是指通过请求图片的方式来跨域发送请求。优点：简单，兼容性好，不需要服务器做针对性处理。缺点：
1. 只能单向通信，即客户端发送信号给服务端，无法接收到服务端的回复
2. 只能发送GET请求
3. 容易被浏览器缓存请求，导致请求发送不出去。

CORSCORS是Cross-Origin Resource Sharing的缩写，即跨域资源共享。CORS的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。优点：功能强大缺点：
1. 需要服务端来配合实现（其实很简单~）
2. IE必须IE10以上。。。

WebSocket这个貌似就不用多说了，属于没用过也应该听过的一种技术。优点：
1. 双工通信，浏览器和服务器都可以发起请求
2. 通信效率高，一次链接可以复用，省去反复的握手环节

缺点：
1. 实现上较为复杂，包括客户端和服务端
2. 浏览器支持问题

还有很多其他的跨域方式，在这里就不说了8.XML和JSON的区别？XML是标准通用标记语言 (SGML) 的子集，而标签语言（如HTML）的好处就是易懂。优点：上手简单，非开发人员也可以快速上手（产品经理们很喜欢）。缺点：
1. XML多余的数据比较多，所以数据量大，传输时占用更多空间
2. 客户端和服务端解析XML都要比较繁琐，需要大量代码

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。重点在轻上，结构与JavaScript中的Object类似。优点：
1. 数据量小，利于网络传输
2. 方便解析，客户端和服务端都有基础的解析方法

缺点：结构稍微有点复杂，非开发人员不容易上手（初学者需要去官网学习研究一下）

欢迎各位大佬补充