记一次高级前端开发工程师面经

点击关注下方卡片关注我????????

回复“面试”查阅 面试精选文章

前言

#面试挺累人的，每天下班后赶回家饿着肚子面试，面了将近一个月，大概就一个中厂的水平吧。面试完最好进行一个复盘，查漏补缺。

一、携程

1. 对着简历问一遍

2. rem, 计算出375的屏幕，1rem,单位出现小数怎么处理

3. javascript精度问题的原因

4. axios用途

5. 性能优化的点，webpack分包，首页资源大小，请求优化，gzip之前还是之后，React重新渲染

6. 国际化站点，cdn, 在页面什么阶段加载国际化文件，如果有20多个语言该怎么做

7. ssr有没有用过

8. 项目中websocket是解决了什么问题

9. DOM, BOM, js的关系

10. React dom绑定事件，与原生事件有什么区别

11. http2多路复用

代码题

 if (!('a' in window)) {
   var a = 1;
 }
 console.log(a); 

    var a = {}; var b = {}; var c ={};
    console.log(a === b);
    console.log(b === c);
    console.log(a === c);

    var d = e = f = {};

    f = {}
    e = f
    d = e

    console.log(d === e);
    console.log(d === f);
    console.log(e === f);

米哈游：

1. http状态 301，302， 304,缓存相关字段

2. cookie、ws是否跨域

3. 触发bfc的方式

4. rem和vw的使用场景

5. 伪代码实现下懒加载

某外企:

一、

1. 下面函数是闭包吗？
   

const func = ()=> {
   const a = '111'
   const fun2 = ()=> console.log(a)
   return ()=> console.log('_')
}

const next = func()

'12345'.split('')
上述代码发生了什么

下面代码打印的是
console.log("12345" instanceof Object);

1. 实现一下some, every
   

2. flatten实现
   

const promise = new Promise(resolve => {
  console.log("11111");
  setTimeout(() => {
    console.log("22222");
  }, 0);
  resolve();
  console.log("resolve");
  throw new Error("error");
  console.log("error");
});
promise
  .then(
    () => {
      console.log("33333");
      setTimeout(() => {
        console.log("44444");
      }, 0);
    },
    () => {
      console.log("reject");
    }
  )
  .catch(() => {
    console.log("catch");
  });
console.log("55555");

1. 函数组件怎么阻止重复渲染

二、

1. AST作用 or babel实现原理

2. 实现自定义hooks,usePrevious。setcount(count => count + 1)后输出上一次count的值

美团：

一、

1. 自我介绍中提到了性能优化， 说了说性能优化的点

2. 不同域名共享cookie

3. on, emit, 实现

4. 防抖的实现

5. 输入url到页面返回结果

6. 缓存的实现方式

7. React组件重复渲染

8. webpack分包

字节：

一、

1. Webpack 插件，生命周期

2. umi约定式路由怎么实现的

3. babel实现远原理

4. React ref

5. fib实现，如何优化

盒马：

一、

1. 说出你最擅长的部分，追问

2. webpack拆包的依据。1.被多个模块使用，cache起来 2.资源过大

3. canvas 点击线段事件。重合区域怎么处理

4. webWorker的使用：为什么不在worker里面发出请求，做数据转换呢？

太美医疗：

1. generate函数和async区别

2. webpack插件实现

叮咚买菜：

一、

1. Vue， React使用情况

2. 父子组件的mounted 调用顺序

3. $nextTick实现原理

4. 子元素水平垂直居中

5. 斐波那契数列如何优化

6. 业务题：封装一个全局的弹窗，在任何组件内都可以调用。追加：如何同时打开5个弹窗，关闭顺序又如何

二、

1. 封装Vue插件

2. 5个弹窗

3. $nextTick原理

4. 手机号码分割 _ _ _ - _ _ _ _ - _ _ _ _

5. 最大字符串数， “abcdabcda” 求最长的不重复字符串

6. 兄弟组件通信

7. vuex 模块化怎么做

8. 不同域名如何共享cookie

总结:

对于3～5年的前端开发来说，不应该仅仅是停留在会用API的层面，至少要关注到你使用的技术的一些原理实现。这也是大厂考察候选人钻研精神吧，相对来说有一个区分度。个人建议最好精通一个方向，比如：

• 前端工程化，webpack, babel, Node 等。

• 精通框架源码

• 可视化，3D方向

• 流媒体，音视频

当然，如果要进大厂的同学，还得突击一下算法部分。leetcode 简单和中等难度就可以。

作者： 唯依绾青丝

https://juejin.cn/post/6951407692011274247

END

推荐阅读  点击标题可跳转

入职微软一月后的感悟，谈谈面试经历及入职体验

21道关于性能优化的面试题(附答案)

高频前端面试问题及答案整理

关注下方「前端开发博客」，回复 “加群”

加入我们一起学习，天天进步

如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~

   “分享、点赞、在看” 支持一波