阅读 6491

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

一面

  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看看,我每天学了啥都会总结一下。
文章分类
前端
文章标签