前言

楼主来自西南某双非一本学校，大二转专业到软件专业，大三系统化地学习前端。看着实验室学长学姐们每年“轻轻松松”地去到了六巨头，自以为可以挑选下家了，too young，too simple。楼主是一月开始准备的，但只是部署了一下项目和刷了一下牛客的题库（u1s1感觉对我用处不大），然后二月份十分纠结是否要投递简历，看到某帖子的大佬说的一句话“当你投出简历的那一刻你就已经赢了一大半”，于是我二月份就开始简历投递了。因为每次面试会录音和录屏，所以面经比较详细，每次面试后面会有个人的体会分享（不喜勿喷，谢谢）。那么废话不多说了，以下为面经。

七进七出的腾讯

腾讯教育部门提前批

一面

1. let,const,var的区别。const定义的对象是否可以修改
2. js原型的定义，原型链，继承
3. js的基本数据类型
4. 事件流
5. 事件委托，详细讲
6. new操作符之后的操作
7. 防抖，节流
8. 跨域
9. 地址指向的是什么（这个问题我是真的没懂，最后总结他说是想考this指向）
10. .bind(object).bind(windows) 后的this指向
11. promise介绍，你是怎么用promise的，怎么实现一个promise
12. es6新特性
13. async是什么的语法糖，generator怎么用
14. ajax有哪些状态，每个状态分别对应什么
15. 手动实现一个ajax，这样实现的方法叫什么
16. 介绍一下webpack，webpack有哪些配置，loader和plugin有什么区别
17. 同源是什么意思，除了那三个没有了么
18. 介绍一下css盒模型
19. bfc是什么。怎么样形成bfc，bfc有哪些用
20. 实现一个垂直水平居中
21. animation的参数，怎样实现一个动画
22. 介绍一下react生命周期
23. react diff有了解么
24. 介绍一下redux
25. 项目前端怎么优化
26. 除了react还用了哪些技术
27. 你有什么想问的么

第一次面试，非常的紧张，很多基础问题都没有答好，不过面试官人很好，也很准时。反馈是需要加强基础知识的学习。

二面

1. 缓存机制

2. 垂直水平居中

3. 用户白屏了，怎么排错

4. jsonp

5. 事件流

6. 304，详细的机制

7. 给两个构造函数A和B，如何实现A继承B

8. call，apply

9. cookie

10. 实现百度搜索,foucs有下拉框，根据输入内容能模糊查询

11. 大整数相加

12. 5点15分，时钟和分钟的夹角？

这是一次突击面试，因为系统还没开，所以查不了状态。两道题都很基础，但由于个人理解问题把第一题弄成了qq密码验证那样，很久没弄好，写大数也写了很久。。。还是太菜了。

腾讯pcg部门一面

1. 印象最深刻的一个项目

2. 用户权限认证过程

3. token过期怎么做

4. 怎么知道用户和token的对应关系

5. token和cookie区别
6. token为什么比cookie更不容易受到攻击，为什么要用cookie；

7. setState的更新流程（这个考的是isbatchingUpdate那里）

8. 场景题，用户反馈

9. 小明从老板那里拿到了一个密码表，说是如果解开密码表中的秘密，就可以升职加薪，赢取白富美，走向人生巅峰。这个密码表是一个 CSV 文件，里面的数据由数字（没有小数点）、字母组成。小明需要提取每个数据中的数字（例如 1a2b3c 提取后得到 123，提取后的数字整体看作一个十进制数），把数值为奇数的项相加，就可以解开这个秘密。请你实现一个函数 sum，帮小明完成这项工作。

function sum(input: string) {

  return input.split(/[,\n]/)

    .map(item => Number(item.replace(/[a-z]/ig, "")))

    .filter(num => num % 2 === 1)

    .reduce((a, b) => a + b)

}

这次面试准备时间很充裕，基础点都答上来了，但setState的更新流程答得很差。面后也是详细去了解了这个点，所以面试也是很好的查漏补缺的机会。

腾讯一面

1. 个人介绍
2. 介绍个人优缺点，举例子
3. 项目中的技术栈，项目的理解
4. 项目中的优化点
5. 点击url之后的所有流程
6. 为什么tcp连接是可靠的（校验和重传）
7. 通过什么机制处理服务端接收数据乱序丢包等（滑动窗口和拥塞控制）
8. mysql 左连接和右连接（我做错了什么？？）
9. 你还有什么要问我的
10. 反馈

面试体验极差，鸽了我两次，还迟到30分钟，导致我之后把腾讯面试官迟到当作常态了。。。除mysql之外的点都答上来了，还是挂了，可能没hc了吧（自我安慰）。

wxg一面

1. 浏览器解析url的流程
2. 二叉树根据一个节点查找下一个节点
3. 页面加载优化
4. 数组去重
5. 数组扁平化
6. 判断数组
7. xss和crsf

15分钟搞定，面试官好像是看着题库一道一道问我的，没有反馈。单纯一问一答。

wxg二面

1. nlogn排序算法有哪些，快排稳定么
2. 双向链表转二叉树，二叉树转双向链表
3. 构建排序二叉树
4. 旧版本兼容fixed
5. 防抖节流
6. 5000条数据展示
7. ca验证
8. 项目深挖

面试官迟到20min，按惯性我以为又被鸽了，正在打电话反馈时，面试官上线了。。。面试官很专业也很严肃，喜欢刨根问底，算法题我自己写过但没去研究最优解，然后被问自闭了。场景题给了好几个方案，他都不是很满意，然后提示我坦克，我至今没想通啥意思。。面完之后极其自闭，都准备秋招再战了。

腾讯云一面

1. 之前面几次了，你觉得不通过的原因是什么
2. 哪些题没答出来，下来了解过么
3. 讲讲项目
4. 问了些es6
5. 问了点react
6. 问了点计算机网络
7. 学习计划
8. 鞭尸wxg的无限滚动列表优化问题
9. 聊天。。。

这次面试偏聊天性质了，了解到部门hc不多了，自己也收到了其他公司的口头offer，就面的比较轻松。问题也都答上了，建议是提高工程能力。总体来说还是很感谢腾讯爸爸一次又一次的捞我，奈何我太菜了。。给了我很多面试经历，还有就是如果学校不是太好（大佬除外），投中小厂很有可能是过不了简历的，所以先拿小公司试水的念头基本可以打消。比较好的做法是尽早投简历，这样也很大概率被捞，过不过都是学赚。

阿里

阿里提前批一面

1. react新生命周期

2. react性能提升的生命周期

3. react16.4新的特性

4. react传参的方式

5. http缓存机制

6. 怎么优化页面数据量很大的情况

7. koa怎么连接数据库

8. 数据库查page,row

9. react key有什么用

10. webpack配置不打包的代码怎么配置

11. 非同源cookie怎么访问

12. 手撕Event bus

13. 手撕函数组合

14. 手撕对象扁平化

```javascript
请实现 flatten(input) 函数，input 为一个 javascript 对象（Object 或者 Array），返回值为扁平化后的结果。
 * 示例：
 *   var input = {
 *     a: 1,
 *     b: [ 1, 2, { c: true }, [ 3 ] ],
 *     d: { e: 2, f: 3 },
 *     g: null, 
 *   }
 *   var output = flatten(input);
 *   output如下
 *   {
 *     "a": 1,
 *     "b[0]": 1,
 *     "b[1]": 2,
 *     "b[2].c": true,
 *     "b[3][0]": 3,
 *     "d.e": 2,
 *     "d.f": 3,
 *     // "g": null,  值为null或者undefined，丢弃
 *  }
 */
```

这是二月份面的，所以面试时还是比较紧张，尽管都答上来了，奈何手写代码1/3，遂凉凉。

阿里钉钉一面

1. 对react的理解
2. 组件传参
3. redux
4. react提供key和不提供key的区别
5. 想要异步请求，reducer是同步的，这怎么实现。
6. 手撕数字转十六进制字符串
7. 手撕集合交集

上个月面的，基本都答上了，但手机断线了7-8次，估计体验不好。我体验也很差，我换了两个手机还是断线，我觉得是阿里客户机的问题。。

字节跳动

字节跳动教育部门提前批一面

1. 介绍自己最满意的一个项目，问了一些细节

2. setState()更新机制

3. setState()怎么实现异步更新状态后马上对新状态进行操作

4. react组件传参的方式

5. 实现下面方法

axios.get(url)

    .then(res => {})

    .catch(err => {})

retryGet(url, retry_limit)

    .then()

    .catch()

都答上了，但手写比较慢，第二天收到了感谢信

6. 实现一个eventEmitter类

字节跳动飞书一面

1. react生命周期
2. diff

3. 输出结果

    console.log('script start');
    setTimeout(function(){
    console.log('setTimeout');
},0);
    new Promise(function(resolve){
    console.log('promise1');
}).then(function(){
    console.log('promise2');
});
    console.log('script end');

4. 输出结果

    const obj = {
    name: 'jsCoder',
    skill: ['es6','react','angular'],
    say: function(){
        for(var i = 0,len = this.skill.length;i < len;i++){
            setTimeout(function(){\
                console.log('No.' + i + this.name);
                console.log(this.skill[i]);
                console.log('------------------');
            },0);
            console.log(i);
        }
    }
}
obj.say();

5. 讲一下以下的继承方法

 function Shape(){}

 function Rect(){}

 //方法1
 Rect.prototype = new Shape();

 //方法2
 Rect.prototype = Shape.prototype;

 //方法3
 Rect.prototype = Object.create(Shape.prototype);

 Rect.prototype.area = function(){
    //do something
};

6. 手撕对象深拷贝

7. 手撕节流

8. 手撕jsonp,问了一些跨域的问题

9. 手撕三数之和

石墨文档，共享桌面写代码。写了7道题，错了一道，遂挂。。

cvte

cvte一面

1. 用过react的PureComponent么（纯组件）

2. 用过react的hook么

3. tcp三次握手

4. http建立连接一定会经过tcp三次握手么，非静态资源呢？非同源域名呢？

5. 对闭包的理解

6. 对于异步的理解，实现一个jsonp

7. 映像最深的项目，项目的特点

8. 数据优化，网站优化等

9. 为什么转专业，为什么选前端

10. gc

11. 宏任务和微任务，事件循环

12. 组件数据传递

13. 一堆正数中找两个值相加等于目标值（使用hash表存储当前值，之后遍历用目标值减当前值查看是否存在于hash表中）

cvte二面

1. 学习路线

2. 项目中的问题和收获

3. 每个项目难点的知识点扩展

4. 用户认证过程

5. node中间件

6. react新特性

7. redux中间件

8. 如何优化你的可视化系统

9. 并发http请求都是同时发送么？

10. 未来规划

11. 大一计算机基础课怎么补的

12. ```javascript
// 输入一个算式字符串，计算出答案
// 示例一：
// 输入："123+456="
// 输出：579
// 示例二：
// 输入："111+222-100="
// 输出：233
逆波兰表达式

function calculate(expression) {
  return 579;
}

console.log(calculate("123+456="));
console.log(calculate("111+222-100="));
```

13. 你还有什么想问的么

cvte hr面

1. 现居住地在那里
2. 最近在学习什么
3. 面试准备的流程
4. 想去的公司
5. 家庭情况。。
6. 影响最大的人或事
7. 压力最大的时期，最近又这样的状况么
8. 作息时间
9. 实习能带给你什么
10. 期望的工作时长，薪资待遇
11. 技术面自评，对技术面面试体验的评价
12. 进cvte的顾虑是什么
13. 个人规划，以后转行想做什么
14. 家里人对自己的期望

有点无奈这家公司，面试流程走得飞快（基本当天接到下一面），后来hr以一个莫名其妙的理由把我挂了（你实践写项目的经验不足）。。不过面试总体体验不错，hr面偏人口普查，也算是一种历练吧。

平安科技一面

1. 自我介绍

2. 如何设计一个类似于微信聊天的页面

3. 关于弹起小键盘

4. 快排

5. 前后端的交互方式，ajax用的什么库

6. 跨域

7. get和post的区别

8. 项目的重难点

9. 自我评价

10. 工作相关

11. 你有什么要问我的

面试官一上来就问我为什么和照片不太一样，给我整懵逼了。。之后很不爽，就随便免了一下，当天家里停电，电信信号奇差无比，断了几次线。估计双方的体验都不好，愉快拜拜。

美团一面

1. c和c++有什么区别
2. box-sizing
3. 垂直水平居中
4. position
5. 防抖，节流
6. 移动端适配
7. 计算font-size
8. 清除浮动的方案
9. 触发bfc的方式
10. call和bind
11. 跨域
12. Access-Control-Allow-Origin场景题
13. 怎么携带cookie
14. cookie跨域，安全性，限定https
15. 事件委托,内存泄漏问题
16. react组件传参，新生命周期与之前的区别
17. 父组件prop更新经历的生命周期
18. 为什么旧生命周期不安全，forceUpdate()会不会经过getSnapshotBeforeUpdate
19. promise
20. 箭头函数
21. class定义类和function定义类的区别
22. js实现私有化
23. map和对象的区别，weakmap
24. 自动问答系统的逻辑
25. 社区项目，数据怎么存，node中间件，怎么获取请求参数
26. 可视化系统，数据筛选，页面特别耗损gpu，页面卡顿优化
27. eventBus
28. 反问

答上了90%左右，之前面了多次腾讯，对问题的深度和广度算是能够答得比较让面试官舒服了。

美团二面

1. 为什么转专业
2. 为什么学前端
3. 后台了解哪些
4. 用户认证怎么做的
5. 签发token的过程
6. 服务器关闭，原先的token还会有效么。推断一下
7. 重启后token依然有效怎么做
8. 大学生活中最有挑战的一件事，收获体会
9. 输出结果，然后怎么让第一个输出彭于晏，第二输出张涵予

var name = ‘彭于晏’

function Person(name){

    this.name = name;
}

var p = Person(‘张涵予’);
console.log(name);

console.log(p.name);

10. 判断window是否有某个原型方法，如toString；为什么window.hasOwnProperty('toString') 返回的false。怎么判断原型是否有toString

window.hasOwnProperty('toString');
window.toString()

'toString' in window

11. rem了解么，给了一个设计稿怎么兼容（假设兼容宽度为w），有一些延申。font-size最小其实是12px时怎么实现1px呢

w/375   = 1 

font-size : 1px;

html  font-size:10px;   font-size:12px;

12. xss攻击流程，目的是什么，怎么注入，怎么防御，怎么过滤js
13. 实现下面这个需求,怎么优化

url = '[http://www.baidu.com?query=123&abc=456](http://www.baidu.com?query=123&abc=456)'
getQueryString(url,'query') > 123

14. 假设你有一条公网ip服务器，你的电脑上有一个node服务，如何让我能访问到你的资源

这是一道发散题，我答了下面的东西。
1\. 部署服务（不允许这样做呢）
2\. 代理服务器
3\. 交换机路由分组交换
4\. 把我的电脑弄成公网ip
5\. 内网穿透

刚开始都觉得很像hr面了，之后面试官说我们是技术面那还是聊点技术吧（不要啊😭）。整体还是聊的很开心的，面试官会引导你答题，也很耐心听你的问题。反馈时，面试官很详细地跟我讲解了内网穿透原理，还扔给我了一个frp。

美团三面

1. 做过哪些项目，每个项目的成长，细节的成就
2. 除js还会哪些语言，简单说说
3. 讲讲登录鉴权的过程
4. 谈谈对cookie的认识
5. A页面和B页面怎么传递token（说了localStorage，然后问浏览器隐私模式怎么办）
6. 怎么学的前端
7. 做了哪些demo，看过源码么
8. 学过哪些cs知识（说了数据结构，计算机网络，操作系统，编译原理），讲讲编译原理
9. 针对编译原理，问了怎么实现作用域和内存管理
10. 完成下题,xml字符转json(说了三种思路，还是没撸出来。。)

var xmlStr = '';
function xml2json(str){

}

11. 下面代码的输出,有扩展

var a = 1;
function foo(){
    var b = 2;
    console.log(b + this.a);
}

function foo1(){
    var a = 4;
    foo();
}
foo1();

12. 在下面两行代码前添加代码，使得a最终是一个排序后的数组。有扩展

var a = [123,2,2,23,5,1,6,1,3,6];
a.mysort();

13. http和https的区别
14. ssl握手流程
15. 证书怎么认证
16. 客户端发给服务端的信息怎么保证不被篡改
17. 反问环节(内驱力，沟通好，能接收反馈，js掌握的不够，源码没看，潜力不错)

之前看到有小伙伴是两轮技术面，所以我。。。结果一上来各种技术问题，问到编译原理时（非常感谢学校负责的老师），答得很详细，应该有加分。但算法第一题就整的有点懵，反复询问面试官，我这样可以么，那样可以么，略略略。。后面两题也写的踉踉跄跄的，还在后面的计算机网络答得很详细，算是力挽狂澜？面完觉得凉凉了，结果面试官说：“我觉得小伙子挺不错的，blabla”。此时的我脑海里全是inb哥收到火箭后的舞蹈，忍住不笑。。

美团hr面

1. 自我介绍
2. 聊了下项目，一些心得体会
3. 为什么转专业，为什么学前端
4. 关于base北京
5. 平时怎么学习的
6. 毕设打算做什么
7. 其他流程走到哪了
8. 社团活动
9. 其他的想不起来了（忘记录屏了。。）
10. 反问

一些比较常规的问题，12天后收到offer。

总结

个人觉得大厂的面试体验都很不错，但极个别会有点问题。目前也是接了美团的offer，春招实习暂且告一段落，祝大家早日收到理想的offer。
附一个个人自用的知识点总结 https://github.com/wangyangzero/review