一二三面时长分别是60min、50min、1h20min，每轮都有手撕算法和代码，三面很有压力
基础的问题就不写了

1. map和obj的区别
   对相同操作他们的性能有差异吗？

   map频繁增删键值对的场景下表现更好，不过要解释清楚似乎有点困难，还好面试官没接着深究了

2. Hooks怎么封装一个移动端的滑动轮播插件？
   Hooks怎么封装这里的手势逻辑？

   先封装一个useDraggable的Hooks片段，
   useDraggable在Mounted时会监听down move up三个事件，同时useRef存住目标元素DOM节点，useState加一个判断是否正在拖动的状态；down事件会使拖动状态为true；move事件触发时判断若正在拖动，则把鼠标的位置赋给DOM；down事件会使拖动状态为false...

3. 手写一个Promise.all方法

4. 手写一个Promise.all方法，但是存在最大并发数量限制

5. async await的原理是什么？

   一个async函数，其实是一个生成器函数，await其实是yield
   生成器函数执行生成迭代器，
   迭代器每next()一次就会生成一个值
   next(args)还可以传值给生成器内部，在外部给yield出的Promise绑定then并拿到成功值，再传回内部。

    function *gen(){
       const num1 = yield fn(1);
       console.log(num1);
       const num2 = yield fn(num1);
       console.log(num2);
    }
    (function autoGen(genFn){
       const gen = genFn();
       return new Promise(resolve=>{
          go()
          function go(arg){
             res = gen.next(arg)
             const {value, done} = res;
             if(done) resolve('yes')
             else{
                value.then((data)=>{
                   go(data)
                })
             }
          }
   
       })
    })(gen).then(console.log)
   
   

7. 你对虚拟dom有什么理解？为什么要用虚拟DOM？

   能缓存批量操作，减少频繁改动DOM，又能复用节点。。

   但是实际情况下，页面元素不仅较少，而且也没那么多对同一个DOM元素频繁改动的场景，而且复用的得到那一点性能也没diff开销大，那虚拟DOM到底有什么意义？

   你对VDOM的理解只是“别人说用我就用”，而不是去思考为什么要用，是这样吗？

8. addEventListener第三个参数

    {
      capture: false, 
      once: false, // 调用一次后就自动销毁监听器
      passive: false // 若为真，保证回调内永远不会阻止默认事件（调用preventDefault）
    }

   只要用户输入事件在内核线程执行逻辑，且内核线程在忙，则必然无法得到响应。
   大部分的输入事件都和页面元素有关，监听器触发的回调代码必须在内核（V8运行在内核）线程中执行。
   但是手势输入事件（滑动 捏合）能够在已经渲染好的快照上处理，而不需要进入内核线程执行
   再但是，手势输入事件是由连续的 普通输入事件 组成的，普通的输入事件可能会被内部的preventDefault来阻止掉事件后续的默认行为，在将回调放入内核线程执行前，浏览器根本不知道回调内有没有阻止后续默认行为，也就无法进行优化

9. webpack如何实现代码拆分——打包后的dist中，为什么你的vue项目代码拆分很少，而react项目代码拆分很多？

   戳到软肋了，真不会

10. 你有什么避免hooks重渲染的最佳实践吗？

    memo包裹组件，再为组件传入useCallback后的函数

    你意思是传入内联对象和函数开销都很大？意思是平常开发都不准用内联对象和函数？

11. 线上代码报错位置，怎么还原到开发环境下的原始报错位置？

    调个包就行了
    ...
    npm source-map 库进行错误定位。SourceMapConsumer 构造函数传入.js.map文件，并为实例传入行号列号就能得到映射后的源行号列号

12. 说说你用了哪些页面媒体查询方案

    css @media ...

    还有别的吗？

    我真不知道了，但面试官也没有接着解释答案，网上也搜不太到

总结：

• 前端算法要求比较低
• 比较来说的话，字节更喜欢问八股，阿里更喜欢问项目
• 但是只背八股肯定不行，深度和实践一定要够。
  比如浏览器缓存，面试官不会让你介绍过程，反而会问你项目中的各个文件的具体缓存配置；再比如Etag字段还会问你内容具体是什么
  （我回答内容是Content-Length加Last-modified的哈希时，面试官竟然肉眼可见的惊喜...）
• 项目很重要，而且尽量得是自己写的，因为面试官竟然会看你项目的GitHub提交记录（字节和阿里都是），还会一直追问你各个地方的具体实现和想法

面试感受：

• 其实我个人更想去阿里，因为阿里项目问的比较细，所以有种和面试官灵魂对话的感觉——明显感觉面试小哥对技术很有热忱和激情，两边都在思考和挖掘技术点
• 字节虽然整体也不错，但感觉面试官不会过多在你身上下功夫，喜欢问通用的八股文。而且这里要再吐槽一下三面，三面氛围挺严肃，面试官很喜欢让你搜肠刮肚地讲，直到讲不动了为止，期间反馈也不多，整个人很慌。关键是最后反问环节问部门主要负责的内容时，他竟然给我很有激情地用互联网八股给我棒读了三分钟......隐隐约约有种去实习当炮灰的感觉
• 然而今年互联网情况太严峻，阿里日常实习秒挂、腾讯也不开，实在没地方能去了，所以还是接了字节offer