美团点评 3.18前端面试总结（一面1h30min）

二面三面都面完啦，链接地址在下面
美团点评 3.23前端面试总结（二面36min）

美团点评 3.24前端面试总结（HR面 1h）

正文

• 自我介绍(先是 自我介绍 讲了一下自己学习前端的经历，实习期间做的事，看了什么书)

• CSS position属性，区别

• CSS可继承的属性值（font-size,line-hight）

• px、em、rem的区别（em根据当前字体大小转换成px，rem根据根节点html字体大小计算）

  • vw、vh的用法（按视窗的百分比计算，1vw为窗口的1%，100vw撑满，MDN）

• 判断下面代码中div的font-size ，line-height的computed value。答案已经标注在后面了

/* 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> //font-size:32px line-hight:32px
    <div class=“p1-2">1</div> //font-size:32px line-hight:64px
</div>
<div class="p2">
    <div class=“p2-1">1</div> //font-size:32px line-hight:64px
    <div class=“p2-2">1</div> //font-size:32px line-hight:64px
</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）（见评论区9#解答）
  • 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模板到可被浏览器解读的文件的过程（转抽象语法树然后输出）面试官不太满意，评论区等大佬补充
• 编程题（打算用两层循环遍历，没做出来）参考

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('+'))
}

视频通话总是一会就卡住，然后转成电话聊了

• 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）
• 浮点数的精度问题（二进制转换精度丢失）
  • 怎么解决？（转换成整数计算再转换回去）
• 有什么问题想问的吗？
  • 笔试跟面试的占比（主要看面试，笔试只做参考）
  • 公司用的技术栈（React、Vue比较多，Angular、node比较少）

面试时间这么长是因为中间视频总是卡，一会就要重连一次，后来直接用电话沟通的。牛客的视频面试系统稳定性还是有待加强啊。
整场面试下来感觉压力很大，面试官对知识点挖的很深，顶不住啊。不过幸运的是第二天居然收到了二面通知，约在3月23上午（下周一），祝我好运吧（二面别被问的这么惨）