面经20210511

[into-piece]

qq音乐

1. react native工作原理 shadow 线程是做什么的 是热更新吗 怎么支持的
2. ts d.ts是用来干嘛的 ts的类相比js的类有什么特别
3. 移动端点击延迟的现象了解吗 怎么解决
4. 解决跨域方案 反向代理怎么实现 为什么不直接服务器请求 要多一层
5. map和object区别
6. useLayoutEffect和useEffect区别是啥
7. useMemo用来干嘛的？是用来做缓存的吗？
8. http2新特性 队头堵塞 只能建立7个tcp吗
9. 打包的sourcemap有什么用
10. webpack多页面应用的实现
11. pureComponent除了浅比较与component有什么区别

[into-piece]

JSOIN.stringfy的深拷贝存在的问题 1、如果obj里面存在时间对象，JSON.parse(JSON.stringify(obj))之后，时间对象变成了字符串。 2、如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象。 3、如果obj里有函数，undefined，则序列化的结果会把函数， undefined丢失。 4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null。 5、JSON.stringify()只能序列化对象的可枚举的自有属性。如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor。 6、如果对象中存在循环引用的情况也无法正确实现深拷贝。

[into-piece]

https中间人攻击

“中间人攻击”的具体过程如下

1. 本地请求被劫持（如DNS劫持等），所有请求均发送到中间人的服务器
2. 中间人服务器返回中间人自己的证书
3. 客户端创建随机数
4. 通过中间人证书的公钥对随机数加密后传送给中间人，然后凭随机数构造对称加密对传输内容进行加密传输
5. 中间人因为拥有客户端的随机数，可以通过对称加密算法进行内容解密
6. 中间人以客户端的请求内容再向正规网站发起请求
7. 因为中间人与服务器的通信过程是合法的，正规网站通过建立的安全通道返回加密后的数据
8. 中间人凭借与正规网站建立的对称加密算法对内容进行解密
9. 中间人通过与客户端建立的对称加密算法对正规内容返回的数据进行加密传输
10. 客户端通过与中间人建立的对称加密算法对返回结果数据进行解密

[into-piece]

移动端300ms点击延迟

双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面，在欣喜的时候往往不会care这个300ms的延时问题，可是如今touch端界面如雨后春笋，用户对体验的要求也更高，这300ms带来的卡顿慢慢变得让人难以接受。

解决方案

方案一

当HTML文档头部包含如下meta标签时：

<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">

缺点：就是必须通过完全禁用缩放来达到去掉点击延迟的目的，然而完全禁用缩放并不是我们的初衷，我们只是想禁掉默认的双击缩放行为，这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下，我们还是希望页面能通过双指缩放来进行缩放操作，比如放大一张图片，放大一段很小的文字。

方案二

<meta name="viewport" content="width=device-width">

因为双击缩放主要是用来改善桌面站点在移动端浏览体验的，而随着响应式设计的普及，很多站点都已经对移动端坐过适配和优化了，这个时候就不需要双击缩放了，如果能够识别出一个网站是响应式的网站，那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。如果设置了上述meta标签，那浏览器就可以认为该网站已经对移动端做过了适配和优化，就无需双击缩放操作了。

这个方案相比方案一的好处在于，它没有完全禁用缩放，而只是禁用了浏览器默认的双击缩放行为，但用户仍然可以通过双指缩放操作来缩放页面。

[into-piece]

map和object区别

同名碰撞

我们知道，对象其实就是在堆开辟了一块内存，其实Map的键存的就是这块内存的地址。只要地址不一样，就是两个不同的键，这就解决了同名属性的碰撞问题，而传统的Object显然做不到这一点。

let m = new Map()
m.set({},1)
m.set({},2)
m.set({},3) //每一次都是开辟新的堆内存作为键
console.log(m) //Map { {} => 1, {} => 2, {} => 3 }

let o = {}
o['a'] = 1
o['a'] = 2
o['a'] = 3

console.log(o) //{ a: 3 }

可迭代

new Map([iterable])

Map实现了迭代器，可用for...of遍历，而Object不行。

长度

Map可以直接拿到长度，而Object不行。

有序性

填入Map的元素，会保持原有的顺序，而Object无法做到。

可展开

Map可以使用省略号语法展开，而Object不行。

[into-piece]

e.target与e.currentTarget

 let ul = document.querySelectorAll('ul')[0]
    let aLi = document.querySelectorAll('li')
    ul.addEventListener('click',function(e){
       let oLi1 = e.target  
       let oLi2 = e.currentTarget
        console.log(oLi1)   //  被点击的li
        console.log(oLi2)   // ul
        console.og(oLi1===oLi2)  // false
    })

• MDN中对target的解释为，一个触发事件的对象的引用， 当事件处理程序在事件的冒泡或捕获阶段被调用时。

• 而对于currentTarget，它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

[into-piece]

虚拟内存

虚拟内存是计算机系统内存管理的一种技术。它使得应用程序认为它拥有连续的可用的内存（一个连续完整的地址空间），而实际上，它通常是被分隔成多个物理内存碎片，还有部分暂时存储在外部磁盘存储器上，在需要时进行数据交换

[corrie-70]

同react技术栈，这题好难，你过了吗

[into-piece]

同react技术栈，这题好难，你过了吗

挂了哭唧唧，这是qq音乐问的，同时要对rn等跨端了解要比较深入，他们是用flutter的。

[into-piece]

20210608

1. 函数式编程
2. async底层
3. https

[into-piece]

20210610

1. position的值 各自的判断 搭配z-index
2. 大数据量进行计算和渲染（虚拟列表的实现
3. 最长前缀子序列
4. mobx核心思想

[into-piece]

20210701 有赞

1. 垃圾回收 新生代老生代
2. bfc
3. event loop，promise中的settimeout执行
4. 排序，归并和快速的区别和复杂度
5. object es6新加的语法