前端面试系列四:网络及存储

452 阅读10分钟

快来加入我们吧!

"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( xhs-rookies.com/ ) 进行学习,及时获取最新文章。

"Code tailor" ,如果您对我们文章感兴趣、或是想提一些建议,微信关注 “小和山的菜鸟们” 公众号,与我们取的联系,您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励!

面试系列不定期更新,请随时关注

前言

本篇专栏重点在于讲解面试中 网络及存储 的面试题内容。

注意: 本篇专栏至只会涉及到重点内容,并不会进行拓展。某些题目需要拓展知识点的,我们会将拓展内容、整体详细信息放置与每个题目的最前面,可以自行查看。

网络及存储

网络/存储
什么是 HTTP 请求
什么是跨域
有哪几种解决跨域的方法,各自优劣性。
jsonp 解决跨域问题原理和存在的问题
http2 和 http1 的区别
HTTPS 和 HTTP 区别
GET 和 POST 到底有什么区别
HTTP 里面的缓存机制
网络请求状态码
OSI/TCP 模型有哪几个部分
axios 实际上做了什么事情
如何解决 localstroage 的跨域问题
cookie、localstroage、sessionstroage 区别

题目解析

1. 什么是 HTTP 请求

全称:超文本传输协议(HyperText Transfer Protocol)

概念:HTTP 是一种能够获取像 HTML、图片等网络资源的通讯协议。

它是在 web 上进行数据交换的基础,是一种 client-server 协议。

HTTP 在因特网的角色:充当一个信使的角色,干的就是一个跑腿的活,在客户端和服务端之间传递信息,但我们又不能缺少它。

HTTP 协议是「 应用层 」协议,是与前端开发最息息相关的协议。

平时我们遇到的 HTTP 请求HTTP 缓存Cookies跨域等其实都跟 HTTP 息息相关。

2. 什么是跨域

跨域指的是非同源的资源之间尝试着进行交互通信,而由于受浏览器同源策略的限制,无法正常进行交互通信。

浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 JavaScript 实施的安全限制。无法跨域是浏览器对于用户安全的考虑,同源策略限制了一下行为:CookiesLocalStorageIndexDB 无法读取 DOMJS 对象无法获取,Ajax 请求发送不出去。

3. 有哪几种解决跨域的方法,各自优劣性

  1. 通过 jsonp 跨域:可以通过动态创建 script,再请求一个带参网址实现跨域通信。缺点:只能实现 get 一种请求。

  2. document.domain + iframe 跨域:两个页面都通过 js 强制设置 document.domain 为基础主域,就实现了同域。此方案仅限主域相同,子域不同的跨域应用场景。

  3. location.hash + iframea 欲与 b 跨域相互通信,通过中间页 c 来实现。 三个页面,不同域之间利用 iframelocation.hash 传值,相同域之间直接 js 访问来通信。

  4. window.name + iframe 跨域:通过 iframesrc 属性由外域转向本地域,跨域数据即由 iframewindow.name 从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制,但同时它又是安全操作。

  5. postMessage 跨域:postMessageHTML5 XMLHttpRequest Level 2 中的 API,且是为数不多可以跨域操作的 window 属性之一

    它可用于解决以下方面的问题:

    • 页面和其打开的新窗口的数据传递

    • 多窗口之间消息传递

    • 页面与嵌套的 iframe 消息传递上面三个场景的跨域数据传递

      用法:

    • postMessage(data,origin)方法接受两个参数

    • data:html5 规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用 JSON.stringify() 序列化。

    • origin:协议+主机+端口号,也可以设置为 "*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

  6. 跨域资源共享(CORS):只服务端设置 Access-Control-Allow-Origin 即可,前端无须设置,若要带 cookie 请求:前后端都需要设置。

  7. nginx 代理跨域:

  • nginx 配置解决 iconfont 跨域

  • nginx 反向代理接口跨域

    • 跨域原理: 同源策略是浏览器的安全策略,不是 HTTP 协议的一部分。服务器端调用 HTTP 接口只是使用 HTTP 协议,不会执行 JS 脚本,不需要同源策略,也就不存在跨越问题。

    • 实现思路:通过 nginx 配置一个代理服务器(域名与 domain1 相同,端口不同)做跳板机,反向代理访问 domain2 接口,并且可以顺便修改 cookiedomain 信息,方便当前域 cookie 写入,实现跨域登录。

  1. node.js 中间件代理跨域:node 中间件实现跨域代理,原理大致与 nginx 相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置 cookieDomainRewrite 参数修改响应头中 cookie 中域名,实现当前域的 cookie 写入,方便接口登录认证。

  2. WebSocket 协议跨域:WebSocket protocolHTML5 一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是 server push 技术的一种很好的实现。原生 WebSocket API 使用起来不太方便,我们使用 Socket.io,它很好地封装了 webSocket 接口,提供了更简单、灵活的接口,也对不支持 webSocket 的浏览器提供了向下兼容。

详情请见:九种跨域方式实现原理(完整版)

5. http2 和 http1 的区别

  • 二进制分帧

  • 头部压缩:使用 HPACKHTTP/2 头部压缩

  • 服务器推送

  • 多路复用:最重要的特点,(MultiPlexing),即连接共享,即每一个 request 都是是用作连接共享机制的。一个 request 对应一个 id,这样一个连接上可以有多个 request,每个连接的 request 可以随机的混杂在一起,接收方可以根据 requestidrequest 再归属到各自不同的服务端请求里面。

    多个请求可同时在一个连接上并行执行(由于支持二进制的格式,可以无序)某个请求任务耗时严重,不会影响到其它连接的正常执行

更多请见:HTTP 的前世今生

6. HTTPS 和 HTTP 区别

  • https 协议需要到 CA 申请证书,一般免费证书较少,因而需要一定费用
  • http 是超文本传输协议,信息是明文传输,https 则是具有安全性的 ssl/tls 加密传输协议。
  • httphttps 使用的是完全不同的连接方式,用的端口也不一样,前者是 80, 后者是 443
  • http 的连接很简单,是无状态的;https 协议是由 SSL/TLS+HTTP 协议构建的可进行加密传输、身份认证的网络协议,比 http 协议安全

7. GET 和 POST 到底有什么区别

getpost 本质上就是 TCP 连接,并无差别,但由于 HTTP 的规定和浏览器、服务器的限制,导致它

们在应用过程中有一些不同:

  • get 参数通过 URL 传递;post 放在 request body

  • get 请求在 URL 中传递的参数有长度限制;post 没有(HTTP 协议未规定,是因为浏览器和服务器的限制)

  • get 请求只能进行 URL 编码;post 请求有多种编码方式

  • get 请求参数会被完整保留在浏览历史记录里;post 中的参数不会被保留

  • get 产生一个 TCP 数据包;post 产生两个 TCP 数据包

  • 对于 get 请求,浏览器将 http headerdata 一并发送,服务器响应 200 OK;对于 post 请求,

浏览器先发送 header,服务器响应 100 Continue,浏览器再发送 data,服务器响应 200 OK

  • 缓存方面:get 请求类似于查找的过程,用户获取数据,可以不用每次都与数据库连接,所以

可以使用缓存;post 请求一般做的是修改和删除工作,必须与数据库交互,所以不能使用缓存

8. HTTP 里面的缓存机制

两种缓存方式,根据响应的 header 内容来决定

  • 强缓存(状态码:200):浏览器不向服务器发送任何请求,直接从本地缓存中读取文件并返回(相关字段:Cache-ControlExpires

  • 协商缓存(状态码:304):浏览器发送请求到服务器,通过服务器来告知缓存是否可用(相关字段:Last-Modified/If-Modified-SinceEtag/If-None-Match

缓存相关 header

Cache-ControlExpiresLast-Modified/If-Modified-SinceEtag/If-None-Match

详情请见:彻底理解浏览器的缓存机制

9. 网络请求状态码

常见状态码:

  • 200 请求成功

  • 301 永久重定向

  • 302 临时重定向

  • 404 请求失败,请求所希望得到的资源未被在服务器上发现。

  • 500 服务器遇到了不知道如何处理的情况。

更多请见:HTTP 响应状态码

10. OSI/TCP 模型有哪几个部分

OSI 七层模型

  • 物理层 —— 比特流的传输
  • 数据链路层 —— 控制网络层和物理层间的通信
  • 网络层 —— IP 寻址和路由选择
  • 传输层 —— 创建、管理、维护端到端的连接
  • 会话层 —— 创建、管理、维护会话连接
  • 表示层 —— 加解密、数据格式化
  • 应用层 —— 为应用程序提供网络服务

TCP 四层模型则是将会话层、表示层、应用层统称为应用层,将物理层和数据链路层统称为数据链路层

详情请见:OSI 7 层模型和 TCP/IP 4 层模型

11. axios 实际上做了什么事情

Axios 是一个基于 PromiseHTTP 客户端,用于 node.js 和浏览器。 它是同构的(= 它可以在具有相同代码库的浏览器和 node.js 中运行)。 在服务器端它使用原生 node.js http 模块,而在客户端(浏览器)它使用 XMLHttpRequests。它本身具有以下特征

  • 从浏览器中创建 XMLHttpRequest

  • 支持 Promise API

  • 客户端支持防止 CSRF

  • 提供了一些并发请求的接口(重要,方便了很多的操作)

  • node.js 创建 http 请求

  • 拦截请求和响应

  • 转换请求和响应数据

  • 取消请求

  • 自动转换 JSON 数据

更多请见:axios docs

12. 如何解决 localstroage 的跨域问题

postMessage 用于解决不同域页面间的通信,主要参数为

  • message :将要发送到其他 window 的数据
  • targetOrigin : 通过窗口的 origin 属性来指定哪些窗口能接收到消息事件
  • transfer(可选):是否将所有权将转移给消息的接收方,而自己不再持有

详情请见:什么是 postMessage 浏览器同源政策及其规避方法

13. cookie、localstroage、sessionstroage 区别

cookie: 大小受限,只有 4kb 的大小,服务器端和浏览器;并且每次发送一个新的页面的时候 cookie 都会发送过去,这样无形浪费了带宽; cookie 还需要指定作用域,不可以跨域调用

localstorage: 是一个持久化的本地存储,除非强制删除,否则数据永远不会过期,支持 getpost 请求(存储在 2.5MB 到 10MB 之间);不提供搜索功能,不能建立自定义的索引

sessionStroage: 是本地的一个会话级别的存储,在页面打开的时候创建,页面关闭的时候销毁

下节预告

下节我们将为大家带来 浏览器及计算机基础 的面试题解,敬请期待!