前端每天10问 ------ 11-20

前端每天10问 —— 11-20

11.Q：简单讲解一下 http2 的多路复用

A：

HTTP2采用二进制格式传输，取代了HTTP1.x的文本格式，二进制格式解析更高效。
多路复用代替了HTTP1.x的序列和阻塞机制，所有的相同域名请求都通过同一个TCP连接并发完成。在HTTP1.x中，并发多个请求需要多个TCP连接，浏览器为了控制资源会有6-8个TCP连接都限制。
HTTP2中

同域名下所有通信都在单个连接上完成，消除了因多个 TCP 连接而带来的延时和内存消耗。
单个连接上可以并行交错的请求和响应，之间互不干扰

12.Q：谈谈你对 TCP 三次握手和四次挥手的理解

A：

三次握手

第一次握手——客户端将标志位SYN置为1，随机产生一个值seq=j,并将该数据包发送给服务端，进入SYN_SENT状态，等待服务端确认
第二次握手——服务端收到数据包后，将标志位SYN和ACK都置为1，ack=j+1，随机产生一个值seq=k，并将该数据包发给客户端确认连接请求，进入SYN_RCVD状态
第三次握手——客户端收到确认后，检查ack是否为j+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=k+1，并将该数据包发送给服务端。服务端检查ack是否为k+1，ACK是否为1，如果正确则连接建立成功，双方都进入ESTABLISHED状态，完成三次握手，可以进行双工通信

四次挥手

客户端——发送一个FIN，用来关闭客户端到服务器的数据传送
服务器——收到这个FIN，它发回一个ACK，确认序号为收到的序号加1 。和SYN一样，一个FIN将占用一个序号
服务器——关闭与客户端的连接，发送一个FIN给客户端
客户端——发回ACK报文确认，并将确认序号设置为收到序号加1

13.Q：介绍下 npm 模块安装机制

A：

npm 模块安装机制：

发出npm install命令
查询node_modules目录之中是否已经存在指定模块
- 若存在，不再重新安装
- 若不存在
  - npm 向 registry 查询模块压缩包的网址
  - 下载压缩包，存放在根目录下的.npm目录里
  - 解压压缩包到当前项目的node_modules目录

14.Q：有以下 3 个判断数组的方法，请分别介绍它们之间的区别和优劣

Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()

A：

答案参考请见：

有以下 3 个判断数组的方法，请分别介绍它们之间的区别和优劣Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()

15.Q:介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

A:

答案参考请见：

介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

16.Q:介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景

A:观察者模式中主体和观察者是互相感知的，发布-订阅模式是借助第三方来实现调度的，发布者和订阅者之间互不感知

更多详情请见：

介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景

17.Q:浏览器和Node 事件循环的区别

A:

更多详情请见：

浏览器和Node 事件循环的区别

A:

1、首先token不是防止XSS的，而是为了防止CSRF的；
2、CSRF攻击的原因是浏览器会自动带上cookie，而浏览器不会自动带上token

19.Q:聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的

A:

从 M 到 V 的映射（Data Binding），通过模板引擎来渲染
从 V 到 M 的事件监听（DOM Listeners），这样你的 Model 会随着 View 触发事件而改变

更多详情请见：

聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的

20.Q:请把两个数组 [A1, A2, B1, B2, C1, C2, D1, D2] 和 [A, B, C, D]，合并为 [A1, A2, A, B1, B2, B, C1, C2, C, D1, D2, D]。

A:

let a1 =  ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2']
let a2 = ['A', 'B', 'C', 'D'].map((item) => {
  return item + 3
})

let a3 = [...a1, ...a2].sort().map((item) => {
  if(item.includes('3')){
    return item.split('')[0]
  }
  return item
})