👉 个人博客主页 👈
📝 一个努力学习的程序猿
专栏:
HTML和CSS
JavaScript
jQuery
Vue
Vue3
React
TypeScript
uni-app
Linux
前端面试分享
前端学习+方案分享(VitePress、html2canvas+jspdf、vuedraggable、videojs)
前端踩坑日记(ElementUI)
重要的说明放在前面(“免责声明”):因为大家也都知道面试的时候,一个问题肯定会有多个回答方式,每个面试官想听到的答案肯定会有所不同,所以为了让大家能够理性看待,有所思考,也为了避免大家参考我的“应试答案”,毕竟答案不太严谨,所以提供的【免费下载初级前端面试题】里大部分会给一个参考方向。等资源审核通过后,会第一时间贴进来。
前言
从大三开始写CSDN,到现在已经工作2年半。在2023年,我经历了裸辞的一段时光,实话讲很难熬,再加上新工作强度大,导致我2023年一篇文章都没有写。在裸辞期间,看到最多的话,就是前端已死。不过,死不死我不知道,我只知道工作很难找,真是应了那句话:“现在搞计算机,就是49年入国军”。其实,不仅仅是前端,只要去任何一个程序员平台去看,都会得出一个结论“工作真的很难找”。而我在经历过2023年后,整理并想写的唯一一篇文章就是该篇,很希望给大家提供些经验,让即将进入计算机行业,做前端的朋友少走些弯路,能不裸辞就不裸辞(除非工作不顺)。最后,本文内容仅限个人观点+经历,欢迎大家讨论。
个人经历-裸辞
博主是双非一本计算机毕业,从大三开始自学前端,目前一直从事Vue生态的开发工作,在2023年年后选择了人生中第一次裸辞。裸辞前想的是好好休息一下,在所谓的金三银四开始找工作,而且因为只经历过校招,在有学校的平台加持下,当时没觉得找工作是个很难的事。但是当躺平一个月后,无论是自身无工作的焦虑心态还是家人的催促,心里很难继续保持平静。当自己开始重新找工作,并发现情况不理想时,才在各种渠道查阅信息,似乎整个互联网都不太景气,你会发现除了科班毕业生外,还有一大批转行想当程序员的。
博主在历经了一个半月的找工作时间里,投递了大大小小几百家公司,我只能和大家说,对普通人来讲,学历是最关键的,其次才能聊到技术。因为如果没有能在简历里让人眼前一亮的技能,100个人里,100个会Vue、React…,那没有学历就很难进到面试环节。其中,给到面试机会的,大概十几家公司(大多为外包)。给大家一个恐怖的结果,我切身感受到了现在公司招人的高要求和内卷:几百人甚至几千人投递一个岗位,其中会有985、211高校本科、研究生毕业的人与你竞争。而公司因为备用人选太多,你能明显感受到,公司希望你学历高,要的薪资低,什么都会,反正你不接受有其他人能接受(连外包的门槛都上升到了本科计算机毕业生)。
因为路是自己走的,既然已经走上了裸辞的不归路,那无论什么结果都得忍痛接受,所以我特别想整理该篇文章,希望大家能耐心细致的做出职业规划,形成自己的专业壁垒,而我也只不过是踩了不了解行业的坑罢了。还有一个切身体会就是:现在前端环境还是蛮卷的,躺平似乎成了一种过错,需要不断学习新技术去提升自己的能力。这也导致我想在30岁左右转行,不过走一步看一步吧。
话虽这么说,如果是计算机相关专业本科及以上学历的应届生,那走属于自己的路还十分来得及,应届生机会是无限多的。面试官对应届生的要求不高,只要坚持面试,保持学习和自信,即使你的专业分(排名)不高,想要面试通过并不难。
如果已经工作了一两年,想要跳槽,建议先投递简历试一试,因为市场上初级程序员多的数不过来,裸辞出来短期内可能找不到同等水平的工作。即使能力再强,也要从成千上万的人当中脱颖而出,还有要接受降薪和工作不满意的风险,甚至无奈只能前往外包、考虑转行。
面试经历
我是2023年年后开始找的,双非一本计算机本科毕业,实际1年半的工作经验,按照2年工作经验去找的,技术栈是Vue,那时候行情依然很差。在我求职的一个多月时间里,投递简历大多会石沉大海,寥寥无几的面试机会。面试官要么极其刁钻,要么套你方案,HR还要不断压价。最后到了今年虽然找到了工作,但是也未必比跳槽之前强(这导致我一年都没有写文章了)。
跑题这么久,现在说回正题,无论工作好坏,但是与面试官的斗智斗勇的确是经验之谈。先说说八股文(面试题)部分。
通常呢,在自我介绍后,面试官会优先根据简历上写的技术、项目、功能等提问,这就需要确保在简历上的内容,一定要能对答如流。如果面试的中小型公司,可能问的不会太深。面试题可以看本文的附件,里面的面试题足够应对基础的Vue方向题目了(至少博主一直背的就是这个我自己整理的word文档)。而如果面试的是大厂(包括外包到大厂),那么基础的面试题就不够用了,面试官会越问越深,虽然很深的问题也许并不是决定你去留的题目,但是如果能有自己的实践或者理解,那么成功几率就会大大增加。举个最常见的组合拳:
面试官:什么是闭包?什么是作用域链?写个闭包的例子吧!为什么这样形成了闭包?(面试官写了个例子)这样写是不是闭包?存储的时候是在栈内存吗?闭包有什么应用?防抖和节流知道吗?写个防抖函数,再写个节流函数吧!什么又是垃圾回收?闭包为什么不会被回收?JS是如何实现自动垃圾回收的呢?又如何手动进行垃圾回收呢?闭包会不会出现内存泄露?什么情况下会内存泄露?怎么避免内存泄露?怎么释放闭包?
以上,就只是一个小问题。那如果真的答不上来怎么办?博主经历了两个大厂的面试,我到现在都还记得面试官因为我答不上某个很深的问题而若有所思的表情(一套套的组合拳往我身上打,尤其是Webpack完全答不上来)。我曾尝试转移面试官的注意力,企图聊到我熟悉的内容,但是面试官不断提醒我要正面回答问题。或许有时候明确说不了解也是一种选择😂。
首先说一下对答环节:
根据博主的经验,通常聊JavaScript的问题会占据对答时间的40%,所以JavaScript八股文一定要熟练。HTML+CSS问的问题相对就简单多了,八股文问的也比较少,大概占据对答时间的10%。有的时候甚至不会问,其中HTML真的很少被问到,CSS被问到频率还是很高的。剩下的50%左右对答时间就会在 Vue 相关问题上(Vue2、Vue3、Vuex、Vue-router、Webpack等等相关内容)。
还需要说明的是,博主自己在准备面试的时候,也在网络上看到了很多前端面试的题目分享,其中包含计算机网络、数据结构、浏览器相关的,确实可能会问一些极其常见的问题,但问的频率很少。不过有一个面试官问了我什么是“算法的时间复杂度”,当时我就懵了,明明知道有这么个东西,但就是回答不上来🤦。
以上就是常规的对答环节。接下来,算法方面,只有大厂面试会考,博主面了两个大厂,都现场写了算法题。所以如果想进大厂,算法题必刷,通常会给1-2道题,给10分钟限时。当然不排除小厂也会考算法题的可能。如果想准备算法,但算法不好的朋友,博主会给出自己面试时被问到的算法题,可以借此来感受一下大厂2年经验算法题的难度(目前大多是递归、对字符串+数组+对象的处理这种)。当然如果有精力还是建议海量刷题,因为有的时候算法很简单,只是自己想不到这个简单的方法,在看到答案时才会有恍然大悟的感觉。
遇到的算法题(只能用JS实现,不引入第三方库):
1、普通的数组(number[]、string[])如何做数据去重,如”[1,1,1,3,4,5,1,7]”
2、对象数组如何根据某个字段做数据去重,如”[{a:1,b:2}, {a:1,b:3}, {a:2, b:4}]”?
3、一个字符串,如“abbcccdddddeeeeedcb”,在该字符串中取出所有连续最大的字符串内容(eeeee / ddddd)
4、给定一个number数组,如“[2,3,4,5,8,9,10]”,拿到其中所有相加为特定值的数字组合,如本次相加为10的全部数字组合
5、给定一个number数组,如“[2,3,4,5,8,9,10]”,怎么反转数组([10,9,8,5,4,3,2])?
6、给定一个字符串,如“get-element-by-id”,怎么把它转化成驼峰命名(getElementById)?
7、如何实现数组扁平化,把多维数组变成一维数组?如“[[1,2,3],[3,4,5,5].[6,7,8,[9,10,[11]]]]”
以上对答+算法阶段结束后,大厂通常还有一种开放式的聊天阶段,会被问到项目经历,去说一些项目中遇到的问题以及如何解决的,或者自己做过最牛的功能以及怎么实现的,或者给你提一个场景,看问题要怎么解决。通常在聊这些功能时,顺带也就问到了相关八股文。这一部分是要准备一些的,避免现场临时想到了一些内容,结果被问的手足无措,面试官就会觉得你没有参与过项目,或者是培训班出来的。
除了上述以外,最后的建议:大家可以多刷CSDN、牛客、掘金找一些面试题,然后在leetcode上刷算法题。随着开发年限的提升,个人的技术栈一定要扩充,同时注意源码解析,着重纯JS手写功能(即使现在用框架或组件库会简化开发,但是面试官更注重你用JS到底会不会写)。工作年限上去后,面试题一定会是更难的内容。祝愿看到文章的每位朋友能够早日找准学习重心,找到一份好的工作。
最后,如果感兴趣的话可以查看一下下方的Vue学习路线,是博主目前工作和面试过程中涉及到的技术,避免漫无目标的学习。不过有的时候并不是学习的越多,工作越好找,建议还是精通主要的技术,随后在工作和求职过程中,不断应用和进步,根据工作需要适当学习某项技术。
前端初级程序员 Vue 方向学习路线 - 基础
该学习路线仅限Vue方向,因为博主也只是2年半的初级前端,所以就当是入门路线吧。
一定注意:内容仅为个人经验总结以及未来个人的学习规划,博主通过学习以下技术栈,能够找到前端Vue 相关工作。梳理内容不仅是方便自己查看,也希望能借此帮助迷茫和有需要的朋友。因为博主就是从迷茫期过来的,不知道自己应该会什么,更不会有人告诉我要学习什么。所以,有开发经验的朋友从自身工作内容和学习兴趣出发,决定要学习的内容。刚毕业的朋友放宽心,从最基础的内容学起。
HTML+CSS+JavaScript 必须精通 🌟🌟🌟🌟🌟
面试必问
Sass / Less 建议了解 🌟
它们扩展了 css 语法,以便于提升开发效率、代码可读性,具体使用看项目要求,我个人参与过的项目中都会使用其中一种。很多招聘条件上会要求,但我面试没被问到过,说实话也没什么好问的,最多也就会被问有没有用过。Sass/Less本身也比较简单,遇到项目再看文档也来得及,但可以提前了解,避免面试被问到,导致连简单的表述都说不上来。
Sass官网:https://www.sass.hk/docs/
Less中文网:http://lesscss.cn/
jQuery 感兴趣就了解下
真的有精力的话可以简单了解下,它是JavaScript代码库(框架),用于简化DOM操作。但目前工作中大概率用不到,投递Vue的岗位没有学习的必要,毕竟现在已经到了 Vue/React/小程序 的时代,只有比较老的项目可能还会使用。而且公司如果有这样的项目,招聘条件上肯定会写,这种情况下面试才可能会被问到。
node.js 建议了解 🌟
众所周知,基本上前端无论开发什么,都或多或少需要安装+接触node.js。进一步说,你只要安装了node.js,那么你就一定会使用到npm,所以至少得知道如何使用npm命令,其他语法可以在有需要时,查看下方链接文章查看。
博主总结的基础:https://blog.csdn.net/qq_45613931/article/details/105538861
推荐查看:
(1)常用模块:https://blog.csdn.net/qq_45799465/article/details/123333126
(2)node基础语法及使用:https://zhuanlan.zhihu.com/p/447480823
虽然招聘条件上只有一部分公司会写出来对node.js有要求,但其实基本上默认都得会node.js,不过面试官基本不会问这方面的内容。除此以外,因为node.js本身是一个开源的JavaScript运行环境,支持在浏览器外运行JavaScript代码,可以进行后端开发,像一些数据库连接、消息队列等等。所以如果真的有公司招聘条件上写用node.js进行服务端开发的话,那估计是很老的项目,建议不要去。
angular 感兴趣就了解下
作为能和Vue/React齐名的框架,说实话AngularJS真的算是老古董了。我遇到过以angular为技术栈找工作的,但工作机会肯定比 Vue/React/小程序 要少。如果是Vue方向,不需要学习angular,感兴趣的话可以简单了解一下。最有可能的,也就是面试官问问你有没有了解过,让你回答angular和vue/react的区别是什么。
Vue2 + Vue3 + TypeScript必须精通 🌟🌟🌟🌟🌟
(Git常用命令、Vue基础、VueRouter、Vuex、ElementUI & Vant、Echarts 组件库使用)
不用多说,主要的 Vue 技术栈方向。不过需要补充说明,在这里特意说明 Vue2 / Vue3 是因为:目前随着 Vue3 的不断发展,很多公司开始从 Vue2 转成了 Vue3,有些公司在招聘条件上会标清楚是Vue2 / Vue3(没标的就是Vue2,有标注的都会写出来是 Vue3+TypeScript 或者 Vue2+Vue3。更有的HR会问你是否会 Vue3,不会的话直接就被刷了)。不过现在很多面试官对 Vue3 也一知半解,面试大部分会问基础 Vue3 的 api 或 Vue2和Vue3的区别(过两年就不一定了),所以现在去学习和准备 Vue3 还不晚,没有项目经验很正常,面试官会给些机会和容忍度,等到时候普及Vue3,面试就要难度加倍了。
必须学习 TypeScript 的原因,博主对来龙去脉不太清楚(有没有朋友可以在评论区解惑?),总之行业内默认 Vue3 要搭配 ts。
Webpack + vite 建议精通 🌟🌟🌟🌟
面试虽然不能说必问,但大部分都会问。虽然 webpack 可能要被 vite 替代,但是只要还有 Vue2 项目,webpack 就依然是学习+面试重点。虽然博主很想学明白 webpack,但构建这东西还真是得需要经验和学习技巧。博主平常开发很少修改 webpack,光看教程也没什么感悟,具体优化在不同项目里情况肯定都不同,有的不能完全套进去,所以一直不知道如何学习 webpack,也不知道项目里优化 webpack 要如何下手。所以面试经常吃瘪,只能答一些八股文,尤其是大厂面试会细问 webpack,但博主通常会以“自己只会参照文档基础使用”为由拒绝回答,可想而知少了多少的 offer 机会。
因此,有能力的一定要学明白 webpack。而 Vite 在 Vue3 普及后,一定会是面试重点。总结来说就是:可以不精通,但一定要学。
nginx + linux 建议了解 🌟
先说结论:博主面试期间没被问到过 nginx 和 linux 命令,即使简历上写了相关经历。但建议学习是因为,很多中小厂没有运维,或者说是需要前端自己去主机上更新前端项目(或者公司配备 macbook),那此时就必不可少要会用 linux 命令,还可能要操作 nginx、docker。不过等需要使用的时候再学习也不迟。
大厂前端可能确实不需要考虑这些。而博主最开始就是需要自己去主机上更新前端项目,所以被这些命令折磨了好一阵子,但是学习+熟练使用过后,就很简单了。
Mock 建议学习
先说结论:面试不会问,即使博主简历上有写相关经历,但工作中可能会用到。不过工作中遇到再学也来得及,感兴趣的话可以了解一下。Mock这个工具简单来说就是:前端模拟一个接口的返回数据,用于测试前端页面展示效果。
Mock基础知识:https://blog.csdn.net/qq_45613931/article/details/119530800
以上为博主在寻找 Vue 工作时,会问到的技术栈或者公司可能会用到的技术,相对比较基础,也是自己常用的相关技术,相关性也给出了原因和表述。大部分参照文章、教程或官方文档即可掌握,可以满足工作需求。接下来的内容属于扩展性的内容,如果会以下部分,前端就业面会更广(就不仅仅是Vue方向了),部分公司也可能会明确标注使用以下的部分技术,或标明是加分项,因此大家可以在有精力时按需学习和了解,也按优先级给出了重要性参考。
前端程序员学习路线 - 进阶
react 建议学习 🌟🌟🌟🌟🌟
(React Hooks、React-router、Redux、Antd组件库使用、TypeScript)
首先,Vue 方向不用100%一定学 React,也并非大部分公司真的要求 Vue、React 都会,或者说做两种技术栈的项目,除了大厂。如果要进大厂,建议 Vue、React 都必须精通,面试官也 100% 会问你 Vue、React 的区别,或者让你聊聊自己的理解。但是当你如果真的去招聘上看,就算你搜 Vue 方向,很多也都会写 Vue 和 React 双技术栈都要会,但我面了那么多,就说自己不会 React 也可以,但可能也正是因为这样会错失很多机会吧,毕竟有卷王真的都会。所以如果有精力的话,那 React 就必须精通。
uni-app 建议学习 🌟🌟🌟🌟(小程序开发框架,但不限于uni-app)
首先,博主只开发过一次微信小程序项目,其中使用的就是 uni-app,所以博主也不敢说 uni-app 就是开发小程序的终极方案,主要是自己也不知道公司还能有哪些技术方案,所以该条只写了一个 uni-app。不过,根据自己的经验,只要有Vue、React基础,上手开发小程序是不难的。
而为什么建议精通或者说要掌握某个小程序开发技术栈的原因是:在博主找 Vue 工作的过程中,很多公司在招聘上都写了要有小程序开发的经验,甚至部分公司约面试时会说:熟悉小程序开发是必须条件。所以从目前来看,很多公司相比于开发页面或移动端APP,更愿意维护一个小程序,毕竟中小厂未必能有自己的产品,借助各个小程序平台(微信、快手、抖音等等)是个不错的选择。
所以虽是进阶部分,但为了个人发展,小程序开发建议学习了解(无论面试 Vue、React 哪个方向,只要招聘上写了小程序开发,就大概率会问有没有开发过小程序)。
Electron / NW.js选学(桌面应用程序框架)
介绍一下:Electron是使用JavaScript,HTML和CSS构建跨平台的桌面应用程序框架,它可兼容Mac、Windows和Linux,构建出三个平台的应用程序(NW.js同理)。虽然博主没有做过这样的项目,不知道具体应用场景,现在主流的前端开发也不是桌面应用程序,但有公司的前端招聘上标注了 Electron(即使是Vue方向),并明确说是加分项,因此有精力的可以学习一下。
Electron 介绍文章:https://zhuanlan.zhihu.com/p/553664165
ReactNative / Weex / flutter 建议学习 🌟🌟🌟(移动端开发框架)
前面介绍了Web端、小程序端、桌面应用程序的开发技术栈(框架),这里介绍一下移动端开发框架。虽然 Vue、React 自身也可以借助工具,转成可以在移动端运行的APP(在这里介绍一下:用HBuilderX 打包 vue 项目 为 App 的步骤),博主之前也用 Vue 做过移动端项目,但是缺点还是很明显的:一个是项目代码本身不能保证跨平台(即同样的代码怎么保证 Web端、Android、iOS 均能正常响应,即使我们使用工具,将它生成了一个APP,内部肯定帮我们做了些转化。但从我个人之前开发结果上来看,中间埋藏了很多代码兼容性层面的坑),另一个是不一定能通过现有API直接调用移动端某功能(查阅起来也很麻烦,且可能需要使用原生用法,比如如何监听手机返回键、如何唤起手机摄像头等等)。而使用了移动端开发框架,优点就很明显了:它们的底层都是原生APP应用,保证了多设备的通用性,减少了开发成本,同时也能持续升级迭代,提供更好的交互体验。
其次再说一下工作方面:在博主找Vue工作时,以上三个是招聘中最常见的移动端开发框架,部分公司会硬要求会其中的几个,或者作为加分项。因此作为前端,会其中的几个还是很有必要的(虽然不会也能找到Vue工作,但就业面相对就窄了很多),建议有精力时优先学习。如果大厂涉及到移动端项目,通常都会使用移动端开发框架,因此进大厂必须对移动端开发框架有所了解。
React Native 中文网:https://www.reactnative.cn/
Weex :https://weexapp.com/
flutter:https://flutter.cn/
移动跨平台方案对比:https://zhuanlan.zhihu.com/p/80436737
nuxt 选学(基于 Vue.js 的框架)
先说结论:部分公司在招聘上会将其作为加分项(估计是该公司项目使用了 nuxt),但它并不是什么新奇的技术,因为它是基于 Vue.js 做出的通用应用框架,换句话说有 Vue 基础上手很简单。感兴趣的话,可以学习了解一下。
官网:https://nuxtjs.org/
介绍:https://www.jianshu.com/p/3c47b4ee0b66
Canvas / WebGL(2D、3D基础)、Three.js(3D代码库) 选学
先说结论:部分公司在招聘上会将其作为加分项(估计也是该公司项目使用到了),毕竟在页面上做个三维效果还是蛮帅的。但博主个人见解是,canvas和WebGL属于是前端的偏门了,除了专门做2D、3D的公司,肯定几乎用不上这部分内容。感兴趣或者工作需要的话,可以学习了解一下。
以上是进阶部分,大多为加分项,也没脱离前端程序员的工作范围太多,都还算是蛮常见的。而以下要说的就是在前端领域,属于卷王该学习的内容了,已经不能说是加分项了,属于是前端的新出路了。部分公司招聘上会要求前端使用以下内容,不过已经属于是新领域了,所以可看个人兴趣程度学习。
前端程序员学习路线 - 从未设想过的选择
Layabox旗下H5游戏引擎、Egret H5游戏引擎
作为前端程序员,还有个领域没有被提及,那就是网页游戏。以上两个是我在招聘上看到的两个有需求的H5游戏引擎。它们将能够支持 2D\3D\VR\AR 的H5网页游戏、APP游戏(Layabox是服务商,它提供了好几个产品:LayaAir、LayaStore等等)。感兴趣的话,可以自行学习搜索。
Cocos旗下产品(Cocos2d-x)
如果说上面的 Layabox 和 Egret 更多的是在做 H5 网页游戏,接下来要提到 Cocos 是因为它的产品 Cocos2d-x 可以使用 JavaScript 语言开发,更多的去用于 iOS、Android和H5的手机游戏,同时国内手游行业一向有“3D使用Unity,2D使用Cocos”的传统说法,因此在这里也提到了Cocos2d-x,当然它也能支持多端(PC、主机)。它也有很多代表作,基本上和Unity3D瓜分市场。感兴趣的话,可以自行学习搜索。
(除此以外,再常见的游戏引擎就是:Unity3D、虚幻引擎Unreal Engine,不过这就和前端技术不太沾边了)
3D建模(Maya/Blender/C4D/3DS Max)
最后呢,既然都涉及到3D游戏了,那必不可少的就是3D建模,以上也是在招聘过程中看到的一些建模工具,博主也不知道它们哪个最好用了,感兴趣的话,可以自行学习搜索。
更多分享
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
https://blog.csdn.net/qq_45613931/article/details/106035099
【前端】HTML+CSS 纯干货 基础知识 + 面试题分享!
https://blog.csdn.net/qq_45613931/article/details/109021739
【前端】JavaScript 纯干货 基础知识 + 面试题分享!
https://blog.csdn.net/qq_45613931/article/details/109028679
【前端】Vue 纯干货 基础知识 + 面试题分享!
https://blog.csdn.net/qq_45613931/article/details/109052712
【前端】jQuery 纯干货 基础知识 + 面试题分享!
https://blog.csdn.net/qq_45613931/article/details/109050550