七年前端的面试总结

3,512 阅读14分钟

本篇文章写给在公司受到压迫、剥削和不公平的待遇的前端道友们,每天在公司精神内耗,身心疲惫。面对加不完的班,做不完的需求,改不完的bug,同事的排挤,领导的刁难,可能你现在已经忍无可忍,极度的想要离开,内心的冲动已经无法压制,如果你是这种现状,请耐心的看完我的这篇文章,也许会给你浇一盆冷水。请君为我倾耳听。

1. 引言

先交代一下作者的基本情况,普通二本,软件工程专业,7年淳前端工作经验。2024年3月底从上家离职。离职期间,回家忙了一些私人的事情,然后回了北京,开启了人生的副业,详情请跳转至 30岁,我开启了人生副业查看。一切尘埃落定以后,我就开始着手找工作。当时我信心满满,以为可以凭借自己的三寸金莲斩获诸多offer,然后挑选一个自己满意的去发光发热,没成想,我自闭了。我从开始找工作讲起,可能中间有些比较繁琐的过程,大家想看故事的跳过挑重点看,想从中获取一些对自己找工作有用的信息的,可以仔细看。

2. 面试准备

下面先把自己在面试之前做的一些准备工作讲讲,说不定能帮助一些正在渡劫的道友。

2.1. 简历

现在能约到面试的简历已经不是几年前那样简陋了,可能你会一些前端的技能写个前端就能约到面试机会。现在时代变了,下面从几个方面展开说说。

第一学历问题。本科(专科在一线城市基本已经阵亡了,没有公司会看)是基本要求,就算你最后连哄带骗的蒙混过关面试成功,最后背调也会把你拒之门外,浪费双方的时间和感情,这是我知道的,拿了一个offer,最后因为学历问题黄了。同样的,那些什么成人自考,专升本之类的,绝大多数公司,根本不搭理你。他们就要求学信网可查统招本科,外包无一例外亦是如此。通常在boss上第一句的回答是这样的:请问你的学历是学信网可查统招本科吗?,不用想,就是外包。在这里插入题外话,学历重要吗?我认为对于普通人来说,非常重要,你没有家庭背景,社会上没有非常牛的人脉资源,你想要在你程序员这个行业混的风生水起,天方夜谭。一般年薪能到百万的的技术总监,或者技术经理人,哪个不是高学历,又是博士又是硕士,所以以后不要再说什么,我能力好,我听话,我干活快,我愿意加班,不就是学历差点吗,为什么就不能给个机会呢?不好意思,人家有学历好的可以选择,为什么会选择你呢?而且现在的老板都爱面子,哪个公司的老板不希望自己公司的员工都是清一色的清华博士生?做梦都能笑醒了。

第二工作经历、项目经验,工作经历大厂背景优先选择,3-5年为主力军,工作换的太频繁不要,项目经历和专业技能匹配度很高,公司HC对岗位要求特别严格,需要有相应的经验的人。可能人家写了vue相关,你说我会vue不就行了吗?可不是这么理解的,人家要的是行业经验,业务经验,人家要个会可视化的工程师,那你就要在简历里面体现出有前端可视化相关的经验和项目来,人家要cocos游戏动画相关的,那一定是有相关经验,你自己写着玩的那种不算。还有什么Electron工程师,Node工程师,这都是对匹配度要求特别高的岗位,简历一看就能看出来你有没有相关的经验了。再说说你的项目,还是那句话,你要有亮点啊,面试官来一句,说说你以往的工作经历当中你觉得你做的非常牛擦的、非常有难度的、非常有亮点的简单展开来讲讲,然后你哇啦哇啦一顿鸟语输出,然后面试官emo的看着你,就这?所以你写的项目要非常能打,就算不是你做的,你拼凑的也要经得起推敲,不要几个问题就问露馅了。

第三专业技能,专业技能现在光写个css、html、css、react、vue可能不太够看了。大家都知道前端的技术更新日新月异,各种知识多的离谱啊。而且你还不得不学,所以你要是懂的,你就多些点吧。如果你写一些可视化,桌面端,微前端,跨端,服务端相关的前端技术,可能更有吸引力一点,前提是你能吹的出来。这些东西可能我们平时工作当中根本接触不到,接触不到不要紧啊,前端要学习,学习的不就是这些东西吗?你学呀,现在不学,等你退休了学吗?我们学习就是为了这一刻给自己增加一些优势和面试机会。

OK,讲完了简历上的内容,下面我们讲讲复习。

2.2 复习计划

我的复习计划也是有个章法,我会分为这几个部分:八股文、算法、常见coding、项目总结、前端新技术拓展。

  1. 八股文

八股文我这里有一套前端渡劫秘籍,里面包含了常见的各种面试题,我会挑一些主要的进行分类,然后总结成一个思维导图,记录关键词,方便记忆。 大家有需要的可以自行领取,直接点击上方链接即可查看,你看了以后记得回来感谢我,并且点赞收藏关注作者的知识库,里面还有很多好玩的,足够你看个三天三夜的,有个校招的粉丝看了我这个渡劫秘籍直接成功上岸美团实习生。

这个文档也是耗费了我无数个难眠之夜才总结出来,当然也有一些是站在前端巨人道友们的肩膀上的,非常感谢这些前辈,也希望我的这个渡劫秘籍能帮到在座的各位牛马前端程序员能在当牛马的道路上越走越远。

下面这个是我总结的思维导图,大家可以参考一下:

  1. 算法

说实话,算法是我的硬伤,我非常抵触,我大学的时候算法还挂科过,心里有阴影。各位看着办吧,我没啥能传授的,要真题详解的话,可以去渡劫秘籍中找找,你们就刷去吧。

  1. 常见coding题

这个我着重讲一讲,现在很多公司面试会要求手写代码,并不考你算法,只是考一些常见的前端逻辑思维。于是我专门建了一个git仓库,收集了前端常见的coding题以及我面试遇到过的题目。总体大致分为以下类目:

.
├── 01-HTML
│   └── README.md
├── 02-CSS
│   ├── README.md
│   └── 水平垂直居中.md
├── 03-JavaScript
│   ├── ES6+
│   │   ├── promise
│   │   └── template
│   ├── README.md
│   ├── advanced
│   │   ├── 1.curry.js
│   │   ├── 2.compose.js
│   │   └── 3.ajax.js
│   ├── array
│   │   ├── 01.filter.js
│   │   ├── 02.flatten.js
│   │   ├── 03.isArray.js
│   │   ├── 04.map.js
│   │   ├── 05.reduce.js
│   │   ├── 06.shuffle.js
│   │   ├── 07.push.js
│   │   ├── 08.repeat.js
│   │   ├── 09.forEach.js
│   │   ├── 10.some.js
│   │   ├── 11.every.js
│   │   ├── 12.find.js
│   │   ├── 13.from.js
│   │   └── README.md
│   ├── basics
│   │   ├── 01.apply.js
│   │   ├── 02.call.js
│   │   ├── 03.type.js
│   │   ├── 04.instanceof.js
│   │   ├── 05.new.js
│   │   ├── 06.extends.js
│   │   ├── 07.clouser.js
│   │   ├── 08.setInterval.js
│   │   ├── 09.setTimeout.js
│   │   ├── 10.overLoading.js
│   │   ├── 11.reverse.js
│   │   ├── 12.Object.create.js
│   │   ├── 13.Object.assin.js
│   │   └── 14.stringifyandParse.js
│   └── coding
│       ├── 01.clone
│       ├── 02.debounce
│       ├── 03.throttle
│       ├── 04.removeRepeatEle.js
│       ├── 05.randomArray.js
│       ├── 06.getSearchParams.js
│       ├── 07.toCamel.js
│       ├── 08.arrayToTree.js
│       ├── 09.treeToArray.js
│       ├── 10.dateFormat.js
│       ├── 11.formatNumberWithCommas.js
│       └── 12.phone.js
├── 04-TypeScript
│   ├── Exclude.ts
│   ├── Extract.ts
│   ├── NonNullable.ts
│   ├── Partial.ts
│   ├── Pick.ts
│   ├── README.md
│   ├── ReadOnly.ts
│   ├── Record.ts
│   ├── Required.ts
│   ├── ReturnType.ts
│   ├── demo.ts
│   ├── extends.ts
│   ├── in.ts
│   ├── index.ts
│   ├── keyof.ts
│   └── typeof.ts
├── 05.FrameWorks
│   ├── React
│   │   └── index.js
│   ├── Vue
│   │   ├── vue2
│   │   └── vue3
│   └── qiankun
│       ├── legacySandbox.js
│       ├── proxySandbox.js
│       └── snapshotSandbox.js
├── 06.Mini-Core
│   ├── eventEmitter
│   │   └── index.js
│   ├── koa-compose
│   │   └── index.js
│   └── render
│       └── index.js
├── 07.Broswer
│   ├── clouser
│   │   ├── clouser.js
│   │   ├── index.html
│   │   └── index.js
│   └── memory
│       ├── index.html
│       └── index.js
├── 08.Data-Structures
│   ├── 1.linkedList
│   │   ├── README.md
│   │   ├── linkedList.js
│   │   └── test.js
│   ├── 2.stack
│   │   ├── array_stack.js
│   │   └── linkedlist_stack.js
│   ├── 3.queue
│   │   ├── array_deque.js
│   │   ├── array_queue.js
│   │   ├── deque.js
│   │   ├── linkedlist_deque.js
│   │   ├── linkedlist_queue.js
│   │   └── queue.js
│   ├── 4.hash-map
│   │   ├── array_hash_map.js
│   │   ├── hash_map.js
│   │   └── simple_hash.js
│   ├── 5.binary-tree
│   │   ├── README.md
│   │   ├── array_binary_tree.js
│   │   ├── balance_binary_search_tree.js
│   │   ├── binary_search_tree.js
│   │   ├── binary_tree.js
│   │   ├── binary_tree_bfs.js
│   │   ├── binary_tree_dfs.js
│   │   └── treeNode.js
│   ├── 6.heap
│   │   ├── my_heap.js
│   │   └── top_k.js
│   ├── 7.graph
│   │   ├── graph_adjacency_list.js
│   │   ├── graph_adjacency_matrix.js
│   │   ├── graph_bfs.js
│   │   └── graph_dfs.js
│   ├── 8.searching
│   │   └── binary_search.js
│   ├── 9.sorting
│   ├── README.md
│   └── modules
│       ├── ListNode.js
│       ├── PrintUtil.js
│       ├── TreeNode.js
│       └── Vertex.js
├── 09.Algorithms
│   ├── README.md
│   ├── leetcode
│   │   ├── 01.twoSum-两数之和.js
│   │   ├── 02.findThree-三数之和.js
│   │   ├── 03.findMedianSortedArrays-寻找中位数.js
│   │   ├── 05.isValid-有效括号.js
│   │   ├── 06.candy-分发糖果.js
│   │   ├── 07.eraseOverlapIntervals-无重叠区间.js
│   │   ├── 08.exponential-细胞分裂.js
│   │   ├── 09.fibonicci.js
│   │   ├── 10.findIntervals-连续的数组.js
│   │   ├── 11.isPlaneDrome-验证回文字符串.js
│   │   ├── 12.lengthOfLIS-最长增加子序列.js
│   │   ├── 13.package-背包问题.js
│   │   ├── 14.uniquePath-唯一路径.js
│   │   └── 15.longestPalindrome-最长回文子串.js
│   ├── searching
│   └── sorting
│       ├── 01.bubbleSort.js
│       ├── 02.selectionSort.js
│       ├── 03.insertionSort.js
│       ├── 04.shellSort.js
│       ├── 05.mergeSort.js
│       ├── 06.quickSort.js
│       ├── 07.heapSort.js
│       ├── 08.countingSort.js
│       ├── 09.bucketSort.js
│       └── 10.radixSort.js
├── 10.Design-Pattern
│   ├── 01.observer-pattern.js
│   ├── 02.publisher-pattern.js
│   ├── 03.single-case-pattern.js
│   ├── 04.strategy-pattern.js
│   └── README.md
├── 11.Build-Tools
│   ├── Rollup
│   ├── Vite
│   └── Webpack
├── 12.Project
│   ├── monitor
│   │   ├── README.md
│   │   └── src
│   └── virtualScroll
│       └── index.html
├── 13.Company-Specific-Questions
│   ├── 1.美团
│   │   └── 2024-06
│   ├── 2.百易图
│   │   ├── 2024-06
│   │   ├── index.js
│   │   └── question.md
│   ├── 3.即时设计
│   │   ├── 2.js
│   │   ├── 2024-06
│   │   ├── promiseAll.js
│   │   ├── question.md
│   │   └── rotateArray.js
│   └── 4.乐读教育
│       ├── 2024-06
│       ├── isValidHtml.js
│       └── question.md
├── 14.Others
├── README.md
└── test.dio

以上目录为包含的所有代码,下面是目录大纲结构说明:

  1. HTMl:前端HTML相关
  2. CSS:前端CSS相关
  3. JavaScript:前端JavaScript相关
  4. TypeScript:前端TypeScript相关
  5. Framework:前端框架相关
  6. Mini-Core: 源码实现相关
  7. Broswer:浏览器相关
  8. Data-Structures:数据结构相关
  9. Algorithms:算法相关
  10. Design-Pattern:设计模式相关
  11. Build-Tools:构建工具相关
  12. Project:项目相关
  13. Company-Specific-Questions:公司面试真题相关
  14. Others:其他相关

github链接:github.com/xiumubai/co…

欢迎有志之士共建,可以把你遇到的面试题可以提交issues的或者直接以代码的形式提交merge,为后来的前端道友贡献一份爱心,也让他们能够站在巨人的肩膀上。

作者目前有两个渡劫群,一群500人,二群160人,如果你也在渡劫,可以加我wx:xiumubai01,无需验证,我拉你进群,一起交流,感受一下现在的死亡渡劫场面。

  1. 项目总结

项目总结特别重要,如果你在面试之前没有好好打磨、挖掘你的项目,在面试的过程当中你会非常的被动。首先你要知道你项目的业务背景,你在里面担任的角色,以及你负责的功能。其次,你要知道你做的这些事情,能不能串联起来,是否有一定的挑战性和难度,就跟一个业务线一样,给面试官流畅的表达清楚,最后,能不能结合业务,技术难点,让面试官全面的了解到你这做的整个事情,来体现出你的价值。这就像你去跟别人谈判一样,你要拿出足够吸引对方的筹码,才有足够的谈判资格,最终拿到满意的offer。所以的这些事情,就离不开前期的充足准备。你要挖掘你项目中的难点,把他们写下来,然后看看里面用的技术,有什么是你没有掌握的,面试官会针对这些会提出哪些刁钻的问题,你都要尽可能的去预判,才能在面试的过程中游刃有余。

  1. 前端新技术拓展

这一项其实也很重要,当你把你最新了解的一些前端新出的技术跟面试官侃侃而谈的时候,他会觉得你一定是个平时非常喜欢学习,关注前端的人,会为公司注入新鲜的血液,来应对一些新的挑战和技术升级。

下面准备开始投简历进行面试。

3. 面试经历

我第一个面试是4.11,公司为白龙马,那时候其实还没准备好,因为一直在忙,没有咋复习,就马马虎虎的挂了。之后我也有在招聘网站投简历,boss,猎聘,脉脉都海投,投着投着我发现不对劲啊,这怎么一投一个不吱声,要么是已读不回,要么是不匹配,要么人家根本不读,说好的金三银四呢?这不是铜三铁四吗?然后在5.13面了朋友内推的高途的P6+的前端岗位,最后自己把自己坑了,说错话了,就G了。这中间隔了一个月,我没有面试,不对,是我没有收到面试。然后到了5.22,我又收到了我一个朋友的内推,是个移动子公司的外包岗位,最后薪资只能给到20以下,对我来说心里落差太大了,我就拒绝了。一直到了6.13,我才真正意义上收到第一家招聘网站上的面试,持续到了6.26,我总共收到了12家的面试邀约,无一例外的,没有一家给我offer。其中有一家,去的现场面试,从下午2点面到5点,一共面了4轮,最后全部通过,HR问了我的期望薪资,我就要了23k,HR告诉我,现在他们这里已经有好几个通过面试的候选人,接下来还有面试,他们要对比一下,我一听,这不就是挑一个性价比最好的吗?其他的我就不细细的讲了,下面是面试的公司,大家自己看看:

4. 面试中的收获

从正儿八经面试到现在写这篇文章,我的内心是非常的失落的,面试少,面试要求高,薪资不按套路来,敢要我就敢拒绝,有的公司甚至是十几K就想招到一个优秀的前端架构师,甚至全栈架构师。现在不管小公司,大公司,都在压价,就像是很有默契一样,前端程序员就跟市场上的白菜一样,随意贱卖,而且要品种好的。市场经济形势不好,公司不好过,员工就更不好过了,裁员的一波接着一波,招人的企业越来越少,一个岗位一天能收到上百份简历,当初挤破了头来学前端的,还没尝到甜头就已经阵亡,这些失业的人群该何去何从?我也不知道,我的粉丝群好多都是GAP了半年甚至一年的,还有自学的,还有毕业一直待业的,还有数不清的,惨不忍睹,这些人何去何从,我也不知道,兄弟们都是冲着找工作来进群的,我没法帮他们,渡人先渡己,我很自责,也感觉到深深的无力。

我一度想放弃这个行业,但是,但是冷静下来以后,还是得继续,生活容不得我这样任性,还是得继续干。

作为程序员的我,一直在思考一个问题,除了写代码,一旦我失业了,我还能找到什么工作,才能继续维持我现在的生活和压力,我发现没有。除了写代码,什么都不是。这个问题也许每个人都应该正视起来,除了你现在的工作,你还会干什么,才能跟你现在的薪资水平持平呢?

5. 读者互动

能读到这里,说明你也有同样的经历,我的经历引起了你的共鸣,不妨大家交个朋友,如果有任何关于面试问题可以打在评论区,做着知无不言,言无不尽。

作者目前有两个渡劫群,一群500人,二群160人,如果你也在渡劫,可以加我wx:xiumubai01(朽木白,是不是很好记),无需验证,私信加群即可,我拉你进群,一起交流,感受一下现在的死亡渡劫场面。

在这里,作者承诺,我不卖面试题,也不卖课,不会向粉丝收取任何费用,面试题分享都是免费提供给大家的,包括粉丝群里一些需要指导简历的,我都是义务劳动。

希望有公司招人的朋友,可以提供一下你们公司的HC给各位道友,希望都能顺利渡劫成功。

希望在职的道友们,不要冲动,你目前讨厌的工作是多少人挤破头想进来的,所以,主要公司不干掉你,你就当养老吧。想要入门前端的,我劝你识相一点(我要当前端劝退师),不要浪费自己的时间-----------苦口婆心。

最后,我希望这篇文章被更多人看到,请各位道友多多转发,这样可以帮助找工作的、在职的、想要转行前端的人,能找到的就找,能不离职的就不要离职,能不入门前端坑的就不要入了。

7. 附录