前言

Hi~，我是 2020 届物联网专业毕业生，现就读于杭州。谨以此文来记录我的秋招以及入门前端以来的学习历程，如有错误，希望大家能及时提出！

面试情况

从19年8月初到11月底，前前后后一共面试了 14 家公司的前端岗，按城市划分为：

北京：小米，京东，美团，百度，去哪儿

杭州：阿里，网易，微店，字节跳动

上海：七牛云，哈啰出行

深圳：腾讯，富途，乐信

历时4个月，最终收获了小米、京东、微店、字节跳动的offer

过程太过曲折，这其中也发生了很多让我印象深刻的事……

8月初，提前批面试aliyun，扑通倒在了三面；正式批面试淘系技术部，HR面后，过了大概两个星期，变成面试已回绝

（发布文章时，系统一直提示有违禁词汇，检查了半天，原来是 aliyun 的锅，只可以打拼音）

9月中旬，短信收到了百度面试的喜讯，兴高采烈买了去上海的动车票，起了个大早，却连现场一面也没通过

10月初，邮箱收到网易的现场面试通知，那一天从 10:00 面到 19:00，等候区就剩我一人了，HR面结束后，工作人员还送了张食堂券（不愧是猪厂，伙食还不错），结尾依旧收到了拒信

11月中旬，已经收获了雷布斯的offer，但不想独自去北京奋斗，抱着不死心的态度，我再次面试了字节跳动（之前提前批简历直接被刷），经过四轮技术+一轮HR 之后，成功留在了杭州研发中心（我可是抖音的忠实用户！）

整个秋招，我的心情从一开始的信心满满，到感觉自己进大厂的机会渺茫，最后触底反弹，想想真是一波三折

成长之路

大一

回想起来，当初掉入前端这个坑，是因为参加了大一开设的选修课：《小型网站的建设与维护》。

第一节课，讲课老师新建了一个 txt 文本，写入几行代码，然后修改后缀名为 html，一个网页就被这样被创建了，还可以自定义样式，作为小白的我，第一次感觉代码这么有吸引力，才知道这个叫做前端开发（码农）。

在老师的鼓励（怂恿）下，我报名参加了省里的网站竞赛，在学校机房度过了17 年的暑假。

最开始，我还是用 Adobe Dreamweaver 写代码，jQuery 一把梭，管它什么性能、代码规范、维护性，都不存在的。看着菜鸟教程，边做边学，能硬编码就硬编码，找现成的 JQ 插件东拼西凑，我的网站才正式完工，想来都是一把辛酸泪……（当时只会写 JQ 代码，原生 JS 根本不会写）

大二

第二年，我意外发现了掘金这个网站，我的前端视野一下子广阔了许多，发现很多前所未闻的名词：闭包，ES6，原型，继承，作用域……

慢慢地，我自学了 React、Vue、原生 JavaScript、NodeJS。

为了学习 Git，我建了 GitHub 账号。

为了搭建个人博客，购买了 aliyun 的学生服务器和个人域名。一个星期的时间里，我又是配环境，又是学 Linux 命令，第一次用 vim 简直不要太爽，当我的博客在公网成功打开的那一刻，我感觉人生达到了巅峰！

期间，我报名参加了阿里的 D2 会议（虽然当时根本听不懂，凑个热闹），那天特别激动来到西溪园区，看到了好多大牛

大三

一月初，我报名参加了蚂蚁金服体检科技大会，会议更多的是从设计和用户体验角度出发，如何改善产品

见到了 AntD 的创造者：玉伯，云谦等前端大佬

玉伯在开场就发表致歉，因为当年的圣诞节彩蛋事件，轰动不小！

时间来到大三下学期，我想在当地找个实习，于是投递了人生第一份前端实习简历。面试当天，因为紧张，面试官给我递来的纸水杯，在桌子上被我打翻了🤣……幸好，当天晚上就接到了HR的电话，通过了。

在这几个月的实习期内（期间逃了不少课），公司给予了我足够的发展空间，给我配了 MacBook 和 24 寸的显示器。我尝试搭建脚手架，构建 React 企业应用，写 H5 页面，从零开发微信小程序等等。学习如何做到版本控制，规范 Git 提交，一步步实现项目落地，和 UI、产品、测试、后端一同协作开发。在协助我的 mentor 进行面试的时候，偶然看到了我当初的面试评级是 A，高兴了好一阵子。

不过，天下无不散之宴席，意识到要秋招的我，辞去了实习岗位，投入到复习阶段。然后我就被校招好好上了一课，由于我是非科班，根本不懂什么算法，只会简单的数据结构，于是乎在各公司的秋招笔试、面试中，吃尽了苦头。

ps：这里推荐几本书籍和我常用的学习网站（需要翻墙）：

《图解 HTTP》

《JavaScript ES6函数式编程入门经典》

《学习JavaScript数据结构与算法》

《你不知道的JavaScript》系列

MDN，淘系前端团队，凹凸实验室

medium.com/

codepen.io/

dev.to/

developers.google.cn/web/

面经分享

第一部分是我前端面试的经验总结，第二部分是我认为比较有思考空间的题目

经验总结

一份漂亮的简历，需要包括以下部分（排版由上而下）
- 个人亮点（专精领域，个人博客，开源项目）
- 教育经历（毕业院校，在校经历、荣誉）
- 工作经历（实习）
- 项目经历
- 专业技能

扎实的前端基础，比如你知道
- <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/> 作用是什么？
- flex:1 的 1 代表什么？
- Generator 如何抛出错误？

熟悉一门前端框架（React 优先）

勤刷 LeetCode 的算法题，熟悉掌握相应的数据结构如常见的链表、栈、队列、哈希表、树

熟悉网络基础、Git 命令、Linux 命令

多去了解前端的新趋势（Flutter，PWA，Serveless，GraphQL，CSS Houdini）

要有自信，让面试官感受到你对前端的热爱

面试题

由于面试的公司和次数略多，老生常谈的面试题就不放出来了，也不按公司划分面试题了

算法题

大多出自 LeetCode ，LeetCode HOT 100，最好自己过一遍，理解最优解

编程题

用 Class 实现 EventEmitter，要求拥有 on，once，emit，off 方法

实现 deepClone，要求能成功克隆带有循环引用的对象

CSS 实现一个宽度为浏览器1/2，宽高比为 2:1 的盒子

实现 sum 函数

sum(1)(2)(3) == 6; // true
sum(1, 2, 3) == 6; // true复制代码

实现 sum2 函数

console.log(sum2(1)(2)(3)()) // 6
console.log(sum2(1, 2, 3)()); // 6复制代码

用尾递归实现 fibonacci 数列

实现 co 函数

实现以下功能，当对一个 arr 做 push 操作时，会自动打印一行提示消息
```
const arr = [1,2,3];
arr.push(4);
// arr pushed a new element: 4复制代码
```

代码实现中断 Promise 的运行

有一组图片，实现后一张图片必须等到上一张图片加载完毕，才能开始加载

为 Test 类添加方法，打印指定内容

classTest{
constructor() {
this.person = { name: "jack", age: 38, position: "CTO" };
}
// ......
}
const test = new Test();
for (const ele of test) {
console.log(ele);
}
// [ 'name', 'jack' ]
// [ 'age', 38 ]
// [ 'position', 'CTO' ]复制代码

实现 handler 函数，遇到 b 和 ac 都要去除

console.log(handler("aabaa")); // 'aaaa'
console.log(handler("abaccbc")); // 'c'
console.log(handler("aaccc")); // 'c'
console.log(handler("aaabccc")); // ''复制代码

实现 decode 函数

decode('HG[3|B[2|CA]]F') === 'HGBCACABCACABCACAF'// true复制代码

实现 _bind 函数，使打印 success

functionAnimal(name, color) {
this.name = name;
this.color = color;
}
Animal.prototype.say = function() {
return`I'm a ${this.color}${this.name}`;
};
const Cat = Animal._bind(null, "cat");
const cat = new Cat("white");
if (
cat.say() === "I'm a white cat" &&
cat instanceof Cat &&
cat instanceof Animal
) {
console.log("success");
}复制代码

CSS 实现圆环进度条效果

说出以下打印内容

console.log(-1 >>> 32);
console.log(-1 << 32);
console.log(1 >> 32);
console.log(5 >>> 2);
var a = { n: 1 };
var b = a;
a.x = a = { n: 2 };
console.log(a.x);
console.log(b.x);复制代码

简答题

实现 F12 开发者工具的检查（inspect）功能

实现把一个盒子从一个区域拖放到另一个指定区域中
- 盒子一部分在区域内，一部分在区域外，该如何处理
- 简述几个封装好的关键方法

开发完的项目，在微信浏览器上白屏，该如何排查

如何统计一个页面上哪些区域用户点击次数最多

如何根据按钮级别的粒度，设计用户权限，例如：A 可以访问按钮，B 不可以

如何对一个网页内容进行自动化截屏，如何解决登录限制

A组件包裹B组件，B组件包裹C组件，它们的 componentDidMount 触发顺序如何

React setState 到底是异步还是同步的，其原理是什么

React Hooks 的使用有哪些注意事项

React 的合成事件机制

简述 React 类组件的新老生命周期，谈谈 React Fiber 架构的引入

详细介绍一下 Redux 状态管理，如何和 React 组件连接

React HOC 的用途，什么是装饰器模式

Mobx 的实现原理

Koa 的中间件原理，介绍一下 compose 函数

介绍 NodeJS 的 EventLoop 机制，process.nextTick() 的作用

NodeJS 是单线程还是多线程，都有哪些线程，JS 为什么是单线程的

CommonJS 的实现原理

NodeJS 中存在哪些流，怎么理解 pipe() 及其优点

require 的解析规则

介绍一下负载均衡，NodeJS 的 cluster 和 child_process 是什么

webpack 是如何进行打包的

webpack 动态 import 是如何实现的

如何编写自己的 loader 和 plugin

简述 webpack 配置文件中的 externals，UMD 了解吗

介绍一下 DNS，什么是迭代查询和递归查询，什么是一级域名、二级域名

HTTP 首部（Header）和实体（Body）的分隔符是什么，用正则如何匹配

HTTPS 的详细过程，什么是数字证书，消息摘要，非对称加密，Hash 算法

如何实现 Tab（标签）页之间，客户端与服务器的实时通讯

HTTP 状态码：301、302、307 的区别

简述浏览器的垃圾回收机制，什么是强引用、弱引用、循环引用

简述 requestAnimationFrame 和 requestIdleCallback 的作用

CSS 选择器的解析顺序是从右到左，还是从左到右，为什么

click 事件在移动端有什么问题，如何解决，你在移动端还遇到那些坑

简述 JWT 的生成过程和优缺点，怎么主动注销 JWT 和续签 JWT

通过什么检测网站的性能，有哪些指标

如何查看网站的 Ajax 请求是由哪行代码发出的，一个元素都绑定了哪些事件，Chrome 调试面板 F8,F10,F11 各代表什么

说说你对 jpg、gif、jpeg、png、webp、base64 URL 的了解

结尾

天道酬勤，只要你想，大厂offer并不是遥不可及！

希望我的经历能为你带来帮助，如果有问题，请在评论区留言，下篇文章将会分享我的前端知识点笔记 📝！

校招，我是如何拿到小米、京东、字节大厂前端offer

前言

面试情况

成长之路

大一

大二

大三

面经分享

经验总结

面试题

算法题

编程题

简答题

结尾

其他人也看了：