网络的一些总结

1.get和post的区别

这题看上很简单,你肯定能答出1个以上的区别,但是面试官往往期望你能答出更多更深层次的区别。

这篇文章写的很详细了,大家可以研究一下——get和post区别?

我在这里在概括一下:

初级的答案

因为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大家很常用,以至于绝大部分人把他认为是“理所应当”,而忽略了他的底层逻辑和实现原理。$.ajax()方法返回的是一个延迟对象,即$.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状态码(如果有兴趣了解详细的话还是自己去找吧,网上很多):

  • 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是通过动态

你可能感兴趣的:(网络的一些总结)