字节飞书前端一二三面面经

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

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

map频繁增删键值对的场景下表现更好，不过要解释清楚似乎有点困难，还好面试官没接着深究了
Hooks怎么封装一个移动端的滑动轮播插件？
Hooks怎么封装这里的手势逻辑？

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

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)

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

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

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

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

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

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

戳到软肋了，真不会
你有什么避免hooks重渲染的最佳实践吗？

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

你意思是传入内联对象和函数开销都很大？意思是平常开发都不准用内联对象和函数？
线上代码报错位置，怎么还原到开发环境下的原始报错位置？

调个包就行了
...
npm source-map 库进行错误定位。SourceMapConsumer 构造函数传入.js.map文件，并为实例传入行号列号就能得到映射后的源行号列号
说说你用了哪些页面媒体查询方案

css @media ...

还有别的吗？

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

总结：

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

面试感受：

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

#面试复盘##春招##实习##笔试题目##面经#