前端|每天5道面试题(2)

1,301 阅读5分钟

每天背5道,务必背熟记住,希望能对找工作的小前端有点帮助

1、HTTP 状态码

第一个数字定义了响应的类别,且有五种可能取值。

  • 1xx:指示信息--表示请求已接收,继续处理。
  • 2xx:成功--表示请求已被成功接收、理解、接受。
  • 3xx:重定向--要完成请求必须进行更进一步的操作。
  • 4xx:客户端错误--请求有语法错误或请求无法实现。
  • 5xx:服务器端错误--服务器未能实现合法的请求。

常见状态代码、状态描述的说明如下。

  • 200 OK:客户端请求成功。
  • 400 Bad Request:客户端请求有语法错误,不能被服务器所理解。
  • 401 Unauthorized:请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用。
  • 403 Forbidden:服务器收到请求,但是拒绝提供服务。
  • 404 Not Found:请求资源不存在,举个例子:输入了错误的URL。
  • 500 Internal Server Error:服务器发生不可预期的错误。
  • 503 Server Unavailable:服务器当前不能处理客户端的请求,一段时间后可能恢复正常,举个例子:HTTP/1.1 200 OK(CRLF)。

2、浏览器输入 url 之后发生了什么

  • 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
  • 建立TCP连接(三次握手);
  • 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求,该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
  • 服务器对浏览器请求作出响应,并把对应的 html 文本发送给浏览器;
  • 释放 TCP连接(四次挥手);
  • 浏览器将该 html 文本并显示内容;

3、同源策略和跨域通信

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
协议、域名、端口只要有一个不一样,就是不同的源。

跨域通信

  • JSONP:在页面上引入不同域上的js脚本文件不受同源策略限制。因此在js文件载入完毕之后,触发回调,可以将需要的data作为参数传入。                                                         优点:兼容性好(兼容低版本IE)                                                                                     缺点:JSONP只支持GET请求
  • CORS:根据请求头的Origin值和响应头的Access-Control-Request-HeadersAccess-Control-Request-Method的值进行比对,通过了就可以请求成功,没通过就请求失败
  • postMessage (H5中新增的),window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源
  • node反向代理:如果我们用的是node起的前端服务,那我们可以使用node来直接进行反向代理,引入一个处理代理的插件,然后配置一个target
  • Nginx反向代理:主要就是用了nginx.conf内的proxy_pass http://xxx.xxx.xxx,会把所有请求代理到那个域名
  • WebSocket
  • Hash(window.location.hash + iframe)

4、Cookie、sessionStorage、localStorage区别

共同点:都是保存在浏览器端,且同源的。 

区别:

(1)cookie数据始终在同源的http请求中携带,即cookie在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

(2)cookie数据不能超过4k(适合保存小数据)。 

sessionStorage和localStorage容量较大,

(3)数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效。

localStorage:始终有效,窗口或浏览器关闭也一直保存,需手动清除;

cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

(4)作用域不同。 sessionStorage不在不同的浏览器窗口中共享;

localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。

应用场景:

localStorage:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。

sessionStorage :敏感账号一次性登录;

 cookies与服务器交互。

5、GET和POST的区别

#这个问题。我相信只要你说你做过接口测试,基本上都被问到过。

  简单来说:GET产生一个TCP数据包,POST产生两个TCP数据包

  严格的说:对于GET方式的请求,浏览器会把http header和data一并发送出去,服务器响应200(返回数据);

  而对于POST请求。浏览器先发送header,服务器响应100 continue,浏览器再发送data,服务器响应200 ok(返回数据)

  • GET请求的参数是放在请求的URL中,而POST方法是放在请求体中

  • GET请求在URL中传递参数时会有长度限制,而POST无限制(不是绝对的,只是相对来说)

  • GET请求会被浏览器主动缓存,而POST不会

  • GET请求的参数会保存在浏览器中,而POST的参数不会保存在浏览器中

本着能为找工作中的前端帮一点小忙忙,借鉴了掘金里面很多大咖的文章,如有侵权请告知