美团点评-餐饮SaaS 前端四面总结（已拿offer）

一面、二面和HR面之前面完写过一次，没想到又加了一轮，索性整合到一起方便大家查阅

时间轴

笔试（3.12） ==> 一面3.18（基础面 1h30min） ==> 二面 3.23 （业务面 36min）
==> 三面 3.24（HR面，1h）==>加面3.31（主管面，2h）==>谈薪资（4.2）

美团点评（一面）1h30min

自我介绍(先是自我介绍讲了一下自己学习前端的经历，实习期间做的事，看了什么书)
CSS position属性，区别
CSS可继承的属性值（font-size,line-hight）
px、em、rem的区别（em根据当前字体大小转换成px，rem根据根节点html字体大小计算）
- vw、vh的用法（按视窗的百分比计算，1vw为窗口的1%，100vw撑满，MDN）
font-size ，line-height判断

/* CSS */
<style>
.p1 {font-size: 16px; line-height: 32px;}
.p1-1 {font-size: 2em;}
.p1-2 {font-size: 2em; line-height: 2em;}
.p2 {font-size: 16px; line-height: 2;}
.p2-1 {font-size: 2em;}
.p2-2 {font-size: 2em; line-height: 2em;}
</style>
<div class="p1">
    <div class=“p1-1">1</div>
    <div class=“p1-2">1</div>
</div>
<div class="p2">
    <div class=“p2-1">1</div>
    <div class=“p2-2">1</div>
</div>

css作用域（选择器）权重（id>class>标签>通配符）怎么计算（按位统计，id,1;class,3;p,1=> 1310）
- 条件选择器（否定选择器），有没有单独的权重？（不了解）（权重应该类似于伪类选择器）
- 权重相同的情况呢？（后者覆盖前者，两个都是绿色）

<div class="red">
    <div class="green">
        <p>1. 颜色是？</p>
    </div>
</div>
<div class="green">
    <div class="red">
        <p>2. 颜色是？</p>
    </div>
</div>
.red p { color: red; }
.green p { color: green; }

了解JS的继承吗？ES5继承与ES6继承的区别？
- 原型链继承、构造函数继承、组合继承、寄生继承、组合寄生继承
- Object.create()做了什么（function f(){};f.prototype=obj;return new f();）
- new操作做了什么，返回什么？(var obj = {};var res = func.call(obj);return typeof res === "object"?res:obj)
- ES5组合继承时先有子类对象还是先有父类对象？（先有子对象，因为new操作符会先生成一个空对象然后再调用构造函数）
- ES6的呢？（应该是反着的）（阮一峰的ES6入门）
令对象不可新增属性，但是可以修改当前属性用什么？（object.seal和freeze）（应该是用Object.preventExtend）
- Object.seal与Object.freeze的区别（freeze冻结对象）（preventExtensions < seal < freeze;）
- Object.freeze是冻结对象是彻底冻结吗？（不是，只冻结一层，如果属性是对象，该属性的属性可以修改。彻底冻结需要递归）
Vue双向绑定原理（数据劫持 Object.defineProperty，事件监听 eventBus）
- 从defineProperty到Proxy的原因(属性遍历劫持VS对象劫持，支持数组操作)
- Vue2.0怎么处理数组方法（通过替换数组原型，劫持原型链方法）
Vue与React的路由怎么实现
- history与hash方式的原理（不晓得）（看这个）
React的生命周期？父组件与子组件串起来的是什么样的（对React不太熟）
- 会看框架源码吗？（看的Vue）
Vue 的nextTick怎么用？怎么保证在任务执行前执行（~~就是node的nextTick~~）感谢@俺也想要一个offer的指正

作者：俺也想要一个offer
链接：https://www.nowcoder.com/discuss/387152
来源：牛客网

vue的nextTick和node中process.nextTick没关系，一个是在浏览器执行，一个是在node环境下，他依次检测(如果检测到就用)promise，mutationOberserve，setInterval，setTiemout，其实主要作用是可以在created生命周期以后访问data，可以立马异步获取渲染数据
- node事件循环（六个阶段，每阶段结束后都会检查nextTick队列并执行）
- 浏览器的时间循环（微任务与宏任务）一个宏任务清空一次微任务队列
- 哪些属于微任务（Promise.then()，Object.observe）
浏览器JS标签的加载顺序（从上到下，阻塞DOM；另外还有defer和async模式）
- 讲一下defer与async（defer在页面加载完之后执行，async获取js时不阻塞，获取完成之后立即执行并阻塞）
- 分别用在哪种场景（defer用在需要操控DOM元素的，async用于与DOM无关的）
浏览器在跨域(CORS)时会进行检查（检查响应头的origin，不匹配就拒绝掉）
- 什么时候发起预检（Option）请求（非简单请求：方式：非get、post||类型：JSON格式||有自定义请求头）
- 前后端跨域的cookie怎么传递（设置withCredentials，传递的是后端对应的cookie）
页面监控，捕获报错（try...catch）（window.onError）
- 监听DOM元素的改变的接口，节点变化的检测（不记得了，直接说不清楚）（MutationObserver、脏值检测、数据劫持）
Vue模板到可被浏览器解读的文件的过程（转抽象语法树然后输出）面试官不太满意，评论区等大佬补充
CSS z-index还会有什么属性影响（position不为static）
- 如果postion都是relative；display：inline，block，float对z-index的影响（不清楚）（待测试后补充）
对象属性遍历（for...in，会获取到原型链上的属性，用hasOwnProperty过滤）
- Object.keys知道吗？（也可以遍历对象的）能拿到原型链吗？（不能）
- JSON.stringify与前面的有什么区别？（序列化的时候遇到undefined和函数的时候都会跳过）
CSS的计数器（没听过）（MDN跟伪元素搭配使用，可以用于构造列表的自定义序号）
CSS三角形（border，三边透明，用border宽与盒子的宽高比来控制三角形形状）
浏览器事件模型（先捕获后冒泡）
- 添加***的第三个参数（useCapture为true是在捕获阶段，默认false）
- 第三个参数还可以是option对象，对象的属性passive是干什么的？（不知道）（MDN上解释passive使preventDefault失效）
JS隐式转换规则：null与undefined转换成数字（转成0吧，然而不对）（null=>0，undefined=>NaN）
浮点数的精度问题（二进制转换精度丢失）
- 怎么解决？（转换成整数计算再转换回去）
编程题（打算用两层循环遍历，没做出来）参考

var list = [['热', '冷', '冰'], ['大', '中', '小'], ['重辣', '微辣'], ['重麻', '微麻']];

// 输出所有维度的组合，如 [['热', '冷''], ['大', '中']]  => 热+大，热+中，冷+大，冷+中
function compose(list) {
  console.log('hello world');
}
compose(list);
//当时没有写出来，后面在网上看到的解答后修改了一下
function compose(list){
  var res = list.reduce( (result, property) => {
    return property.reduce( (acc, value) => {
        return acc.concat(result.map( ele => [].concat(ele, value)));
    }, []);
  });
  return res.map(arr=>arr.join('+'))
}

有什么问题想问的吗？
- 笔试跟面试的占比（主要看面试，笔试只做参考）
- 公司用的技术栈（React、Vue比较多，Angular、node比较少）

面试时间这么长是因为中间视频总是卡，一会就要重连一次，后来直接用电话沟通的。牛客的视频面试系统稳定性还是有待加强啊，

美团点评（二面）36 min

在小米实习过？介绍一下实习的工作
- 做的事情，遇到的需求、用的技术……
主要是PC还是M端上的？（都有）
用的技术栈是一样的吗？（是的）
- 为什么用jQuery ？（入职前公司就是用的这个）
- 补充了一下正在用React做重构
做了哪些页面，简单介绍一下（mi-note-10，滚轮动画，印度tv55）
滚动动画怎么实现

监听滚轮位置，动画盒子与滚轮盒子相互配合，动画盒子固定定位展示动画，滚轮盒子撑起高度与滚动距离，将滚轮滚动距离配合动画长度，转成百分比控制进度
遇到的问题

半屏动画时，动画的下一块会被滚轮盒子挤开，需要加上fixed同时算入滚轮盒子的高度中
动画内容怎么实现，用的jQuery的动画库

js添加类名，提前设置好样式与更新，配合 CSS 动画
PC与移动端两套代码吗？（移动端动画会简化）
动画的资源很多，怎么页面性能优化

上传前压缩，非首屏内容懒加载
怎么懒加载？

src置空，添加data-src或者用image对象配合canvas画图
达到的效果？（加载时间减少2秒左右）
- 怎么看的加载时间（本地看，lighthouse）
Lighthouse有哪些优化的建议

缩减JS的关键路径、白屏时间、首次渲染时间、CPU空闲时间，转换资源格式，区分首屏资源与非首屏资源
CSS动画与Canvas动画的区分，选择的原因（加载图片量的大小）
- 替换图片的src也可以实现，为什么要用canvas呢？（控制图片加载时间，可以不用等图片替换后再请求资源）
除了产品展示之外还接触了什么？（框架重构）
讲一下重构
- SAP对SEO的支持不太好，用SSR配合SAP处理
为啥要重构（架构升级、页面层次结构优化）
每一个产品都有一个页面，不同产品的开发效率怎么样（分复杂度，纯图片半天、静态页一天、加动画三天）
有什么积累（动画效果组件，拖拽式建站）
你开发过组件吗？（本来是有的，后面没来得及就离职了）
除了这个还做了什么业务？（其他业务只做了解，没有机会操作）
技术上的难点（轮播图组件功能不足，查源码，自己封装api）
有没有看过竞争者的产品展示（vivo、华为、苹果）

文字上浮、滚轮动画
看完有啥收获（设计起来做的很巧妙，有些地方完全没想到）

苹果的airpods动画，canvas不撑满整个屏幕，用transform缩放，canvas绘制区域越大性能消耗越多，scale配合高分辨率也能达到相同效果
怎么发现的？（开发者工具，看源码）

源码看起来很奇怪，脱敏
这种功能怎么实现（webpack插件）
插件怎么实现（生命周期钩子加上处理函数）
写过插件吗？（冒油，只了解原理）
还有其他的项目吗（Vue聊天室开发）
这个到实习之间在做什么呢？（本专业的技术java、C#、数据库之类的课）
前端框架有什么了解（Vue框架，看源码）
写过什么项目（自己封装提示符组件之类的）
小米的站点用vue重构（按块封装组件，按结构分成几种类型的组件，固定的内容直接封组件，用组件）
手上有啥offer（有两个……）
未来的职业规划（两年之内，自身技能提高）
工作地点（上海，不想异地）
对美团有什么想了解的？
- 团队做的事情，提升的机会（餐饮Sass……，半年一次考评）

美团点评（HR面 1h）

太长不看版

为什么选择上海、有没有打算留下来
参与的项目的质量、个人学习能力与总结能力
为什么选择前端这个行业？
实习做的内容，质量、收获
个人对需求的思考、优化改进思路（自我提升意识）
面对困难的处理方式
与人沟通的能力，是否容易起冲突
抗压能力，加班的接受程度
个人爱好
对公司的了解程度、是什么吸引了你
有什么想问的

详细内容

自我介绍（学习前端的经历、小米实习的内容，学习方法）
实习期结束了吗（12月离职的）
人在武汉吗？情况怎么样？能自由通行吗（在荆州，只能县内通行）
为什么要去上海（女票在上海读研，不想异地）
- 如果女朋友留在武汉，你就会留在小米转正吗？（女票比我高一届，本来就没打算留小米，实习时就在找上海工作）
- 之后打算在上海长期发展吗（是的，她算留上海，我爸妈也支持我在上海发展）
讲讲前端训练营（讲了一下学校跟360的合作培训模式）
- 报名有什么要求吗？（有考试，中期有中期考核，最后项目实战）
- 一年下来有什么感受（搭建起前端相关的知识体系了，知识的系统性）
看你的经历里也学了后端，为什么会选前端（前端离用户更近，工作成果更明显，成就感更足）
说说小米的实习经历吧
- 站点迁移与维护是什么（同一件商品不同国家站之前需要进行文件修改，调整，页面出了BUG需要修复）
- 看了一下你简历里面放的链接，加载有点慢（海外站点服务器在海外，页面图片比较多）
- 这个页面哪些是你做的，讲一讲（页头、导航栏、页尾的网站地图是统一的，其他都是自己做的）
- 外国的官网与小米中国的官网有什么区别，开发起来有啥不一样（文字长度会波动，文字会撑开挡住背景，埃及文字从右向左）
- 有什么解决方案（文字居中定位，埃及的手工调整文字方向）
- 埃及站如果需求很多，你有什么比较好的方式（自动化构建插件、抽离公用样式）
- 国内跟国外视觉上的区别（海外的比较重图片的视觉冲击，国内的文字展示为主）
- 然后扯到多端适配，不同分辨率下的显示区别，响应式布局、媒体查询
- 怎么发现这个问题的呢？（业务开发中会跟运营跟产品合作，电脑大小不一样）
说说在小米实习的收获吧（实践能力的提高、兼容性与响应式、性能优化，合作工作流程，方式）
遇到的比较大的挑战（mi-note-10d的实现滚轮动画的需求，怎么实现的动画，怎么学的）
有什么挑战比较大的问题吗（miui11的动画，做了几版效果，巴拉巴拉）
是自己想到的解决方案吗（产品提需求，然后自己实现）
有问过产品的需求吗？正常不是放个视频自动播放的吗（这个是产品要求的，本来也是放动画，后面看了苹果的AirPods的页面展示，发现用帧动画交互更好，视频达不到这种效果）
动画实现的好像有一些小缺陷（这个动画效果跟我做的有点不一样，可能是离职后被别人改过了）
有需要跟其他部门的协作吗（跟产品和运营人员的的沟通）
如果产品态度比较强硬呢（看需求的合理性，举了一下上面那个note-10的过程中遇到的矛盾，以及解决方式PS.搞不定了找组员沟通，再不行跟组长反馈）
有没有想过两难的事，可以通过技术上解决（是呀，已经从技术上改进过了，已经是当时的最佳的实现了）
后面有没有想过有什么提升方向吗（把动画中的图片抽帧，之前的动画帧数实际上是不需要那么多，然后就能减少请求的资源总量）
为什么动画会有300多张图呢？（是把一段视频按帧提取的，产品改需求）
没有发生什么不愉快的吧（可能对方言辞上有些激烈，但没有吵起来，都是慢慢沟通的）
组内有多少人（二十多个吧，然后海外商城有3到4个左右）
看得出来这个项目还是很关键的，有师傅带你吗？还是直接参与进来的（之前也做过一些比较复杂的页面实现，反响都很好，才参与到这次的项目里）
工作压力大吗？（两段时间压力比较大，一个是印度站三个需求堆在一起，一个就是note10平时都是7点到8点下班，弄note10每天9点多才下班，印度的有一天弄到凌晨2点）
这个程度还行吗，hold住吗（还好，搞得定）
- 工作如果需要加班的话，你能接受吗（可以啊，还年轻）
- （笑）你平时什么时候睡？（现在都是12点睡，大二期间比较晚1点多才睡）
- 为啥大二那么晚睡（课程压力大，同时培训营也有很多作业）
有什么爱好（跑步、打球、看书、偶尔玩玩手游）
看什么书（技术书籍、科幻小说）
对美团期待（想锻炼自己的技术水平与实战能力）
对美团的了解（忠实用户，外卖、住宿、景点门票、电影票，你想问什么？）
有没有了解过美团的企业文化和其他吸引你的地方（了解过、大概说了一下美团的发家史。师兄说福利待遇也挺好，健身房、房补之类的）
跟前两轮面试官聊得怎么样（聊得很开(jian)心(nan)，简单了解一下团队——餐饮SaaS的业务）
有什么想了解的
- 餐饮SaaS的前景和大概情况（公司重点部门、做的什么事）
- 新人培训机制（导师制、内部培训、内部学院）

美团四面 3.31（主管面 1h40min）

好像面试官也是临时得到通知，要加面，然后上来就先自我介绍，接着聊了会天，说了一下前端的发展方向（估计是在拖时间找题目），后面的面试基调也差不多是这样，整体感觉交流的成分比较多，

对前端的理解（基础：三剑客，提升：框架+性能+网络、自动化构建之类的，再就是大前端，全栈）
- 面试官说了他对nodejs看法，现在都是一些小规模的应用（我说听淘宝的师兄说他们有用node做服务器的全栈开发环境）然后开始说全栈的优点，聊得很开心，跑题了，哈哈。
了解我们团队吗（餐饮SaaS，具体的不是很清楚）
- 面试官就说了餐饮SaaS的应用场景，涉及到的业务、服务项目，做这个的意义。然后又展开说团队的氛围，在做的事。
怎么学习前端的（技术书籍，掘金、segmentfault技术文章，Google）
在小米实习过程中做的事（把之前说的重复了一遍）
- 滚动动画具体说一下（动画块固定，插入高度盒子用于滚动，滚轮位置转换为动画进度，修改样式、类名，或者操作canvas）
在小米做的都是页面展示的工作有没有一些组件积累（有一个组件库，动画库，正在做可视化建站的平台项目，贡献了一个动画）
- 面试官就讲了一下对组件化开发的理解，以及美团在组件化开发上的实践（好像他们正在做一个统一的架构或者说解决方案）
- 了解antd吗（阿里的一个开源UI组件库）然后说antd只是一个ui层面的框架，还介绍了umijs，涵盖UI后面的路由框架和逻辑框架，可插拔式的应用，又说了一会。
好了，偏题了，来问你几个问题
mvvm了解吗（说了什么事mvc框架，mvvm则是把controlor层变成了viewmodel层，因为前端涉及到的逻辑主要都是model到view的映射）

来个基础题

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function () {
    console.log('setTimeout');
}, 0);
async1();
new Promise(function (resolve) {
    console.log('promise1');
    resolve();
})
.then(function () { console.log('promise2'); });
console.log('script end');
/*
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/

说了一下 async、promise、setTimeout的运行机制，然后走了一遍流程，面试官表示OK，基础不错（注意一下宏任务微任务执行顺序就好）

知道数据双向绑定吗？实现一下（具体实现就不献丑了，思路就是就写一个Object.defineProperty循环遍历属性实现数据劫持，然后在写一个eventEmit实现事件的发布订阅，然后注册回调函数，修改数据时触发事件）
了解ES6吗？（了解一些，块级作用域，箭头函数，解构析构，剩余参数，Set和Map，promise，generate，async，class、module）
- 好了，你基础应该蛮扎实的我就不问你这个了（笑）
未来的职业规划呢？有想过往哪个方向发展吗？或者说两三年内的目标（想在技术上进一步的提升，暂时不考虑转岗）
- 考研呢？有想过吗（我觉得相比读研搞学术发文章或者跟老师干项目，在公司里面锻炼学到的更多，就没有考研）
- 你说的没错，不过其实读研还是有用的，可以提升眼界，以后好转型，总不能一直都写代码吧，我们很多的同事都有读一个在职研究生。（嗯嗯，我会考虑的）
对团队氛围有什么要求吗？（我觉得搞技术的团队气氛应该都蛮好吧，工作时间之类的有硬性指标吗）
- 早上10点上班，晚上没啥事7点多就可以走了，有紧急需求可能会晚点，不过一般都是8点后下班有餐补
有啥想问的吗？（之前看了一些美团技术博客上的文章，想了解一下里面的机制，是怎么运行的）
- 每个月都会放一个主题，觉得感兴趣就写文章，然后上交评审会，审核通过后月底一起发。（这个是自发的吗？还是有规定）
- 每个人自己定的OKR，规划要发几篇就自己去实现。（还不错的呀）
再给你介绍一下团队吧，然后说了一下上海厦门两个分部，分别负责不同的部门，上海比较偏财务类，做的事前面也说过了，也是美团的核心部门巴拉巴拉的。