美团2022前端实习一二三面面经

0426 - 美团一面（90min）

自我介绍
介绍做的比较好的项目
用户登录怎么做的？会话ID保存在哪里？有效时长是多少？怎么控制状态登录是否有效？（这里感觉没答好）
项目的数据管理功能是什么？
后端返回的数据不是你想要的或者脏数据是怎么处理的？如果数据库中这个字段没有是怎么处理的？
你觉得你在项目中做的比较好的地方和做的不好的地方
你说的图元的抽象，是从哪几个方面考虑或者从哪几个方面入手去抽象？
聊一下前端基础相关的吧，你是怎么学习前端的？学习途径是什么？看书的话看过哪些书？
Vue源码看过吗？说一说虚拟DOM怎么更新的？虚拟DOM在diff的时间复杂度是多少？
CSS 写的多吗？flex布局怎么实现微信朋友圈的九宫格？
- 答出来一半，其实应该是flex-wrap: wrap;、flex-basis: 30%;、flex-grow: 1;等属性实现，同时配合结构伪类
CSS3了解多少？
浏览器输入URL到显示页面的过程，越详细越好（这里DNS解析、HTML解析以及整个过程都没答好，哭辽）
这些过程分别在浏览器哪个进程？JS引擎在哪个进程里？（这里没答上来，面试官直接给了我答案）
浏览器进程间的通信是什么？
聊一下网络，TCP怎么保证可靠？UDP怎么不可靠？
TCP流量控制和拥塞控制是怎么做的？
HTTP1.0、HTTP1.1、HTTP2.0的区别？（没答全、面试官提醒了一下还是没想起来）
HTTP2.0分帧，服务端接收后怎么组装？
HTTP和HTTPS的区别
HTTPS是对称加密还是非对称加密？除了性能外还有什么原因要使用组合加密方式
服务端发送证书后，客户端怎么验证有效性？
页面中创建一万个节点，怎么做？

做道题，跟原型有关，说说对原型和原型链的理解

function Foo() {};
let f1 = new Foo();
let f2 = new Foo();

f1.__proto__ === Foo.prototype
f2.__proto__ === Foo.prototype
Foo.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null
Foo.prototype.constructor === Foo
Foo.__proto__ === Function.prototype

原型链的终点是什么？为什么是null？为什么不能是undefined？（又没答好，这里应该答null和undefined的区别）

ES6都用过哪些新特性？（漏答了箭头函数）
为什么会有WeakMap和WeakSet？
浏览器垃圾回收机制
最后写个题，最长回文子串
反问：
1. 美团的技术栈（react，node）
2. 自己有些基础理解不太好，哪些方面可以给点建议？（浏览器原理加深一下、计算机网络要加强）

0429 - 美团二面（80min）

一面的问题的讨论 + 项目讨论（30min）
v-if和v-show的区别？使用场景是什么？
computed和watch使用场景的区别？
判断第一次渲染的时候计算属性x是否会执行
```
new Vue({
    el: '#app',
    data() {
      return {
        a: 1,
        b: 2,
      }
    },
    computed: {
      x: function () {
        return this.a + this.b;
      }
    },
    render: function(createElement) {
      return createElement(
        'h1',
        this.a > 1 ? this.x : this.b
      )
    }
});
```
下面过了2秒后改变a的值，x会发生更新吗？
```
new Vue({
    el: '#app',
    data() {
      return {
        a: 1,
        b: 2,
      }
    },
    computed: {
      x: function () {
        return this.a + this.b;
      }
    },
    methods: {
      update() {
        setTimeout(() => this.a = 0, 2000);
      }
    },
    mounted() {
      this.update();
    },
    render: function(createElement) {
      return createElement(
        'h1',
        this.a >= 1 ? this.x : this.b
      )
    }
});
```
这里面试的时候没答好，下来又看了一下源码
- 第一个问题的情况，this.x不会执行
  - 初始化computed的时候，会生成computedWatchers，并且将x属性挂载到vm对象上，但由于this.a = 1不满足this.a > 1的条件，不读取this.x则不会触发computed的getter，也就不会触发watcher.evaluate，那么就不会计算了。
- 第二个问题的情况：this.x两次都执行
  - 在初始化的时候，生成了computedWatchers，渲染时满足this.a >= 1使用了this.x，获取this.x时，触发get，计算this.x的结果，这个过程又需要读取this.a和this.b，分别触发这两个响应式数据的getter并进行依赖收集；
  - 2秒后this.a值改变，更新this.a的依赖computedWatcher以及renderWatcher，因此this.x也会重新计算求值。
项目里HTTP请求用的是json数据么？content-type设置的是什么？
了解HTTP的header的意义吗？前端有必要学习这些东西吗？
有自己的学习计划吗？前端方面的

做题：

美团的使命是“帮大家吃得更好，生活更好”。在这里，你可以[点外卖|http://www.meituan.com]，[做美甲|http://www.meituan.com]。美团作为一家生活服务电子商务平台，公司聚焦“Food+Platform”战路，以“吃”为核心，通过科技创新，和广大商户与各类合作伙伴一起，努力为消费者提供品质生活，推动生活服务业需求则和供给侧数字化升级。

实现一个方法，截断字符串，如果截断处处于一个链接中间，则从链接结尾处开始截断。示例：
示例1
substrRetainLink('1,2,3,4 http://www.meituan.com end', 4);
// 返回：1,2
示例2
substrRetainLink('1,2,3,4 http://www.meituan.com end', 10);
// 返回：1,2,3,4 http://www.meituan.com
示例3
substrRetainLink('1,2,3,4 [美团网|http://www.meituan.com] end', 10);
// 返回：1,2,3,4 [美团网|http://www.meituan.com]

面试时不会写正则，面试官让我用变量替代正则表达式表示我会正则（面试官人太好了叭），让我写了下思路并讲解，最后在面试官的提醒下优化了一下。

美团2022前端实习一二三面面经

0426 - 美团一面（90min）

0429 - 美团二面（80min）

0509 - 美团三面（40min）

更新：5月11号已OC

全站热榜