确认目标
广州算得上厂的我认为就以下这些:
- 大厂:
- 腾讯(微信/微视 海珠TIT创意园)
- 阿里(大文娱/uc/lazada 海珠琶洲)
- 字节(飞书 天河珠江新城)
- 百度(yy直播 番禺南村万博)
- 网易(网易邮箱/网易严选/网易互娱 天河信息港)
- 中厂
- 欢聚(番禺南村万博)
- 酷狗(天河羊城创意园)
- 荔枝(天河羊城创意园)
- 小厂
- bigo(番禺番禺广场)
- 探迹(番禺大学城)
- 小鹏汽车(天河岑村)
- 三七互娱(天河羊城创意园对面)
确认好自己是奔着什么去的:
- 大厂 --- 牛人很多,前景好,稳定,福利待遇丰厚
- 中厂 --- 牛人多,发展快速,风险高,回报大,福利待遇不错
- 小厂 --- 水平参差,发展非常快速,工作节奏快,学习机会多,福利待遇多样(可能有期权)
我就想去大厂,奔着大厂去的。
所以我的面试求职策略都是根据大厂要求去做。大厂重基础,主要考察候选人的潜力。如果是校招的话,985/211机会大,背熟八股文,而且要理解八股文里的每个知识点,为什么并且如何做。如果是社招,比较青睐 3-5 年经验的,要对自己项目非常熟悉。5年以上一般就有管理经验了,不过大厂管理岗不多,但是进去了晋升管理的机会很大。
中厂的话比较重经验,注重经验对口,主要考察候选人的项目,小厂没多少好苗子可挑的,一般就是双非但是有工作能力的聚集地。
然而还是我准备的不够好,无缘大厂。。。。最后去了欢聚,也不错~
装弹药
开始投简历前,准备好以下3个方面的知识储备。
算法题/编程题
- 大厂一定会考算法题。在leetcode上刷算法题、高频题 ,推荐个刷题网站 codetop.cc/home ,能精准找到你要去的公司和部门的算法真题,我也在上面贡献了字节的真题。
- 一面一般是考简单的,二面、三面会考中等,很少困难(我面的没考过)。比较喜欢考的是字符串、数组、和链表,可以先准备好简单的,面过了一面再准备中等的。不过网易一面就给了道中等的,所以。。。还是有备无患吧,常考的题都得会。
- 算法题里的排序算法是重点,有7种排序算法要掌握,因为算法题里很大一部分是对链表、字符串、数组的排序,也是常考点。还有像回溯算法和动态规划也是喜欢考的。
- 中厂有可能考,也需要准备。像我面的欢聚两个部门,海外支付部门的前两面都有算法题,而另一个部门就没有算法题。
- 常用的高频工具类代码,也得手撕一遍,推荐这个 前端面试js高频手写大全,不过里面的题都没有遇到。。。。
前端基础知识
学习/复习好所有前端的基础知识,写个脑图,这里贡献全栈然叔的面试要点,里面基础要点挺全。准备的时候要刨根问底,因为面试官也会刨根问底地问你。遇到不清晰的点或者有疑问的地方,不要想着“不会吧,这个这么深不会问的”,然后就不准备,我就踩了不少坑。。。以下几个点是问的概率比较高的,几乎每个岗位都有问过:
- http协议/https
- 浏览器缓存/service worker
- js event loop/ node.js event loop 及各种打印顺序
- react fiber的工作原理及实现
- react class组件和function组件的异同点,state的工作
- webpack
- 微前端
如果你没有做过react的项目,会vue也可以,就准备vue相关的内容,面试官一般会问你用哪个框架比较多,不会react就不问了。像我会angular,但基本没有人问angular,因为没有人用。。。。不管准备哪个框架,都要到学习源码的地步,起码了解整个数据流转和处理的过程,因为会问的很深很深,如果不了解,面试官揪住某个细节问,答不上来,那就gg了。。。例如react的源码学习,推荐这个系列文章 人人都能读懂的react源码解析(大厂高薪必备),讲的很透彻,请全文背诵。
如果你用过 node.js 也要好好准备 node.js 的相关知识,官方文档,这是个加分点,面试官问的很仔细,不准备好一不小心就露怯了。
项目
你做过的项目都是你的财富,不管这个项目多简单,也总是有亮点。从中挑1-2个你觉得有代表性的项目,有深度、有广度、有挑战性的项目,好好准备。说出深度是什么,遇到了什么困难,怎么解决,挑战的点在哪里,又是怎么解决,要条理清晰地说出来。
我就是栽在了这里,虽然自己了解,但是如何说出来让别人明白也是个学问。不然啰里八嗦说了一堆,人家get不到,也很丢分。。。觉得你思路不清晰。。。
扣下扳机
觉得准备的知识储备差不多了,就可以开始磨刀了。
准备简历
简历不仅是个敲门砖,而且能决定后面面试的问题走向。
你在简历上写什么项目什么亮点,基本二面之后都围绕这些项目在问,你要让面试官觉得你的项目方案是成熟的,是在该业务场景下的最优方案,而不是最简单或最快的。项目如果本身没有什么难点亮点,可以把重点放在项目优化上,脚手架、构建优化、页面性能优化。
所以写简历的时候,【工作经历】简单写,不太熟悉的技术就不要往里写,写一些很有把握的,熟练的技术,【项目经验】这块重点写,其他的据 阿里P8狗哥 说,并不会看。项目经验要写出信息量,不要只写项目做了什么,而是你怎么做这项目,里面有什么技术点,亮点,写出技术深度,最后都要落到一个价值点上,要不是业务价值(如增加了多少用户量),要不是技术价值(页面加载速度加快了多少,打包体积减少多少)。
举个例子,这是我写的一段项目经历,被 狗哥 骂的要死,说没有信息量,没有技术点,没有技术深度,没有亮点。
leaf 编辑器
项⽬描述:
- 使⽤MVC结构设计,⽤react做视图层(⼯具栏),⽤原⽣js做数据层(存储编辑内容和历史快照)和控制层(事件响应和内容处理),实现在特定容器内多区域富⽂本编辑。 项⽬难点:
- 使⽤浏览器 Selection API 实现选区操作、设置⽂本样式、表格处理、插⼊公式等
- ⽂本格式化(复制粘贴或显示原有⽂本)成编辑器特定样式,如去除⽂本背景颜⾊等。
平平无奇,很难让面试官觉得你很牛逼,好像说了很多,又好像啥也没说,不能说项目实现了什么功能,而是要着重在,你怎么实现功能,用什么东西实现功能,最后点出价值所在,说的言简意赅。修改一下:
leaf 编辑器
- 深度为业务定制,更适合教育行业的业务场景,单实例多编辑区的设计,带来更好的业务兼容性和编辑体验
- 使用Hybrid开发模式,核心逻辑层与UI层解耦,逻辑层采用原生JS,UI层使用React,大大提高UI层开发的效率和可维护性
- 使用插件和订阅发布模式设计,降低编辑器在讲义系统、教案编辑、题库生产等业务场景下的接入和扩展难度和成本
这样是不是就好很多。不要陷在细节和表现里,而是体现出你的设计思想和优势,说服面试官,你的设计是最优的,最适合业务的,最重要的,侧面说明你是厉害的。
投递顺序
还要注意投递顺序。
一开始的时候,可以找些小厂练手,由浅入深,由易到难。由于志不在小厂,可以比较放松,丛容,也可以从中发现自己还有什么没搞明白的,漏掉的点,加强训练。
等面2-3个了,可以倒背如流、了如指掌的时候,可以开始投中厂和大厂,穿插着来,这个时候最得心应手。大厂不要放的太后,不然其他面试已经拿到offer了,大厂才开始一面,最好的状态已经过去了。特别是不要中间跨了个假期。。我跨了个中秋,又拿到了offer,后面根本不想面试。一鼓作气,再而衰,三而竭,气都泄了。。。。可以长期保持状态的忽略。
最好是同时进行,不过这个很难说,具体看招聘流程的速度。像字节,早早跟我约面试,我说没有准备好,约到一个月以后。像bigo,3天就搞定4面,上午一个,下午一个,是我见过最快的招聘速度。像网易,投了一个月,才跟你约面试,我都拿到offer了。。。不过这个节奏还是可以自己掌握的,越老牌的厂招聘越慢,因为不缺人。腾讯的投了根本没反应。。。。推荐 boss直聘,响应比较快,上面的岗位数量和质量都秒杀拉勾。
同一个厂的多个岗位可以重复投,假如一个岗位进入流程了,你会被锁住,另一个岗位就进入不了流程了,所以不用担心会同时发起。但是,如果这一个岗位挂了,另一个就可以马上把你捞起,嘿嘿,欢聚就是这样把我捞起了。但是如果你挂了一个,再投同厂另一个岗位,由于有筛重,会发现你已经被挂了一次,可能直接就被pass了。。。
准备多份简历
一份简历打天下是不行滴~要根据岗位jd做调整。
例如网易工具组,岗位明明白白写着,有 electron 开发经历优先,而你又刚好做过,那你的项目经历当然要加上这个项目,并且要好好准备 electron 开发的相关技术。再例如小鹏汽车,岗位也明明白白写着,会 react+antd的优先,而你项目里都是用这个的,那你的项目也得明明白白的写着用react + antd,还写过以 antd 为基础的公共组件库,那分不是加爆了!!
然而,我用的第一版渣渣简历,从8月底开始,看到感兴趣的岗位都投了一遍。居然效果还不错,收到了大厂除腾讯、阿里以外的面试邀请,也还行吧。呵呵。。。。
约面试我能约视频面试的都约晚上视频,不用请假也不用跑来跑去,丛容不迫,等着面试官上线。
shoot!!!
yy直播
1面
自我介绍,聊了一下,说了下项目,小哥就直接给我二面了。。。。小哥也太水了。。。。然后就找二面面试官。
2面
-
自我介绍 这里就是给面试官时间看你的简历,准备提问点,粗略的说现在在什么公司,做了些什么项目,担任了什么职位
-
说说最近最能代表你的一个项目,为什么觉得能代表你? 要透过问题猜出题老师的意思,所有说围绕项目展开的问题,都是想看你对项目的了解,方案的设计,技术深度和广度,还有在其中扮演的角色,还可以就里面的一些技术点展开,继续提问。所以这里一定要好好准备,把面试引导到你擅长的方向,把每个技术点说清楚,为什么要这样做,为什么要这样设计,这样设计有什么风险有什么难点亮点,像写论述文一样,层层展开,逻辑清晰。如果是面试中高级前端,要在更高的设计层面去回答,解决了什么问题,有什么价值,切忌陷在细节里,如果面试官感兴趣的,会继续深问下去,
-
ast语法树解析是什么?有规范吗?如何编辑? 描述项目的时候提到了一下,所以面试官就问了这个。。。再一次说明如果不熟悉的东西,不要在项目里提起,不然会暴露短板。。。然后我就说了我的理解。
其实这个东西到处都有,只是可能它太底层了,开发中接触不到。把各种代码语言通过分词分析,解析成一棵层级语法树,像浏览器解析html文件、ide的代码高亮、react的jsx和webpack打包时的静态分析等等,都是将一些符合规范的文本解析成一个可分析的数据结构,然后分析这个树结构,做一些事情。大名鼎鼎的babel就是做这个。更深入的可以看看知乎上 这篇文章。 -
之前用 node.js 做了什么项目?为什么选择 node.js? 还是围绕项目,做过一些nodejs项目很加分,因为很多前端团队会有自己的基础建设,这些大部分是用nodejs做的,没有做过就自己搞写demo学习下,弄个api服务器,接个mongo,增删改查下,上传文件等等。 nodejs 特点网上文章很多,谷歌下。
-
登录鉴权这块怎么做? 还是围绕项目,考察的其实是对整个登录流程的理解,用户输入账号密码后端如何校验,登录状态如何保存,前端如何保存登录信息,包括cookies的传递/过期,token的使用。
-
mongo数据库如何处理并发? 还是围绕项目,重点是看你对你使用过的东西了解有多深,也可以侧面了解你学习新东西的态度,是能用就行,还是会深入学习。所以不熟悉的东西,不要写,写了就要了解透。参考 mongo 官方文档
-
说说react的虚拟dom
推荐自己实现一遍虚拟dom,网上文章很多,能实现一遍了,就不怕问了 -
react 和 vue 的视图刷新机制有什么异同? 推荐自己实现一遍 react 的 setState 方法和 vue 的数据双向绑定更新视图。
推荐几篇文章,我觉得写的很透彻,介绍react 批量更新模式的setState原理 React setState 源码实现理解, React-setState原理,你真的理解setState吗?,[Vue官方教程笔记]- 尤雨溪手写mini-vue -
手机适配怎么做? navigator 判断手机环境,css media 媒体查询 设置样式,head 头等等,自己谷歌吧
-
瀑布流如何实现? 被问到了两次,我没有做过,就是简单的说下思路,可以怎么做,尽量多的提供方案,这个也可以考察你平时技术选型的过程,还有技术深度和广度。做过的话那就可以深入说说,之前是怎么做的,遇到什么问题。反正就是尽量往自己会的方向引。
-
如何实现模块动态加载? 动态生成script标签,webpack的动态加载,es6 module 的异步加载。参考微前端时代如何做 JS 模块的动态加载
-
微前端怎么实现?有什么要注意的? qiankun作者写的可能是你见过最完善的微前端解决方案,业界的解决方案主要就几种,都要了解他们的优缺点,没有最好的方案,只有最适合业务的方案。
-
错误收集是怎么做的? 围绕项目,Sentry原理--收集错误、上报
凉凉总结
第一个面试,完全没料到一直在问些项目和实际开发的问题,因此没有好好准备。。。凉凉是意料之中,这一面面了差不多2个小时,还跑去南村万博面试,挺累的。。。我更喜欢视频面试,不用跑来跑去,时间也可控,面对面还会有点压力,盯着你说不出来呢。。。。但是去到公司可以更直观地看到未来办公环境和更深入地体验到公司文化,也很不错。
欢聚时代(电商)
1面
-
react fiber的作用、原理和实现 必考点!!!!每个环节、整个过程要明白,理解,面试官一反问你某个细节点,答不上来,那就是背答案了,很扣分。。。。。说多了都是泪。。。。 推荐一些文章 浅谈对 React Fiber 的理解,手写React的Fiber架构,深入理解其原理,谈谈React Fiber与分片
-
useState的实现 是吧,又是react,手写简易React Hooks(手写系列七)
-
clas组件和function组件的区别是什么?
-
子组件的componentDidMount先执行还是父组件的componentDiMount先执行?function 组件的useEffect呢?
-
cookies 属性都有哪些?
-
浏览器缓存都有哪些? 实践这一次,彻底搞懂浏览器缓存机制
-
promise打印顺序,promise a+ 规范有了解吗?
-
webpack plugin 和 loader 是什么?有什么区别?怎么写?
-
npm 包怎么写,命令行怎么写,脚手架怎么做?
-
https是如何实现的?
-
箭头函数和普通函数有什么区别?
2面
-
http1.1和1.0有什么区别? 这里我是第一次被问到,之前没有准备这么细致的http协议,所以完全懵圈。。。。
-
https的实现原理,用的什么算法,换一种算法? 这里也懵圈。。。其实问的是对称算法和非对称算法在https中的应用,为什么要这样设计,推荐这个大神的文章彻底搞懂HTTPS的加密原理
-
https还有什么漏洞和风险? 这个问题高级,还是懵圈。。。理解了https的实现原理,还要理解为什么这样实现,安全的关键在哪里。。。不然就是背答案了。。。服务器的私钥泄漏了,或者证书机构的私钥泄漏了,就完蛋了。。。
-
知道的网络安全攻击有哪些? 懵圈。。。。。最常见的网络安全攻击手段及防御方法
-
如何提高webpack构建速度?
-
数据库并发? 又来。。。。幸好之前问过了就准备了,回答mongodb锁的机制
-
最难的项目是什么?遇到了什么困难?
凉凉总结
一直在处于懵圈的过程中,凉凉也是理所当然了。二面以上一般都是管理岗的,而管理岗的多数是后端。。。。所以会给你纠结http、后端这些东西,要好好准备。。。。
荔枝fm
1面
-
js事件循环
-
输入url后发生了什么?
-
构建渲染树以后发生了什么? 这里估计想问的是 浏览器合成层 做了什么,我当时说这块不太了解。不清楚的东西就直接说不懂,瞎回答扣分,如果追问了那就更惨了。。。
-
https的工作原理
-
页面优化方式有哪些?
-
浏览器缓存都有哪些?
-
了解过service worker吗?
2面
- 最具挑战性的项目是哪个?
- 微前端的实现和问题?
- 订阅发布模式,还有什么设计模式? 还有些问题不是很记得了,都是围绕项目展开的
3面
来了个部门主管?说和我的谈话对面试结果没有影响,只是来看看我的意愿,是想去to B的还是to C的,让我聊聊想法。。。。那我就聊聊想法,说其实都可以,技术都是有趣的,都能学到东西,也能有所成长。非要选一个的话选to B的,因为迭代节奏比较好把控,技术也会比较有话语权。。balabala
凉凉总结
到这里面试已经比较熟练了,问的问题基本都能答上来,凉的莫名其妙的。。。这个是最坚持要我当场面试的,为他请了3次假,就这样对我。。。一般到了3面,技术是没问题的,可能是气场不合?可能已经招到人了吧。。。发邮件问也没有回复。。。
虎牙
1面
-
angular工作原理
-
和react对比,优点缺点
-
https的工作原理
-
http2.0的工作原理
-
http3.0有了解吗? 还真没了解。。。http协议都很重要啊!!还有 web socket等基于 TCP协议的应用,UDP协议等
-
浏览器缓存有哪些? 是吧,第几次了,倒背如流了
-
service worker了解吗?
2面
- react fiber工作原理
- 看执行打印顺序
// 考察原型链
this.a = 1;
function A() {
this.a = 2;
}
A.prototype.b = [1, 2];
A.prototype.logB = function () {
console.log(this.b);
};
A.prototype.log = function () {
console.log(this, this.a);
};
// window.a = 3;
const b = new A();
const log = b.log;
b.log();
log();
b.b.push(3);
b.logB();
const c = new A();
c.logB();
// 考察 event loop
new Promise((resolve, reject) => {
console.log(1);
setTimeout(() => {
console.log(2);
}, 0);
resolve(3);
})
.then(console.log)
.then()
.then(() => {
console.log(11);
});
var p = Promise.resolve(4)
.then(console.log)
.then()
.then(() => {
console.log(5);
});
p.then(() => {
console.log(6);
}).then(() => console.log(7));
Promise.resolve(8)
.then(console.log)
.then(() => console.log(9));
console.log(10);
-
http 1.0 1.1 2.0 3.0 的区别 一次全说明白的全家桶!!有时间再另外写一篇文章总结他们的区别,其实整个http的优化方向就是2点:减少tcp握手(keep alive,多路复用,http3.0直接抛弃tcp,使用udp),减少带宽浪费(压缩请求头,增加缓存)
-
https的实现原理?
-
options 预检请求?
-
js事件循环 和 node.js的事件循环,有什么区别?
-
懒加载的实现方式?
-
动画的实现方式有哪些?
-
页面性能优化的方式有哪些?
凉凉总结
前面的都回答的很好,但是后面的回答就没那么好,react fiber 有个细节点没整明白,说promise执行顺序说错了,懒加载、动画的实现方式都没有回答很好,0.8 * 0.8 * 0.8 * 0.8... 然后分都没了。。。面试官说了好几次问题不大,然后后面就没有说问题不大。。。问题优点大。。。所以复习的时候,有疑问的点一定要搞明白,例如讲http3.0的时候有个概念叫tcp拥塞控制,面试官反问了一下什么意思,然后没说明白。。。被当场戳穿是背答案的,很扣分。。。
字节(飞书)
1面
- 看代码,说出点击div后发生了什么
class A extends Component{
construstor(){
this.state = {
name:'xiaozhang',
age: 20
}
}
changeAge=()=>{
this.setState({age: 30})
}
render(){
let age = this.state.age
return <div onClick={this.changeAge}>{age}</div>
}
}
- 编程题
实现一个方法,允许如下方式调用
log('22').sleep(3000).log('44')
//输出 22
//等待3秒
//输出44
思路可以用promise,也可以用任务列表
2面
- 最难的项目,挑战是什么
- 编程题
// ['ab', 'c', 'd', 'ab', 'c']
function addSerial(arr) {
let result = []
// do something
return result
}
console.log(addSerial( ['ab', 'c', 'd', 'ab', 'c']))\
//结果: ['ab1', 'c1', 'd', 'ab2', 'c2']
要注意下,只出现一次的没有加序号,要区分只出现1次和2次以上的
凉凉总结
二面就是没有准备好项目的挑战,说得啰里八嗦的,面试官都听懵了。。。要有条理,让别人容易get到挑战的点在哪里。。。。哎。。。而且这个二面是在过了中秋节,我已经拿到欢聚offer以后,就没有背水一战的感觉了。。。字节的面试重点都在围绕项目,通过项目再去考察技术点,好好准备,通过的几率还是很大的
网易
1面
- 浏览器合成层
- 浏览器缓存
- service worker
- 看打印顺序
setTimeout(function () {
console.log(1);
});
window.requestAnimationFrame(function () {
console.log(2);
});
window.requestIdleCallback(function () {
console.log(3);
});
async function a1() {
console.log(4);
await a2();
console.log(5);
}
async function a2() {
console.log(6);
}
a1();
new Promise((resolve) => {
console.log(7);
resolve();
console.log(8);
}).then(() => {
console.log(9);
});
console.log(10);
-
深拷贝 需要考虑什么点,写一个深拷贝
-
json.stringify 深拷贝有什么问题
凉凉总结
我已经不想面试了。。。。心态很重要,面试拖太长了,身心疲惫,我喜欢速战速决,找到offer了就已经泄气了。。。。。
bigo
1面
问基础 编程题--实现一个深拷贝
2面
围绕项目在问 算法题--最长回文字符串
3面
聊家常。。。。 最后来道智力题--25匹马,五个赛道,决出前5名需要跑多少次
4面
你对这份工作有什么期望
欢聚时代(shopline 海外支付)
1面
- 编程题
已知一个合法 url 字符串 sourceUrl,请写一个函数
function getTargetUrl(url, param, value){}
实现入参为 url,param,value 得到targetUrl,测试用例如下:
http://www.abc.com => http://www.abc.com?param=value
http://www.abc.com?c=1 => http://www.abc.com?c=1¶m=value
http://www.abc.com?c=1¶m=2 => http://www.abc.com?c=1¶m=value
http://www.abc.com?c=1&d=2 => http://www.abc.com?c=1&d=2¶m=value
http://www.abc.com?param=3 => http://www.abc.com?param=value
http://www.abc.com?param=3&d=4 => http://www.abc.com?param=value&d=4
http://www.abc.com?c=1¶m=3&d=4 => http://www.abc.com?c=1¶m=value&d=4
这道题要注意下,如果url里已有param,传入的value需要覆盖原有的值
- 编程题
已知一个数组 Arr 里包含多个元素,每个元素为数字或多维数组 (元素均为数字) ,
请将 Arr 的元素全部输出到一个数组中并升序输出,例如
输入 [1,[[4,5,6],2,[[[7,8,9]]],3,11]]
输出 [1, 2, 3, 4, 5, 6, 7, 8, 9,11]
本质就是个数组flat(自己实现),然后sort(自己实现)
其他问题都涵盖在之前的写的问题里了,大同小异
2面
- 算法题
获取最长链路
const arr = [
// 服务 A => B, 耗时 100ms
['A', 'B', 100],
['A', 'C', 50],
['A', 'F', 200],
['B', 'G', 300],
['C', 'F', 100],
['F', 'G', 300]
]
function getLongest(arr) {
//...
}
getLongest(arr) // 输出结果: A-F-G
这题就是个递归,然后我慌了,一直在纠结链表和数组,没有做出来,然后又出了两道链表。。面试官非常nice了。。。一定要多做算法题!!!
- 算法题
数组转链表,然后用链表计算出里面的最大值
function toLinkedList(arr) {
}
toLinkedList([1, 2, 3])
输出结果:
{
value: 1,
next: {
value: 2,
next: {
value: 3,
next: null
}
}
}
这个简单,就是遍历,转成链表,然后递归,计算最大值 也是偏后端的在问,都被问过了,对答如流
3面(交叉面)
也是围绕项目在聊 如果让你设计一个项目,怎么设计
4面
对公司工作的期望
offer总结
前面练手面试把问题点都暴露得差不多了,再重点准备下项目,offer就到手了,嘿嘿嘿~~不过运气也很重要,正好面试官关注的点都有准备到,就没问题。像字节那样问的没准备,那就不好意思了,所以准备的要全面,怎么问都问不倒,那可选的offer就多了。