美团点评 - 到店事业群 前端面经（3轮技术面+hr面）

__大大怪将军__
8,642 阅读5分钟

一面

  1. css实现动画，怎么让它执行完这个去执行另外一个keyFrame，你怎么知道这个动画什么时候结束
  2. 实现隔一段时间输出name
function A(name) {
  this.name = name;
}
A.prototype.log = function() {
    //每隔2s输出一下name
}
  1. 为啥下面这个代码会爆栈？用setTimeout来递归实现setTimeInterve()就不会爆栈
funtion fo(){
  fo()
}
  1. requestAnimationFrame实现一个移动的动画
  2. react 性能优化你知道哪些？
  3. react key的作用？如果出现了相同的key怎么办？
  4. 实现组件一个react组件A,传入src='hello world'和target = 'world'让target高亮显示。
  5. dangerousSetInnerHTMl知道不？和innerHTML的区别
  6. 正则str = '1 apple cost 30$'匹配出这个30，尽可能多的方法，你听过环视吗？
  7. 结构体转换,数组结构转换成树形结构。时间复杂度是多少？hashmap的实现知道不？
[
 {
 id: 'A',
 children: ['B', 'C', 'E'], // 根节点
},
{
 id: 'B',
 children: ['D'],
},
]

A 
| \ \
B C E
|
D
=>

{
 id: 'A',
 children: [
  {
    id: 'B',
    children: [
            {
                id: 'D',
                children: []
            }
    ]
  }
}
  1. 第一题真的把我问蒙了，css动画怎么知道它执行结束了，百度也没有找到结果。后来问了二轮面试官，他说就是animation里面定义动画的时间，每个动画执行多少秒，然后接下一个。
  2. 那个正则题目，除了普通的/(\d+)?/g匹配之外，还可以用断言/\d+(?:$)/g，和面试官说的环视，可以去看看正则

二面

  1. 对react的哪些点你比较熟悉
  2. 为啥要使用服务端渲染,为啥客户端渲染会首屏加载过慢？
  3. 拿你是在什么时候拿这些资源呢？是在react生命周期里执行，还是在外面执行
  4. 你怎么把请求到的数据通过script标签传给前端呢？
  5. 什么内容都可以往script标签里面塞嘛？比如
<script>
const store = {
    a: '</script>'
}
</script>
  1. 直接往script标签里放值和<script src="a.js">,有啥区别嘛？
  2. 返回的html带样式嘛？还是不带样式的
  3. 对于图片，你做过特殊处理嘛？

上面这些题都是SSR相关的问题，问的是真滴深。如果你往简历里写了SSR,你一定要做好上述准备哦

  1. 手写图片懒加载
  2. 浏览器是由缓存的，你刷新的话会到你上次的浏览的位置，那上面的图片都会加载完对吧
  3. 如果有这样的一种情况，你这个图片经过了一些特殊处理，比如说transform，你怎么办？怎么避免
  4. 数组扁平化，怎么进行类型判断？
  5. a = [[1,2],3,Set([4,5]),[[[[6]]]],a] 内部有环怎么办？
  6. 这个算法的时间复杂度是多少
  7. react key，如果没有怎么办？如果相同怎么办？
  8. 下面代码，你怎么获取到你点击的是几个li
render() {
  const list = arr.map(n => (<li><div><span>{data[n]}</span></div><li>))
  return (
    <ul onClick={this.handle}>
    {list}
    </ul>
  );
}
  1. 下述代码的区别
opacity: 0;
color: #0000;
  1. <input type="file">这个东西好丑，怎么让它变漂亮
  2. 实现一下那个购物车的动画效果，就是那个抛物线的效果，然后面试官就去接电话了
  3. requestAnimationFrame，算他的执行间隔
  4. 如果出现js阻塞怎么办,你的算法会收到影响嘛？比如说下面这种情况，你丢帧了怎么办？
for (let i = 0; i < 10000000000; i++) {

}

每次都只收集一部分，当requestIdleCallBack执行了说明这个requestAnimationFrame执行是正常的，可以收集起来

  1. 面试的时候，你准备什么方面嘛？你觉得会问到什么
  2. 为啥要有vitual dom? 你有看过源码嘛？
  3. 你有写过什么后端相关的东西嘛？
  4. webpack前后有什么什么区别
  5. webpack打包之后的代码报错了，怎么找到报错代码在哪
  6. 输入meituan.com,最后变成了bj.meituan.com发什么了什么
meituan.com 
bj.meituan.com
  1. 重定向是在服务端客户端？这个是301还是302

301

  1. head里的hmtl会显示出来嘛？head里面的有啥东西
<head>
<div>1</div>
</head>
  1. script标签放在header里和放在body底部里有啥区别
  2. 下面这个defer async区别
<script defer async>
  1. 面试官是一个小哥哥，题量特别大，问了我80分钟吧。每到题都展开深入的问，一直往下问，SSR问了我8个问题，图片懒加载也问到我不知道为止。不过，这轮面试是我感觉最好的一次面试了吧，因为问的题目我感觉都知道，都实践过，所以也没怎么慌张。
  2. react的key的作用，也是高频考点，这也是第三次被问了。

三面

  1. 未来俩三年又什么规划,你还会其他语言嘛？编译原理会不？
  2. 看代码说输出
function foo(){
  var b = 2;
  // 1
  console.log(b + this.a)
}
function foo1(){
  var a = 4
  // 2
  console.log(a + this.a)
  foo.call(this)
}
foo1.call({a:122})
  1. 你的项目难点有什么？哪里复杂了
  2. 让下面的代码不报错，数组增序排列
var arr = [1,3,4,2,6,7,9];
arr.mySort();
  1. 内存里的栈和堆的区别
  2. http和https的区别
  3. 动画实现，css实现，js实现。如果阻塞了，卡了怎么办？
  4. H5之前怎么实现drag
  5. 你知道浏览器事件又哪些？onload事件知道嘛？
  6. 求最长不重复字串，如1231456 => 231456
  7. webpack实现，你有什么想法？
  8. 你平时是怎么学习？写过什么小的demo嘛？
  9. 实现一下koa的中间件,这个run方法
var list = [function (next){
//异步调用
}]

function run(list){

}

这轮面试官已经好和蔼，这次的题也简单好多，题量也少了很多。第九题的这个算法题，高频考点啊，这是我第三次被问到了

HR面

  1. 这几轮笔试加面试你下来，你感觉怎么样？
  2. 你的未来规划是啥？对于这个规划，你打算怎么实现它
  3. 说说你的大学吧，学习和生活
  4. 你是打算暑期实习，还是？
  5. 你平时都是怎么学习的
  6. 为啥来我们公司呢？
  7. 你还有其他的面试嘛？到哪一步了？
  8. 你是江西的，来北京工作你怎么考虑的？

HR是一个超漂亮的小姐姐，很温柔。HR面实话实说就好了，面试官就是想看看你的人品咋样，是否可以来上班之类的

总结

  1. 关于算法，算法是基本功，时间复杂度的计算啊之类的。去力扣上刷题目吧，挺有用的，刷大概150 160道，我觉得面试里的算法题应该就不会觉得难了吧。
  2. 多多敲代码吧，我还是经验不足，多多实践就会再面试中更有底气，面试官出一道题目，你写过代码，这多爽啊。
  3. 关于网络方面，感觉必问啊，HTTP、HTTPS、TCP、DNS,状态码之类的，可以去我的GitHub看看，我每天学了啥都会总结一下。
avatar
文章
阅读
粉丝