省流

美团爱考http，手写二叉树

经验

美团特点就是效率高，就目前的美团面经来看，看起来是笔试做的差不多，再按简历的优势来约面（比如说学历- -），也难怪我被排在后面

就面经来看，哪怕手写写不出来，也没关系，其他表现好也可以

教训

• 面试多会照着简历问，所以不熟的东西千万不要作死写上去
• 手写一定要滚瓜乱熟，因为考的都是基础，所以面试时给你停顿时间不超过一分钟
• 答不出来也不必紧张，面试官的目的就是深挖到你答不出来，只是为了摸清你了解到哪个程度，一般情况并不会因为你少部分答不上来就不要你了

美团前端笔试3.25，4.1总结

4.6酒旅

感觉KPI面。。。八股文啥也没问，一直追着问项目，一般是简历上没啥问的会考察知识点，我都坦白项目是照着敲的，做了有段时间已经忘了，但还是追着问- -，最后说看我太紧张问了道算法（await promise），结果也紧张地写不出来。凉了。。。

面试官超好的，一直引导我，但因为手写很简单，所以一分钟没思考出来就直接帮我写出来了，40分钟就面完了

我问面试官对我有什么建议，他让我多尝试一下广度，一面都是很简单的基础，尝试后端，开发，算法，重点是要感兴趣

平台

牛客视频面试

23年美团前端一面总结

公共

• 自我介绍
• 你了解前端那些方面。（工程化，移动端，跨端，可视化，图形学）
• 平时咋学的
• 看过那些前端方面的书。（《你不知道的JavaScript》）
• 为什么学前端
• 个人项目，展示项目（屏幕共享）
• 遇到的最大困难
• npm发包，package.json有哪些字段，main了解吗，dev了解吗？（dev不了解，说了npm run dev是啥意思）
• babel的配置文件有没有去看过
• 组件库如何实现让用户按需引入（这面试官说了解一下分包等概念）
• 1.webworker（我答了作用和使用办法）
• 2.webpack打包原理
• 3.webpack的loader和plugin的区别，执行时间上有没有区别，有没有自己尝试写过loader（js字符串等内容）
• webpack热启动原理
• git指令，问了一个git cherry-pick怎么用
• 介绍项目
• 有哪些权限，权限是怎么分配的
• 有哪些难点，怎么解决的？耗费时间最长的是哪个难点 react状态异步更新组件更新原理
• 可反问。
• 前端该看那些书
• 培养那些能力
• 如何保持竞争力

CSS

• 有哪些定位。绝对定位父元素一定要是相对定位吗？
• css会阻塞渲染吗（link加载不会，但是生成css规则树会）
• css怎么保证变量不被污染，scoped的原理
• 图片压缩除了canvas还有什么方案吗？
• 怎么改变css，自己的组件、第三方库的组件的css
• css的优先级
• 怎么写全局css
• CSS positon属性说说，分别都是相对于谁 （x2）
• CSS单位说说
• CSS水平垂直居中方案（x5）
• script标签中的async、defer

JS

• 基本数据类型（x2）
• 判断
• tpyeof返回值；函数返回啥；缺点，还有那些判断方式
• 有没有了解过filter map reduce的性能，区别（x2）
• 箭头函数和普通函数的区别（x2）
• var let const 区别（x2）
• 类数组对象有哪些
• promise的状态有哪些、说说都有哪些常用方法、每个方法的参数、结果、用法（x2）
• settimeout
• 宏任务微任务（x2）
• 看代码输出题（事件循环）（x2）
• 垂直居中有哪些方法四种定位
• 虚拟DOM和diff算法
• 数组常用的api、哪些能改变原数组
• ES6新增的特性有用过哪些
• 闭包、闭包会导致什么
• 垃圾回收机制
• this绑定说说
• 看代码说输出（this指向问题）
• 原型原型链说说

其他

TCP三次握手 为什么不能两次握手

有了解udp吗

http缓存机制（x2）

http状态码

dns域名解析过程

有了解设计模式吗

http缓存

解析url。 输入url到页面渲染（x2）

谈谈http各个版本：http1.0-1.1-2.0的进化史（x2）

一般的发Http请求的流程是什么样的

4.具体说一下TCP四次握手

5.TCP客户端和服务端同时发出断开请求后续会怎么样

6.TCP滑动窗口策略，具体说说，它有什么好处，实现机制

7.TCP拥塞控制有几种策略 分别介绍一下

9.能具体讲一讲http1.1吗 持久连接具体是什么 指什么连接 谁与谁 为什么要出这个呢，keep-alive会引起其他的什么问题（x2）

11.Http1.0时候发起一个http请求会开启一个TCP连接吗

强缓存和协商缓存

进程和线程区别进程间通信（x4）

进程状态，线程状态死锁进程通信

进程怎么被调度（就绪、阻塞、运行态那堆）

浏览器本地存储策略、localstorage与sessionstorage区别，刷新后还能访问sessionstorage原数据

跨域是什么、有哪些解决方式，问了postMessage

手写

手写深拷贝（给的测试对象有循环引用）

防抖，节流

函数柯里化

箭头函数this指向问题（看代码说输出

实现一个Promise.All

手写垂直水平居中

千位分隔符

场景题：手写一个hooks组件 实现倒计时，React倒计时（x2）

瀑布流

判断链表是否有环（x2）

判断回文数字，使用多种方法（x2）

一个两个字符串，判断其中一个字符串包含另外一个字符串的最短字符子串

判断一颗二叉树是否对称

二叉树层次遍历

一个简单的递归展开树结构

二叉树，如，前序遍历（递归方法，迭代方法）

二叉树所有子节点的和

二叉树的序列化和反序列化

11.场景：如果开发者的页面打开正常，客户端的是白屏，怎么定位错误(循序渐进地引导我回答，首先是回答了看浏览器调试功能文件请求有没有正常获取到，如果正常我会在vue里面的生命周期之类的输出一些东西定位问题，毕竟客户端不能打断点，面试官说Chrome是可以的，让我可以了解一下)

12.算法题：开平方，中途有死循环bug问了我平常遇到这种无限循环的怎么去调试和debug。面试官的评价：总体不错，可以多看看用到的东西内部的原理配置啥的(例如axios，babel)

场景题：设计一个axios，红包分配（考虑精度问题和上下限）

给个数组按age排序[  

{name:'a',age:4}, 

 {name:'b',age:6}, 

 {name:'c',age:3},  

{name:'d',age:2},  

{name:'e',age:9},  

{name:'f',age:8},]

const person = [  
{name:'a',age:4}, 
{name:'b',age:6}, 
{name:'c',age:3},  
{name:'d',age:2},  
{name:'e',age:9},  
{name:'f',age:8},]
;
person.sort((a,b)=>{//按年龄升序排序
  return a.age-b.age;
});
console.log(person);//Array [Object { name: "d", age: 2 }, Object { name: "c", age: 3 }, Object { name: "a", age: 4 }, Object { name: "b", age: 6 }, Object { name: "f", age: 8 }, Object { name: "e", age: 9 }]

26、手撕题：模拟击鼓传花游戏的过程并返回获胜者（数组实现和队列实现）

27、手撕题：手写URL参数解析（x2）

// 解析URL，实现一个函数parseUrl使，
// parseUrl('https://www.meituan.com/index.html?a=test&b=2.1')
// 返回 {a:'test', b: 2.1}

function parseUrl(url) {
let args = url.substr(url.indexOf('?') + 1);
// console.log(args);
let arr = args.split('&');
// console.log(arr);
let obj = {};
arr.forEach((el) => {
let pos = el.indexOf('=');
let key = el.substr(0, pos);
let val = el.substr(pos + 1);
if (Number.isNaN(parseFloat(val))) {
//不是数值型咱们就不转
obj[key] = val;
} else {
//否则转
obj[key] = parseFloat(val);
}
});
return obj;
}
let str = 'https://www.meituan.com/index.html?a=test&b=2.1';
console.log('res ', parseUrl(str));

Vue

• Vue和React的区别
• v-show v-if区别。（原理，开销，使用场景）
• vue2怎么监听数组
•  vue2和vue3的区别和优势
•  vue2响应式的很多细节（深挖，怎么处理那些非响应式的东西，
• MVVM和MVC的区别

React

• Vue和React的区别
• 了解react吗
• react生命周期
• React.memo，shallowEqual，怎么比较的
• react常用hooks,每个详细说说，useRef除了获取dom还能干嘛
• react组件间通信

MVVM和MVC的区别

待整理面经

大部分和上面重复了，没空整理了

https://www.nowcoder.com/discuss/471439722905096192?sourceSSR=search

https://www.nowcoder.com/discuss/470692766259990528?sourceSSR=search

https://www.nowcoder.com/feed/main/detail/fbf7663dfd6f48c1adeea569bf1d0dbf?sourceSSR=search

以下图片来自https://www.nowcoder.com/feed/main/detail/6d51c11b42c54b7391f242046ebfcf87?sourceSSR=search

一面：基础八股文+框架（包括项目），算法

二面：深入：算法，项目（重点），框架

二面

二面45min：

算法题：随机发红包，总数一定，每次金额有上下界

异步解决方案手写实现 

前一次请求的结果用在下一次请求中

事件总线是什么设计模式 

手写on方法

vue生命周期

created和mounted区别

ajax深挖项目 

重难点 如何解决怎么学习前端的组件间通信......反问：不会react有影响吗？

面试官问了很久实习的项目，一直在问项目后端是怎么实现的后面让写了个promise.all

场景题：

用户登录过一次后，关掉再打开如何保持登录状态

1.知道的设计模式，适配器模式和工厂模式差异

2.旋转动画实现

3.手写：颜色字符串正则表达式匹配以及按参数比例变深变浅(项目中用的)

4.手写：并发池

5.组件库按需引入，我答了babel-plugin-import，问了一些底层实现(我项目)

6.webpack打包原理，vite更快的原因

7.vue父子组件等交流方式

2023年最全前端面试（20w字）HTML5+CSS3+JS+TS4+Vue3+React18+八股文+手写+项目+笔试 涵盖了大部分笔面知识点，部分目录展示