Vue、js底层深入理解笔记(一)

1. Vue中列表组件的key值有什么作用？

这个是修改数组的情况下

还有增删的情况下 删除12，添加67

结果
带key的dom节点发生改变，内容未改变
不带key的 内容发生改变，节点未改变

不带key
节点不发生改变内容改变可能不会产生过渡效果，key的应用一般都是动画相关, 那一块节点重新生成, 这样动画就可以生效了.，或者在某些节点有绑定数据（表单）状态，会出现状态错位

key的好处
1.更准确
2.更快

key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。 更准确

Vue/React都是采用diff算法来对比新旧虚拟节点，从而更新节点。
当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（map映射）。
如果没找到就认为是一个新增节点。
而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。
一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。

官网推荐推荐的使用key，应该理解为“使用唯一id作为key”。因为index作为key，和不带key的效果是一样的。

---

2. [‘1’, ‘2’, ‘3’].map(parseInt)结果

var new_array = arr.map(function callback(currentValue[,index[, array]]) {
// Return element for new_array
}[, thisArg])
callback一共可以接收三个参数，其中第一个参数代表当前被处理的元素，而第二个参数代表该元素的索引。

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是 2-36 之间的整数，表示被解析字符串的基数。

转换一下
[‘1’, ‘2’, ‘3’].map(function(item, index) {
return parseInt(item, index)
})

---

3. Set、Map、WeakSet 和 WeakMap 的区别

Set
1.成员不能重复
2.只有键值，没有键名，类似数组。
3.可以遍历，方法有add、delete、has

Map
1.本质上是键值对的集合，类似集合
2.可以遍历，方法很多，可以跟各种数据格式转换

weakSet
1.成员都是对象
2.成员都是弱引用，随时可以消失。 可以用来保存DOM节点，不容易造成内存泄漏
3.不能遍历，方法有add、delete、has

weakMap
1.直接受对象作为键名（null除外），不接受其他类型的值作为键名
2.键名所指向的对象，不计入垃圾回收机制
3.不能遍历，方法同get、set、has、delete

参考链接地址

---

4.TCP 三次握手和四次挥手

---

5.http2的多路复用

HTTP/1.0版本
该版本的主要缺点是，每个TCP连接只能发送一个请求。发送数据完毕，连接就关闭，如果还要请求其他资源，就必须再新建一个连接。要解决这个问题，需要使用这个字段Connection: keep-alive。

HTTP/1.1版本
该版本引入了持久连接（persistent connection），即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive。还引入了机制管道（pipelined），即在同一个TCP连接里面，客户端可以同时发送多个请求。这样就进一步提高了HTTP协议的效率。

虽然 HTTP/1 版本允许复用TCP连接，但是同一个TCP连接里面，所有的数据通信都是按顺序进行的。服务器只有处理完一个响应，才会进行下一个响应。如果前面的响应特别慢，后面就会有许多请求排队等待。而且每次请求都会建立一次HTTP连接，也就是我们常说的3次握手4次挥手，这个过程在一次请求过程中占用了相当长的时间，即使开启了 Keep-Alive ，解决了多次连接的问题，但是依然有两个效率上的问题：

• 串行的文件传输。当请求a文件时，b文件只能等待，等待a连接到服务器、服务器处理文件、服务器返回文件，这三个步骤。我们假设这三步用时都是1秒，那么a文件用时为3秒，b文件传输完成用时为6秒，依此类推。（注：此项计算有一个前提条件，就是浏览器和服务器是单通道传输）
• 连接数过多。我们假设Apache设置了最大并发数为300，因为浏览器限制，浏览器发起的最大请求数为6，也就是服务器能承载的最高并发为50，当第51个人访问时，就需要等待前面某个请求处理完成。

HTTP/2的多路复用就是为了解决上述的两个性能问题。
在 HTTP/2 中，有两个非常重要的概念，分别是帧（frame）和流（stream）。
帧代表着最小的数据单位，每个帧会标识出该帧属于哪个流，流也就是多个帧组成的数据流。
多路复用，就是在一个 TCP 连接中可以存在多条流。换句话说，也就是可以发送多个请求，对端可以通过帧中的标识知道属于哪个请求。通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。

参考链接地址

---