乐趣区

关于前端:前端面试系列四网路及存储

jiezi

快来退出咱们吧！

“ 小和山的菜鸟们 ”，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 (https://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 施行的平安限度。无奈跨域是浏览器对于用户平安的思考，同源策略限度了一下行为：Cookies、LocalStorage 和 IndexDB 无奈读取 DOM 和 JS 对象无奈获取，Ajax 申请发送不进来。

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

  1. 通过 jsonp 跨域：能够通过动态创建 script，再申请一个带参网址实现跨域通信。毛病：只能实现 get 一种申请。
  2. document.domain + iframe 跨域：两个页面都通过 js 强制设置 document.domain 为根底主域，就实现了同域。此计划仅限主域雷同，子域不同的跨域利用场景。
  3. location.hash + iframe：a 欲与 b 跨域互相通信，通过两头页 c 来实现。三个页面，不同域之间利用 iframe 的 location.hash 传值，雷同域之间间接 js 拜访来通信。
  4. window.name + iframe 跨域：通过 iframe 的 src 属性由外域转向本地区，跨域数据即由 iframe 的 window.name 从外域传递到本地区。这个就奇妙地绕过了浏览器的跨域拜访限度，但同时它又是平安操作。

  5. postMessage 跨域：postMessage 是 HTML5 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 接口，并且能够顺便批改 cookie 中 domain 信息，不便以后域 cookie 写入，实现跨域登录。
  1. node.js 中间件代理跨域：node 中间件实现跨域代理，原理大抵与 nginx 雷同，都是通过启一个代理服务器，实现数据的转发，也能够通过设置 cookieDomainRewrite 参数批改响应头中 cookie 中域名，实现以后域的 cookie 写入，不便接口登录认证。
  2. WebSocket 协定跨域：WebSocket protocol 是 HTML5 一种新的协定。它实现了浏览器与服务器全双工通信，同时容许跨域通信，是 server push 技术的一种很好的实现。原生 WebSocket API 应用起来不太不便，咱们应用 Socket.io，它很好地封装了 webSocket 接口，提供了更简略、灵便的接口，也对不反对 webSocket 的浏览器提供了向下兼容。

详情请见：九种跨域形式实现原理（完整版）

5. http2 和 http1 的区别

  • 二进制分帧
  • 头部压缩：应用 HPACK 对 HTTP/2 头部压缩
  • 服务器推送

  • 多路复用：最重要的特点，（MultiPlexing），即连贯共享，即每一个 request 都是是用作连贯共享机制的。一个 request 对应一个 id，这样一个连贯上能够有多个 request，每个连贯的 request 能够随机的混淆在一起，接管方能够依据 request 的 id 将 request 再归属到各自不同的服务端申请外面。

    多个申请可同时在一个连贯上并行执行（因为反对二进制的格局，能够无序）某个申请工作耗时重大，不会影响到其它连贯的失常执行

更多请见：HTTP 的前世今生

6. HTTPS 和 HTTP 区别

  • https 协定须要到 CA 申请证书，个别收费证书较少，因此须要肯定费用
  • http 是超文本传输协定，信息是明文传输，https 则是具备安全性的 ssl/tls 加密传输协定。
  • http 和 https 应用的是齐全不同的连贯形式，用的端口也不一样，前者是 80，后者是 443
  • http 的连贯很简略，是无状态的；https 协定是由 SSL/TLS+HTTP 协定构建的可进行加密传输、身份认证的网络协议，比 http 协定平安

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

get 和 post 实质上就是 TCP 连贯，并无差别，但因为 HTTP 的规定和浏览器、服务器的限度，导致它

们在利用过程中有一些不同：

  • get 参数通过 URL 传递；post 放在 request body 中
  • get 申请在 URL 中传递的参数有长度限度；post 没有（HTTP 协定未规定，是因为浏览器和服务器的限度）
  • get 申请只能进行 URL 编码；post 申请有多种编码方式
  • get 申请参数会被残缺保留在浏览历史记录里；post 中的参数不会被保留
  • get 产生一个 TCP 数据包；post 产生两个 TCP 数据包
  • 对于 get 申请，浏览器将 http header 和 data 一并发送，服务器响应 200 OK；对于 post 申请，

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

  • 缓存方面：get 申请相似于查找的过程，用户获取数据，能够不必每次都与数据库连贯，所以

能够应用缓存；post 申请个别做的是批改和删除工作，必须与数据库交互，所以不能应用缓存

8. HTTP 外面的缓存机制

两种缓存形式，依据响应的 header 内容来决定

  • 强缓存（状态码：200）：浏览器不向服务器发送任何申请，间接从本地缓存中读取文件并返回（相干字段：Cache-Control、Expires）
  • 协商缓存（状态码：304）：浏览器发送申请到服务器，通过服务器来告知缓存是否可用（相干字段：Last-Modified/If-Modified-Since、Etag/If-None-Match）

缓存相干 header

Cache-Control、Expires、Last-Modified/If-Modified-Since、Etag/If-None-Match

详情请见：彻底了解浏览器的缓存机制

9. 网络申请状态码

常见状态码：

  • 200 申请胜利
  • 301 永恒重定向
  • 302 长期重定向
  • 404 申请失败，申请所心愿失去的资源未被在服务器上发现。
  • 500 服务器遇到了不晓得如何解决的状况。

更多请见：HTTP 响应状态码

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

OSI 七层模型

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

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

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

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

Axios 是一个基于 Promise 的 HTTP 客户端，用于 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： 是一个长久化的本地存储，除非强制删除，否则数据永远不会过期，反对 get 和 post 申请（存储在 2.5MB 到 10MB 之间）；不提供搜寻性能，不能建设自定义的索引

sessionStroage: 是本地的一个会话级别的存储，在页面关上的时候创立，页面敞开的时候销毁

下节预报

下节咱们将为大家带来 浏览器及计算机根底 的面试题解，敬请期待！

退出移动版