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

0426 - 美团一面（90min）

1. 自我介绍

2. 介绍做的比较好的项目

3. 用户登录怎么做的？会话ID保存在哪里？有效时长是多少？怎么控制状态登录是否有效？（这里感觉没答好）

4. 项目的数据管理功能是什么？

5. 后端返回的数据不是你想要的或者脏数据是怎么处理的？如果数据库中这个字段没有是怎么处理的？

6. 你觉得你在项目中做的比较好的地方和做的不好的地方

7. 你说的图元的抽象，是从哪几个方面考虑或者从哪几个方面入手去抽象？

8. 聊一下前端基础相关的吧，你是怎么学习前端的？学习途径是什么？看书的话看过哪些书？

9. Vue源码看过吗？说一说虚拟DOM怎么更新的？虚拟DOM在diff的时间复杂度是多少？

10. CSS 写的多吗？flex布局怎么实现微信朋友圈的九宫格？

    • 答出来一半，其实应该是flex-wrap: wrap;、flex-basis: 30%;、flex-grow: 1;等属性实现，同时配合结构伪类

11. CSS3了解多少？

12. 浏览器输入URL到显示页面的过程，越详细越好（这里DNS解析、HTML解析以及整个过程都没答好，哭辽）

13. 这些过程分别在浏览器哪个进程？JS引擎在哪个进程里？（这里没答上来，面试官直接给了我答案）

14. 浏览器进程间的通信是什么？

15. 聊一下网络，TCP怎么保证可靠？UDP怎么不可靠？

16. TCP流量控制和拥塞控制是怎么做的？

17. HTTP1.0、HTTP1.1、HTTP2.0的区别？（没答全、面试官提醒了一下还是没想起来）

18. HTTP2.0分帧，服务端接收后怎么组装？

19. HTTP和HTTPS的区别

20. HTTPS是对称加密还是非对称加密？除了性能外还有什么原因要使用组合加密方式

21. 服务端发送证书后，客户端怎么验证有效性？

22. 页面中创建一万个节点，怎么做？

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

    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的区别）

24. ES6都用过哪些新特性？（漏答了箭头函数）

25. 为什么会有WeakMap和WeakSet？

26. 浏览器垃圾回收机制

27. 最后写个题，最长回文子串

28. 反问：

    1. 美团的技术栈（react，node）
    2. 自己有些基础理解不太好，哪些方面可以给点建议？（浏览器原理加深一下、计算机网络要加强）

0429 - 美团二面（80min）

1. 一面的问题的讨论 + 项目讨论（30min）

2. v-if和v-show的区别？使用场景是什么？

3. computed和watch使用场景的区别？

4. 判断第一次渲染的时候计算属性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也会重新计算求值。

5. 项目里HTTP请求用的是json数据么？content-type设置的是什么？

6. 了解HTTP的header的意义吗？前端有必要学习这些东西吗？

7. 有自己的学习计划吗？前端方面的

8. 做题：

   美团的使命是“帮大家吃得更好，生活更好”。在这里，你可以[点外卖|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]

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

   下来后赶紧学了一下正则，重新写一下这道题：

   function substrRetainLink(string, index) {
     const idxs = findIndex(string);
     let realIdx = index;
     // console.log(idxs)
   
     for (let i = 0; i < idxs.length; i++) {
       let [s, e] = idxs[i];
       if (i > 0) {
         let [_, le] = idxs[i - 1];
         if (realIdx > le && realIdx < s) break;
       }
       if (realIdx > s && realIdx < e) {
         realIdx = e;
         break;
       }
     }
   
     return string.slice(0, realIdx);
   }
   
   function findIndex(string) {
     const arr = [];
     const regexp = /(\[.*?|)?((http[s]?):\/\/.*?\.com)(\])?/g;
     while(true) {
       let match = regexp.exec(string);
       // console.log(match)
       if (!match) break;
       let start = match.index;
       let end = start + match[0].length;
       // console.log(start, end);
       arr.push([start, end]);
     }
     return arr;
   }
   
   console.log(substrRetainLink('1,2,3,4 http://www.meituan.com end', 4));
   console.log(substrRetainLink('1,2,3,4 https://www.meituan.com end', 10));
   console.log(substrRetainLink('1,2,3,4 [美团网|http://www.meituan.com] end', 10));

0509 - 美团三面（40min）

问题更抽象和发散

1. 自我介绍

2. 聊个人经历，本科做的东西跟前端不那么想关，为什么做前端这个专业，选择前端作为发展方向是出于什么考虑？更喜欢还是什么？

3. 你对可视化和交互的有哪些积累有哪些了解？（因为我聊到我的方向是可视分析）

4. 可视化领域接触到哪些具体的技术？antV这些的设计和实现相关的有了解吗？可视化方面比价成熟的产品你觉得有哪些做的比较好的？

5. 前端领域里你觉得比较复杂比较难的有技术深度的技术有哪些？

6. 讨论一道发散的题目，然后引申出复杂的问题进行讨论：

   输入一个字符串，判断这个字符串是否属于质数；

   我思考出来的复杂的点：
   1. 字符串中可能会含有非数字
   2. 计算效率如何提升（我想的是位运算）
   3. 超过数字的表示范围怎么解决（考虑如何处理大数运算问题）

   写出初版代码后讨论优化空间

7. 实习能有多长时间？

8. 预期实习的目标是什么？想达成什么样的效果？

9. 看履历和意愿度，在线文档这块你有兴趣吗？岗位在上海你会考虑吗？

更新：5月11号已OC