朴朴23秋招前端一二面面经（已offer）

福州疫情原因，均为腾讯会议线上进行。

一面 （30min）

1. 自我介绍
2. Vue响应式原理
3. Vue2、3区别
4. 浏览器和Node.js事件循环
5. 浏览器更新队列，即关于Dom操作的性能优化
6. BFC？清除浮动？
7. 场景：如何全局维护用户个人信息，避免重复请求个人数据？
8. 衍生问题，如何防止重复请求，即在统一时间内不重复对后端业务接口进行请求操作。
9. 反问

二面（40min）

HR旁听，所以没有HR面；

1. 自我介绍

2. 手撕：实现 Promise.retry，成功后 resolve 结果，失败后重试，尝试超过一定次数才真正的 reject，同时超过10s自动失败 。

   Promise.retry = function (promiseFn, wait = 10000) {
       let times = 3;
       return new Promise(async (resolve, reject) => {
           const timer = setTimeout(() => {
               reject('timeout');
               clearTimeout(timer);
           }, wait);
           while (times--) {
               try {
                   const res = await promiseFn();
                   resolve(res);
                   clearTimeout(timer);
                   break;
               } catch (err) {
                   if (!times) {
                       reject(err)
                       clearTimeout(timer);
                   }
               }
           }
       });
   };
   
   
   // 测试代码
   
   function getProm() {
       const n = Math.random();
       return new Promise((resolve, reject) => {
           setTimeout(() => n > 0.9 ? resolve(n) : reject(n), 1000);
       });
   }
   
   Promise.retry(getProm);
   

3. 如何学习前端？看什么书？

4. 最近关注的技术前沿？

5. 微前端的两种主要实现方式，他们俩之间有什么区别？

6. 手撕：TS 工具类型 FirstChar<T>

   type A = FirstChar<'BFE'> // 'B'
   type B = FirstChar<'dev'> // 'd'
   type C = FirstChar<''> // never
   

   TS支持字符串使用infer推断，语法和模板字符串相似，因此使用infer即可完成。

   type FirstChar<T extends string> = T extends `${infer T}${any}` ? T : never
   

7. 看代码：使用React.memo等缓存组件或者组件参数，并说出等效替代方案。

8. 讨论一下我们线下笔试的最后一题，有什么更优解法，说一下这几种解法的时间复杂度？ 661.有效三角形的个数

9. 反问

引流：腾讯，华为，字节，百度，美团，阿里巴巴，海康威视，科大讯飞，大疆，哔哩哔哩，B站