前言
好久没总结文章啦,最近这段时间一直在准备面试,这篇文章也算是分享一下面经以及个人的一些经验及学习方式,给同样一年经验的同学参考一下,水平有限,大佬们看看就行!
字节跳动
字节当时是没有内推,直接BOSS
上投的(反面教程),很快有HR联系约了面试
一面
- 项目相关的问题(项目背景、担任角色、负责的任务、难点等等)
- 手写
Bind
函数 - 实现一个算法,字符串包含"[]" , "()" , "{}",判断是否正确闭合
- 前端路由了解吗?有什么区别?( 提了下
hash
路由和history
路由,以及一些差异,这块答得不是很全面) - ES6的语法用过哪些?(
let
、const
语法,然后Promise
、箭头函数等等)- 用过symbol吗?有哪些用处?(提了下避免命名重复、实现私有变量、在
call
和apply
中就有用到)
- 用过symbol吗?有哪些用处?(提了下避免命名重复、实现私有变量、在
- 前端性能监控有了解吗?(这块主要问了错误的类型以及监控方式,类型没答全,监控方式说了
try-catch
、Promise.catch
和window.onerror
,因为不是很了解所以没法详细说说) - 说说白屏优化的方式有哪些?(同样不是很了解,只是简单的提了懒加载、预加载、预解析、按需加载、缓存、骨架屏这些方案)
- 节流的作用?哪些场景下有用到?
- 说说浏览器的消息循环机制
- transition和animation的区别?
- 说说requestAnimationFrame的作用,并实现获取每秒的帧数(当时这个获取每秒帧数的实现卡壳了,但思路对的所以让过了)
二面
- 项目相关的问题
- 你能说说babel是怎么解析语法的吗?
- 词法分析和语法分析的作用?
- a=1;会进行词法分析吗?
- 怎么进行词法分析的?(关键字)
- 词法和语法谁先执行?
- 哪些算是词法哪些算是语法?
- const const a=1;词法分析能通过吗?是到语法分析才报错吗?
- 词法分析和语法分析的作用?
- 写个题目吧,给个树形节点,包括value和children,求所有节点的value和
- 你觉得递归有什么缺点?(提了下爆栈和内存溢出)
- 爆栈属于什么类型的错误?系统错误还是什么?(没答上来...)
- 针对你说的问题怎么改进代码?(说了下尾递归和将递归换成迭代,想了大概五分钟用DFS实现了)
- 浏览器的控制台是怎么渲染的?说说在浏览器控制台输出console到输出显示的过程?(直接蒙了,看我不会就问浏览器显示的过程,接下来这块基本全程蒙蔽)
- DNS解析是去哪找的缓存?
- 怎么找到DNS服务器?
- DNS怎么解析出IP的?
- 解析出ip地址后怎么找到对方?
- 握手为什么要三次?万一第三次没有发出去呢?
- 聊一个明信片问题吧,你有一个明信片,要寄给一个陌生人,有几个问题
- 你怎么保证不被快递员知道内容?(包上信封,这里埋了个坑,没有联想到另一篇看过的鸽子通信里面,用箱子锁上更加可靠)
- 快递员把信封拆掉呢?(在信的内容里添加线索,在信封外加上线索进行一个解密对应,当时没get到面试官针对上面的提示)
- 信封被换掉了呢?(找权威的邮局加上印章)
- 陌生人怎么知道哪些是权威的印章呢?(人手一份邮局的对照表)
- 那印章发生了更新呢?(邮局通知或者自己去更新)
三面
- 项目相关问题
- 写个题目吧,复原Ip地址
总结
一面问题算是前端比较常见的知识点,虽然很多没用过但至少听过,所以都能说一些,好好准备应该就没问题。
二面基本围绕一个知识点不断追问,很多地方都没答好,包括最后明信片问题,因为前面没答好紧张了也答得比较混乱,我觉得自己是挂了,但面试官还是给了三面的机会。
三面问题问的不多,关键算法题没做出来(太菜了TAT),结束后特地学习了下回溯,把答案给补上了。最后综合起来还是没通过,被另一个部门捞起来重新开始面试。
字节跳动换部门面
一面
- 项目相关的问题
css
实现一个正三角形this
相关的几道题目- 原型链相关题目
- 说说
new
的过程吧 - 实现一个发布订阅模式
- 说说
header
常见的字段有哪些?作用分别是什么?(讲了一些常见的)Cookie
有哪些字段?分别什么作用(讲了SameSite
、HTTPOnly
)Access-Control-Request-Method
作用?
- CSRF怎么防范?
- 了解前端错误监控吗?(回答跟之前飞书差不多)
- 知道单页和多页应用怎么通讯吗?(理解错了,以为问单页和多页的区别,被纠正后说不太了解就过了)
- 说说HTTP和HTTPS的区别?(主要从HTTPS解决了什么问题出发分点描述)
二面
- 项目相关问题
- 让你来实现一个扫码支付的功能你会怎么实现?(粗略从前端和后端两个角度讲了下思路)
- 如何防范
iframe
被钓鱼网站嵌套导致的安全问题?(没有思路。)- 面试官提示,
iframe
如何判断是否被嵌套?(想到可以通过top
变量值是否等于window
来判断)
- 面试官提示,
- 实现一个深拷贝你会考虑到哪些点?(基本参考之前看到的文章回答,原文:如何写出一个惊艳面试官的深拷贝?)
三面
- 项目相关问题
- 实现两个有序链表的合并(写的时候有点紧张第一次没跑通,面试官温和的让我
debug
一下,调了一会儿跑过了)
四面
- 项目相关的问题
- Redux的实现原理你了解吗?(没用过,提了下应该是发布订阅模式?面试官说核心更精妙一点、让我之后去看看)
- 聊聊你知道的设计模式有哪些?(讲了单例、策略、装饰器、发布订阅、享元)
- 适配器模式了解吗?(不了解。就过了)
- 讲讲函数式编程的特点?(回答了复用性好、无状态、幂等、面试官说还有延时执行(比如柯里化))
- 主流框架了解哪些?哪个比较熟悉?(Vue,看过部分源码)
- 给你一段template,写出编译成render函数后的代码(有个插值三目表达式没写出来)
- 说说Vue的依赖收集过程吧
- 当数据发生变化后,依赖会重新收集吗?
- 讲讲
webpack
的原理吧,你掌握到哪种程度?(熟悉优化插件、打包原理和热更新原理,看过核心源码)loader
和plugin
实现过吗?知道原理吗?(讲了前者是函数,后者是类,两个编写形式的不同,同时在源码中的执行位置)- 说说
module
、chunk
、bundle
、asset
的区别? chunk
一定是通过入口生成的吗?(不一定,import
动态加载的模块也会作为一个chunk
)css-loader
的作用?(处理依赖关系)css
中的路径是如何解析的?(应该是通过file-loader
解析(不太确定))- css-loader和file-loader如何一起工作的?(不太清楚了。)
- 给一段代码,要求说出打印结果
setTimeout(function() {
console.log('setTimeout1'); //8
new Promise(function(resolve) {
console.log('promise0'); //9
resolve()
}).then(function() {
console.log('settimeout promise resolveed'); //10
})
});
setTimeout(function() {
console.log('setTimeout2'); //11
});
const P = new Promise(function(resolve) {
console.log('promise'); //1
for (var i = 0; i < 10000; i++) {
if(i === 10) {
console.log('for'); //2
}
if (i === 9999) {
resolve('resolve');
}
}
}).then(function(val) {
console.log('resolve1'); //5
}).then(function(val) {
console.log('resolve2'); //7
});
new Promise(function(resolve) {
console.log('promise2'); //3
resolve('resolve');
}).then(function(val) {
console.log('resolve3'); //6
})
console.log('console'); //4
总结
总体来说,面试的难度有但都是平时会使用到的知识点,而且面试不是一定要第一时间给出最佳答案,而是一个思考讨论的过程,这一点我觉得也非常重要。
另外面试官能看到之前的面试记录,所以问问题的时候基本会避免重复的问题,可能也考验你的知识广度吧。
比较幸运的是,走完一轮后还是通过啦。
阿里
一面
- 五道笔试题,40分钟完成
- 根据url字符串解析出参数
- 手写setInterval
- 翻转局部链表
- 给一个字符串,筛选出所有的数字
- 实现一个倒计时组件
- 项目相关的问题
- 说说vue的响应式原理?
- 说说loader、plugin的原理?举几个例子(讲了两者区别,提了
style-loader
和html-webpack-plugin
) - 平时学习的渠道?
- 说说https和http的区别?(频率挺高的,都背顺了hhh)
- 了解证书颁发的流程吗?(知识盲区,不太了解)
二面
- 项目相关问题
- 你觉得有什么亮点能够分享的吗?(主要讲了项目中的内存管理)
- 说说虚拟
Dom
的diff
原理吧 - 对将来的一个职业规划
三面、四面
- 项目相关问题、深入和拓展
总结
相对来说,阿里这边一面同样考察的是前端基础知识,但项目相关的问题、以及一些开放式的问题考察的会更多一些,发挥的空间也会更大一些。
个人经验分享
分享完了面经,接下来分享一下个人经验以及学习方式,当然因为水平有限,所以更多的是参考作用。主要从平时的准备以及面试的准备两方面进行分享:
平时的准备
平时的准备不外乎就是学习,但不同的方式方式带来的收益和效果也是完全不同的,我自己就总结了几个重要的点
有效学习
跟这个概念相对应的就是无效学习,意思就是花时间学了等于没学。我认为有效学习关键可以概述成这几点
1.学有用且经常用到的东西
比如我之前觉得Python
有意思,花了一个月时间去学习;觉得Docker
有意思,同样花时间去学了;主流框架热门,我都得学起来;还有很多类似的东西,学完之后很久没有用到后,很快的忘了,这样就不算有效学习了。
2. 对知识点做总结
好记性不如烂笔头,很多前端基础知识都偏理论,工作中不一定会频繁用到,可能当初花了很多时间学懂了,过一段时间又得重学一遍,那么学习时做的总结或者笔记就能帮你更快的重温知识点。
3. 建立知识体系
这一点我觉得是想要走的更远最重要的一点,我当初分享过一篇文章 来整理一份专属知识图谱吧 ,之前一直零散的学习,直到去年国庆我才跨出这一步,认真的梳理了下自己的知识体系。这样在学习的时候能够根据优先级规划时间,同时能够直观的看到学习的进度,迅速建立自信心,得到正反馈。
更多的时间和更高的效率
毫无疑问,大部分的人其实都不是天赋型选手,那么只能通过花更多的时间和提高效率来学习。
1.更多的时间
其实时间这块没什么捷径,要么利用好零散的时间,要么挤出更多连续的时候,像我个人就不太擅长利用碎片时间,所以我一般会利用好早上、晚上和周末的时间来学习。
2. 更高的效率
说到效率,其实是因为学习的时候很容易被干扰打断思路,这里也有一些常见的小技巧
- 学习前看看鸡汤类视频、或者优秀的人的博客,带着动力去学习
- 条件允许的话不要在家里学习,自习室、图书馆、咖啡馆都可以,更容易进入状态
- 排除手机干扰,可以用番茄钟之类的软件,学习一段时间起来走动一下(我自己用的是Forest)
面试的准备
如果平时都有好好地积累的话,那么面试的时候只需要针对性做一些准备就行
简历
简历其实是非常重要的,虽然很多人强调过了,但是包括我在内的很多人其实还是没有重视起来。
我一开始觉得简历只要能让我通过筛选那关就行了,但实际上面试官的问题很多时候会围绕你的简历展开,你在斟酌后添加到简历上的内容很可能成为你的亮点或者巨坑,所以可以找人帮你好好修改一下。
面试相关的知识点
刚刚提到了面试的时候,面试官一般会围绕你的简历内容进行提问,那么写到简历里的掌握内容就需要好好斟酌了。
毫无疑问,把自己觉得有把握有亮点的技术栈写进去,掌握程度的把握网上有很多文章介绍我就不说了,同时围绕着写进去的内容进行复习巩固。这里有个需要注意的地方,千万不要为了强行把某个技术栈写进去而花大量时间去学。
举个例子,很多公司要求React技术栈,然后你为了对标这个要求,花大量的时间去准备并且写到了简历上。
一方面在面试冲刺阶段,你一定没有足够的时间去完全掌握一个新的知识点,另一个方面没有项目支撑,在面试阶段经不住提问,只会成为减分项。
项目经历及难点
这一块有啥说啥就行,可以自己自言自语的口述几遍,多说个几次就能比较顺利的表达了。
如果一开始不知道自己的项目有哪些难点或者亮点的话(我一开始就遇到这个问题),可以找一个比自己更资深的朋友,把自己的项目一点一滴的详细口述给他,让他从他的角度给你一些意见以及参考。
面试复盘
面试本身除了能够校验自身的知识水平,也是一个很好的学习过程,时间允许的话尽可能多尝试面几个公司,并针对没有回答好的问题去学习提高,查漏补缺。面试完以后反思一下不足的地方,在下一次面试遇到类似的问题就能更从容的应对。
总结
这篇文章主要还是分享面经和一些个人总结为主,没有涉及到很多知识点方面的分享,不过网上这类文章应该比较多且全面啦。希望这篇总结分享能够对一些年限不高,目前正在求职、或者在看机会的同学有所帮助~
之后应该会把这段时间复习的知识点总结成文章进行分享,感兴趣的同学可以关注一下后续~
写在最后
- 很感谢你能看到这里,不妨点个赞支持一下,万分感激~!
- 以后会更新更多文章和知识点,感兴趣的话可以关注一波~