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

大三

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

见到了 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 实现一

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
System.out.print（详情关注公中号：编程进阶路）

个宽度为浏览器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 类添加方法，打印指定内容

class Test {
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

function Animal(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 的区别

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中…(img-OiHRMlS1-1720962393142)]

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中…(img-MpM8dXrl-1720962393143)]