【美团提前批】打车团队前端四轮面经
又快到秋招季了，我们近期会继续给大家带来一些校招的面经。
今天先给大家带来一篇美团的提前批面试经历。
可以把“提前批”称为互联网的“大牛”批次。
它的由来也挺有意思，曾经大家都是9月份开学后招聘，结果阿里和腾讯觉得自己有实力，得提前到8月份，先把最优秀的同学招完。
后来互联网公司还有很多做人工智能、芯片的公司觉得大家都是要顶尖人才，不能你一家招啊，就搞出一个提前批，在8月初就招，又过了一年，很多科技类公司，想要抢优秀人才的，就也模仿先行者，提前到七月底。
一年又一年，现在基本提前批能提前到六月份，大四还没毕业呢，大三的全职招聘就来了。
但是提前批一般不浪费秋招机会，大家都可以投递，但是筛选非常严格，面试也非常严格，只招聘最优秀的同学。不过提前批被筛选掉了，不影响秋招继续投递。
PS：最近慢慢有一种趋势，就是校招和提前批都混在一起了，没有提前批的概念了，就是整个秋招都全部提前了。
咱们下面直接进入面经环节。
一面
css实现动画，怎么让它执行完这个去执行另外一个keyFrame，你怎么知道这个动画什么时候结束 实现隔一段时间输出name
function A(name) {
this.name = name;
}
A.prototype.log = function() {
//每隔2s输出一下name
}
// 为啥下面这个代码会爆栈？用setTimeout来递归实现setTimeInterve()就不会爆栈
funtion fo(){
fo()
}
requestAnimationFrame实现一个移动的动画 react 性能优化你知道哪些？ react key的作用？如果出现了相同的key怎么办？ 实现组件一个react组件A,传入src='hello world'和target = 'world'让target高亮显示。 dangerouslySetInnerHTML 知道不？和innerHTML的区别 正则str = '1 apple cost 30$'匹配出这个30，尽可能多的方法，你听过环视吗？ 结构体转换，数组结构转换成树形结构。时间复杂度是多少？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: []
}
]
}
}
二面
对react的哪些点你比较熟悉 为啥要使用服务端渲染，为啥客户端渲染会首屏加载过慢？ 拿你是在什么时候拿这些资源呢？是在react生命周期里执行，还是在外面执行 你怎么把请求到的数据通过script标签传给前端呢？ 什么内容都可以往script标签里面塞嘛？比如
<script>
const store = {
a: '</script>'
}
</script>
直接往script标签里放值和 src="a.js" ,有啥区别嘛 返回的html带样式嘛？还是不带样式的 对于图片，你做过特殊处理嘛？ 手写图片懒加载 浏览器是有缓存的，你刷新的话会到你上次的浏览的位置，那上面的图片都会加载完对吧 如果有这样的一种情况，你这个图片经过了一些特殊处理，比如说transform，你怎么办？怎么避免 数组扁平化，怎么进行类型判断？ a = [[1,2],3,Set([4,5]),[[[[6]]]],a] 内部有环怎么办？ 这个算法的时间复杂度是多少 react key，如果没有怎么办？如果相同怎么办？ 下面代码，你怎么获取到你点击的是几个li
render() {
const list = arr.map(n => (<li><div><span>{data[n]}</span></div><li>))
return (
<ul onClick={this.handle}>
{list}
</ul>
);
}
下述代码的区别
opacity: 0;
color: #0000;
input type="file" 这个东西好丑，怎么让它变漂亮
实现一下那个购物车的动画效果，就是那个抛物线的效果，然后面试官就去接电话了
如果出现js阻塞怎么办，你的算法会收到影响吗？比如说下面这种情况，你丢帧了怎么办？
准备面试的时候，你有准备过哪些什么方面，你觉得会问到什么？
你有写过什么后端相关的东西嘛？
webpack编译前后有什么区别
webpack打包之后的代码报错了，怎么找到报错代码在哪
输入meituan.com，最后变成了bj.meituan.com发什么了什么
重定向是在服务端客户端？这个是301还是302
head里的html会显示出来吗？head里面的有啥东西
<head>
<div>1</div>
</head>
<script defer async>
三面
未来两三年有什么规划？你还会其他语言吗？编译原理会不？ 看代码说输出
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})
你的项目难点有什么？哪里复杂了 让下面的代码不报错，数组增序排列
var arr = [1,3,4,2,6,7,9];
arr.mySort();
内存里的栈和堆的区别 HTTP和HTTPS的区别 动画实现，css实现，js实现。如果阻塞了，卡了怎么办？ H5之前怎么实现drag 你知道浏览器事件有哪些？onload事件知道吗？ 求最长不重复字串，如1231456 => 231456 webpack实现，你有什么想法？ 你平时是怎么学习？写过什么小的demo吗？ 实现一下koa的中间件，这个run方法
var list = [function (next){
}]
function run(list){
}
HR面
这几轮笔试加面试你下来，你感觉怎么样？ 你的未来规划是啥？对于这个规划，你打算怎么实现它 说说你的大学吧，学习和生活 你是打算暑期实习？ 你平时都是怎么学习的？ 为啥来我们公司呢？ 你还有其他的面试吗？到哪一步了？ 来北京工作你怎么考虑的？
最后
最后，给“前端面试题宝典”的辅导服务打下广告，目前有简历指导、模拟面试和面试全流程跟踪的增值服务，如果有感兴趣的伙伴，可以联系小助手（微信号：interview-fe）了解详情。