前言
前段时间因为学习算法，准备面试，到后面正式投递简历，到正式面试，再到现在一切尘埃落定，发觉已经三个月没发掘文了。所幸这波大厂的面试结果是理想的，我在国庆节后收到了蚂蚁集团的offer，成功上岸。在本文里，我不但想分享一点本人在面试过程中的一些经验以及碰到的面试题，更多的是想对我自己工作这几年来的学习过程作一个回顾和总结，希望能够对想进大厂的同学们有所帮助。
以前的我
我第一家公司在宁波，从我16年毕业到20年离开宁波到杭州，我在这家公司里任职了4年。这家公司属于一家外包公司，主要做一些政府内部或者相关的系统或者软件。我从入职开始做java全栈，到后面转成专职前端负责切图，再到后面开始负责使用前后端分离的开发模式开发公司项目。各种的新技术都需要靠自学，不过公司对于前端的要求并不高，跟着框架的文档以及百度基本够用。因为宁波那时候的互联网环境并不好，上限很低，技术上不错的公司都特别少，所以自己也并没有什么目标，也不知道该去学什么。浑浑噩噩过了几年，虽然这几年也加了不少班，也算是一些公司层面项目的前端负责人，但是那时候的技术真的很烂。可以说，这几年算是被荒废的几年，框架不深入，前端各种工具也了解不够，基础就更别说了，就连js有多少种数据类型这种最最基础的题都没法很好的回答完整。
开始转变
应该是在我工作的第四年吧，认识了一个女朋友，也是我现在的老婆，感情很好。因为她是杭州人，这给了我一个机会，一个去杭州发展的机会，当然如果去了，我就需要承担比较大的经济压力。为了以后，我开始默默努力，我给自己设了一个小目标，达到中级前端。我加了几个技术微信群，跟着掘金几个知名博主写的一些文章开始进行学习。我基础差，那我就从基础开始系统补起，从头开始学习数据类型、变量、原型、函数等等基础。对于框架上，我跟着黄轶老师的vue源码解析深入的学习了vue的实现原理。其他各种网络协议、浏览器相关知识、webpack也都开始慢慢学习起来。经过半年的学习和准备，我提了离职，准备去杭州。
来杭州之后
来杭州之后，我对自己的定位很清楚，就是对标中级前端工程师，因为我知道自己还有很多不足，所以我投简历只考虑了一些中小型公司，最后入职了滨江一家react为技术栈的公司。入职之后，我就给自己又设了一个目标，希望一年以后能够冲一波大厂，换句话说，希望一年以后能达到高级前端工程师的技术水平。不过这次需要学习的东西其实很明确，除了对现有技术栈的不断细化之外，我还需要掌握React、算法以及一些业务开发之外的内容，比如错误、性能监控，基础建设等等内容。为了这个目标，我付出了很多，公司平时基本8点多下班，除了工作的空余时间之外，工作日的晚上基本都要到半夜。我也开始试着写掘文，一方面是分享一些自己最近的学习内容，一方面也是巩固记忆。一年时间，从中级前端，到前段时间可以自如的应对大厂面试官的各种问题，再到成功上岸，回想收获很大的这一年，付出也是得到了回报。
关于未来
我作为一个半路出家的野前端，划了几年的水之后发愤图强的这几年，我其实一直很羡慕很多网上，或者群里的同行。他们的年级很小，有的可能刚毕业，有的工作才1-2年，就已经有了足够的能力进入大厂工作，经常输出一些有深度，有思考的文章。我有时候就会想，如果我刚毕业就能有现在的这种学习状态，那到现在我又是什么样的呢？但是往日时光不可追，对我来说我不再是几年前那个碌碌无为的我了，我把这些羡慕作为自己的动力，有了不断更新的短期小目标，也有了自己长期的大目标，我相信我还能做更多。希望大家一起加油，就我这种老菜鸡也能成长起来，更何况年轻的你们呢。
一些学习经验和学习方法
这里不写一些具体的知识点，你如果想要知道中级或者高级需要会哪些具体的技术，你可以在掘金上搜索，很多高赞的文章都写的很好，我以前也是看过那些，跟着学习过。在这里我只分享一些自己的学习经验以及方法心得，希望能够帮助你更好得去进行学习。
深入学习
这个需要大家能够有刨根问底的态度。面经其实也算是一个很好的查漏补缺的东西，面试前大家都会刷一刷，但是你不能仅仅只是去记忆当前的某道题，你应该在得到结果之后，好好想想这个结果当中是不是还有自己不清楚的地方。
举几个例子：
问：js数组怎么去重？
答：通过Set去重，然后通过Array.from或者拓展运算符还原成数组。
// 上面是一道比较简单的面试题，大家肯定都知道答案，但是其实这题还可以不断深挖。
深问1：Array.from可以处理哪些数据？
答：类数组对象或者可遍历对象
// 继续深入
深问2: 类数组对象有哪些特点？
答: 。。。
问：for in和Object.keys有什么区别？
答：for in会遍历对象自身的和原型链上的可枚举的key，Object.keys只会遍历对象自身的可枚举key
// 深入追问
深问：什么样的属性是可枚举key？
答：对象的属性有可枚举和不可枚举之分，它是由对象属性描述符enumerable决定的。
// 继续深入
深问：说一下对象属性描述符？
答：。。。
当然不止是js基础，其他方面也是一样，在碰到不了解不清楚的知识点时需要深入学习，很多大公司面试官的面试题其实很多都是这样慢慢深入的，就是为了考察你到底掌握的扎不扎实。
将知识点系统化
我们所学的一些技术，比如js,react,vue，其实很多的内容都不是互相割裂的，你需要去将这整块的知识分门别类，作为一整个系统来看待。后续学习一些新的知识点的时候，你可以将这个点放到相应的门类当中去。说不定，这个新的知识点可以跟你以前学过的某些点串联起来，能够帮助你去更好的理解。
记录并复习
很多同学学习的时候可能没有做笔记的习惯，其实技术跟当年我们在学校里学知识一样，一些不常用的东西真的很容易忘记，需要不断的重新回顾，加深记忆。我在学习的过程中碰到一些不会的内容，全都会分好知识门类，做好注释，然后记录下来，有些还会写成掘文分享出来。就算是这样，在一段时间之后，我也经常会忘记这些曾经写过文章的知识点，需要靠不断回顾来重新学习。更别说算法这种逻辑性很强的内容了，我建了一个github仓库，对每一道解过的题都注释了非常详细的解题思路和过程，但是对我来说，有些题可能几个礼拜没做类似的题，一些具体的解题思路的细节上记忆就会有所偏差了。
面经
我这次投递的公司主要是杭州的大型互联网公司，包括阿里、网易、字节、滴滴、快手、有赞等。字节是简历就挂，后续没有任何回应了，快手暂时没有hc，其他公司都走了面试流程，因为是不久之前的面试，所以本文不会带有具体的部门信息。
有赞
一面分成两部分，一块是面试，八股文偏多，一块是笔试（算法），在他提供的一个在线编码平台上编写。
- js基本数据类型？bigint和symbol有没有实际使用过？
- es5继承？es5跟es6继承的区别？
- es6继承里的super的作用？
- 原型链？
- promise的实现原理？race和all的功能？
- 生成器有没有用过？生成器有哪些作用？
- flex有没有用过？具体有哪些属性？
- vue和react的区别？
- react fiber了解吗？
- https和http区别？
- 笔试：1.中文数字转为阿拉伯数字？（栈思路）2.最长公共子序列？（动态规划）
有赞其实是我最晚投的公司，但是回应是最快的，是我第一个面试的公司。不过整体下来的面试体验其实不太好，我自己觉得答题的准确度还好，但是跟面试官的交流并不是很顺畅。最后的两道笔试题也不算难，但是只给了半小时的作答时间，我答完了第二题，第一题就做了一半。几天后就收到一面挂的消息。
阿里
阿里的面试是我碰到过的面试体验最棒的，他们不会机械式的问你问题，而是循循善诱，不断的引导你去回答问题。
一面
- IE盒模型和W3C盒模型设置宽度区别？
- padding-top：100%？
- flex属性的三个项？
- 绑定两次bind的作用域？
- react hooks和class的区别？
- react hooks实现原理？
- hooks怎么模拟componentDidMount？
- babel-polyfill和babel-runtime区别？具体怎么配置？
- let，const会被babel编译成什么？
- 前端跨域？options请求？
- cookie？
- 做过最有成就感的项目？
二面
二面全程是在阿里的伯乐系统上，在线做了几道编码题，也问了一些问题。
笔试：
- 异步请求同步运行问题？
- 遍历树形数据，获取数据？（DFS,BFS）
- 指定路径数据的浅拷贝？
- 两数之和？（查找表）
- 爬楼梯？（动态规划）
- 二叉树最近公共祖先？（二叉树）
面试：
- splitchunk相关问题？
- 写过webpack的loader和plugin吗？具体实现的细节？
- 数组和链表区别？
- eventloop？
- vue和react区别？
- react redux？
- 小程序实现原理？为什么？
- 前端安全？
- 做过的项目相关问题？
三面
- 爬楼梯？（不知道为啥又问一遍）
- 从输入一个url到页面显示，经历了什么？一些地方继续深入问？
- 问项目？
- 聊一些关于职业发展，自己的追求各种话题？
阿里面试整体比较顺利，每次面完过几天就有回应，基本一礼拜一面，不过从我投简历到后续hr面，到体检合格，发电子offer，也差不多快要2个月了，这个时间跨度真的有点长。
网易
网易的面试是比较坎坷的，一开始面试一个部门到三面挂了，然后又被另一个部门捞起来，也是到三面，因为那时候已经拿到了阿里offer，要的薪资高了不少。不知道是薪资问题还是个人原因，最后回馈说是想招一个更资深的开发，就把我挂了。
第一个部门的面试说实话有点水，也没啥内容，就不写了。
一面
笔试：
- 限制最多同时请求n个并发请求的函数？
- promise，async， await相关的打印顺序？
- 实现一个显示上一个值的hooks？
面试：（第一个面试官）
- padding-top: 100%？
- 实现三栏布局有哪些方法？
- flex属性的三个参数？
- npm的^和~？
- npm模板如果存在不同版本的模板依赖怎么处理？
- commonjs，esm怎么处理循环引用？
- babel-polyfill和babel-runtime区别？
- react hooks和class区别？
- redux是怎么触发react更新的？
面试：（第二个面试官）
- vue2和vue3的区别，理解？
- vue2，vue3的响应式原理？
- vue3的ref？
- keep-alive实现原理？
- 怎么用webpack去更好的优化资源的加载？
二面
第一个面试官：
- 最有成就感的项目？
- 场景题：负责一个项目，内部引用的都是别人的组件，有一些别人跨域的请求，怎么去统一处理？
- 场景题：事件代理，target和currentTarget？
- css grid？
- 前端安全？
- https相关？
- 从输入一个url到页面显示，经历了什么？
- react fiber？
- hooks怎么模拟componentDidMount？
- useEffect和useLayoutEffect区别？
- 算法题：一个数组，只有0和1，怎么进行排序，将0放在数组左侧，1放在数组右侧？
第二个面试官：
- 看题说打印内容，变量以及立即执行函数的变量提升？
- 宏任务微任务的打印顺序？
- eventloop?
- vue和react的区别，理解？
- 前端错误监控实现思路？
- react router实现原理？
- react hooks和class怎么进行性能优化？
三面
三面没有技术相关的内容，也就不细说了。
结尾
希望大家也要加油，培养自主学习的习惯，找准目标和方法，也可以早点上岸。
感谢
如果本文对你有所帮助，请帮忙点个赞，感谢！
