前言

今天给大家带来一篇美团前端校招的面经，虽然只有第一轮面试的经历，但对知识点的考察还是比较全面，特别是框架相关的问题比较多，值得大家学习。

问答题

• react 和 vue 有什么区别？
• vue 文件是如何渲染到页面的。html是如何加载这个文件的。
• template中有一些标签，经过webpack打包后，会是什么样子
• vue的双向绑定基本原理
• 在vue3中数据劫持使用了proxy，为什么要这样？之前的方法有什么缺点？
• vue2中如果要监听数组下标的变化，应该怎么办？
• 如果有个列表之前是1,2,3,4，现在是2,3,4,5，那么vue的diff算发怎么进行比较这些节点（四个指针，比较四次，分别是首首、尾尾、首尾、尾首），何时会结束比较？
• vue的虚拟节点VNode有哪些属性？
• vue有个类似createElement的方法，接收哪些参数？
• react的生命周期有哪些？render在哪两个之间？
• 一个父组件里面有一个子组件，这两个组件的生命周期（willMount/render/didMount这三个）顺序是怎样的？
• 事件捕获和冒泡的先后顺序

• react组件中有个button定义了onClick事件，对于这个button，另外通过addEventListener监听了click事件，那么点击这个button的时候，会先执行哪个？

• react的setState是异步的吗？什么时候异步？通过什么判断？这个变量什么时候变为true、什么时候变为false？由谁控制？

• html文件中有三个script标签，执行顺序是怎样的？如果第二个有async属性，执行顺序是怎样的？如果第一个是async属性，顺序又是怎样的？
• 如何检测性能？如何知道监控首屏加载时间？如何知道某个事件用时多久？
• 有些静态资源会放在CDN，这样有什么好处呢？
• position：absolute绝对定位，是相对于谁的定位？父元素可以是 sticky 定位吗？
• css优先级中，!important和内联属性哪个更高？
• 浏览器如何算出每个标签的属性的权重？如何计算每个标签的属性，如下，如何知道p是什么颜色

<div class="red">
  <div class="green">
    <p>p: 颜色</p>
  </div>
</div>

.red p { color: red;}
.green p {color: green;}

• z-index 总是有效的吗？什么时候会无效？上面如果给 .red 设置 z-index 为2，给 .green 设置 z-index 为1，这个p会是什么颜色呢？
• 下面代码会输出什么？

foo();
var foo;
function foo(){
  console.log(1);
}
foo = function(){
  console.log(2);
}

• 说说原型链
• new关键字做了什么事？
• 如何获取到一个实例对象的原型对象？
• 几种方法能够做到继承？除了 Child.prototype = new Parent()
• Object.create() 是什么？
• 现在有一个构造函数如下，如何限制上述的第二种用法（即只能用new）

function Parent(name) {
  this.name = name;
}
// 使用方法：
const parent = new Parent('emma');
const parent = Parent('emma');

• 以下代码输出什么？

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')

本题比较简单， 这儿就直接给出答案，如果有不熟悉的小伙伴，建议在题库中搜索promise，里面有40多道类似的promise题目。

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

算法题：

• 请按以下要求实现 compose 方法

var list =[['大'，'中'],['重辣','微辣'], ['重麻', '微麻']]

//输出所有维度的组合，如 [['热','冷'],['大', '中']] => ['热+大', '热+中', '冷+大', '冷+中']

function compose(list){
  // your code
}

面试官点评

看完这篇面经，不由感慨大厂的校招确实有点难。

面试过程对于 Vue 和 React的考察占了大半 ，虽然问的都比较基础，但是对于应届生来说，对于部分原理相关的知识点，回答起来可能会有些困难。还有性能优化，css基础，js基础，这些题倒是比较常规，相信只要大家认真准备，都能回答出来。

最后

《前端面试题宝典》现已推出 小程序 和 电脑版刷题网站 （https://fe.ecool.fun/），欢迎大家使用~

同时，我们还推出了面试辅导的增值服务，可以为大家提供 “简历指导” 和 “模拟面试” 服务，现在参与还有额外优惠，感兴趣的同学可以联系小助手（微信号：interview-fe）进行体验哦~

面经原作者：优秀の

面经原地址：https://www.nowcoder.com/discuss/397977