前端面试经验分享，看菜鸡如何逆袭（已拿字节offer）

以你之姓@ 2022-12-24 05:00 180阅读 0赞

## 0、 我的秋招经历 ##

我的基本情况，南方普通985普通学生，接触前端十个月左右，今年 8 月后开始正式准备秋招。

说起我的秋招，一个词，就是“**逆袭**”。一开始，华为笔试没过，三七互娱笔试没过被捞起来后一面又挂，信心受挫。中间没有再继续投递，而是沉下心准备，刷了无数面试题。

身边同学陆续拿到offer，也挺纠结。在十月底，赶在秋招的尾巴，投了四五家网申还没截止的公司，没想到，面试一路过，最后成功上岸字节，结束秋招。

准备面试和参加面试的过程中，总结了一些个人经验，梳理一下，希望对准备面试的人有些帮助，尤其是没有面试经历的学生。这里不谈及具体的面试题目，而是一些通用的方法论。

**此文纯个人想法，希望读者保持自己的判断。**

## 1、抛开面试，系统学习 ##

**在一切之前，应该系统地去学习前端的基础知识。** 对前端而言，这些基础包括 HTML，CSS，JavaScript，浏览器原理，网络协议，MVVM 框架和一些必要的计算机基础等。应该先抛开面试的目的去学习这些知识，建立自己的知识体系，然后再结合面试题，运用掌握的知识去理解并解决面试题。

然而，很多人为了应付面试，基础技能掌握不扎实，就盲目地从网上查找各种面经，记忆甚至背诵各种面试题，本末倒置。

这里，推荐一些系统学习的途径和方法。

**[MDN文档][MDN]**：

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

**HTML 和 CSS**：

推荐结合 [MDN文档][MDN] 和 [W3school][] 两个线上教程，体会把玩上面的示例。这部分没有什么难度，主要在于记忆和编码实践，加深印象。

**JavaScript**

前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

另外，大推一个网上教程 **[现代 JavaScript 教程][JavaScript]** ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

**官方文档**

一些框架和工具的学习，一定要充分利用官方文档，一般都会有快速上手的教程。因为这些版本更新很快，有些书籍跟文章的部分内容已经不适用了。建议从官方文档入手，不懂的地方 Google 一下。

**博客文章**

把博客放在最后，是因为它不适合系统学习，更适合单点强化，此时你应该拥有自己知识框架后，并且清楚文章内容的知识点。前端开发者比较聚集的两个博客平台是掘金和segmentfault。

## 2、注重基础，不要盲目学习框架 ##

我在准备面试的时候，在 JavaScript 上花费了大量的时间。在学习 Vue 的时候，觉得很轻松，文档上很多东西都能理解。

**不要急于学习框架和工具，把基本的 HTML，CSS，JavaScript 写熟练了。** 运用原生技术，写一些基础的页面或组件，框架和工具最终也是通过这三大基础技术实现。

框架也是建立在原生技术之上的，扎实的基础能让你在学习框架时畅通无阻。比如，Vue 指令本质上是 HTML 元素特性；Vue 2.x 响应式原理是 JavaScript 的访问器属性的应用，Vue 3.0 采用了 ES6 新增语法 Proxy。如果你熟悉 JavaScript ，自然能明白 Vue 2.x 在对象与数组上的响应缺陷和 Vue 3.0 的改进意义。

盲目学习框架，容易陷入为了框架而框架的误区。只有经历繁琐的原生 DOM 操作，你才能明白为什么提出 `write less, do more` 的 jQuery 曾风靡一时。只有经历一手操作数据一手操作视图的工作流，你才能体会 MVVM 数据驱动开发的强大之处。理解框架和工具的意义，而不是因为别人用了这个技术，所以你也要用，最后给项目添加不必要的复杂度。

从面试官的角度看，一个框架不熟悉的人，可能是开发经验稍欠，而一个基础不扎实的人，很大程度学习能力不强。这种看法，在校招，尤其是大厂的校招，尤为突出，因为公司更注重的是学生的可培养性。

## 3、精准出击，逐个击破面试题考点 ##

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

在看面试题的时候，应该从面试题发现考点，然后深入学习考点相关的知识，千万不要陷入背题的误区。毕竟题目是多变的，但考点相对固定。

**兼听则明，偏听则暗。** 对于网上看到的各种面试题答案，应该思考是否正确可行，是否还有改进的地方。大部分博客对知识点的总结无法做到完全全面。所以，我对很多考点，我都会 Google 一下，结合多篇文章，然后总结出自己的答案。

> **我把刷过的面试题整理成了一个PDF文档，有需要的朋友可以 [点击这里免费获取题目+解析PDF][PDF].**

分了HTML、css、JavaScript、React、Vue、浏览器、服务端与网络、算法等等…

**篇幅有限，仅展示部分内容**

![ac0b1c2376da47d727e0dc8a77e76478.png][]

![b871b45fb2e6d5442144c863cbcff965.png][]

![f5c18f4b2878302f1f53a8c393e7eb0d.png][]

### 如果你需要这份完整版的面试题+解析，[**【点击我】**][Link 1]就可以了，免费分享给大家。 ###

## 4、面试是一种输出 ##

很多人刷了很多面试题，看了很多面经，知识储备充分，但面试的时候，即使是自己熟悉的考点，也很难令面试官满意。其关键原因在于，学习是一种输入，但面试是一种输出。

面试需要的不是你懂，而是要让面试官知道你懂，你必须有能力将考点中的要点联系起来，连贯的说出来，这并不是看过一次就能达到的。但不少人以为看过这类文章，知道这个点，就可以了。事实上，只是“知道”远远不够。

这种问题，根本上，是对技术点的不够深入，不够熟悉，没有形成自己的理解。我也经历过这一过程，你知道这些概念，自己也能分清，但难以向别人讲明白。简单测试一个CSS问题：什么是BFC？ 你肯定知道叫块级格式化上下文，问题是，怎么向面试官解释这个东西？

为了解决这个问题，首先，学习过程注重理解而不是记忆。

第二，一个知识点，需要通过多篇文章学习，重复学习，加深理解，总结出自己的答案和看法。

第三，刻意练习。如果你有伙伴，可以相互提问。如果没有，也可以自问自答。

## 5、注重表达逻辑 ##

如果上一点是说能正确回答问题，这点则是能更好的回答问题。一个逻辑清晰的回答，能让面试官感受到，面前的小伙子不仅熟悉这个问题，还有比较优秀的语言能力和逻辑能力。

比如，常见问题：说说 var, let/const 的区别。大部分人都能罗列出它们的区别和注意点，但这很难给面试官留下什么印象。但是，如果你添加几句联系性的语句，效果就不一样了：

var是 ES5 之前的变量声明方式，存在很多容易产生误解的缺陷，具体体现在：……（罗列 var 的一些不足）, 针对这些问题，ES6 提出了 let/const 的变量声明方式，它们具有一些新的特性：……（罗列 let/const 特性）。

这几句简单的连接，让整个回答从一个简单的要点堆砌变成关系密切的表达。

然而，这并非易事。前提是必须要有较好的逻辑思维，既然选择这行，相信各位这点没有问题。

在学习每一个技术点的时候，都要注意一些问题：是什么？为了解决什么问题？如何实现的，有没有更深的原理？如何使用？使用的时候需要注意什么？有哪些应用的场景？有什么不足？这些不足能否避免？ 这些问题能让你更加全面地体会各个问题的联系。

需要指出一点，写博客对这方面有很大的帮助。

即使你没有写过博客，建议在备考的时候，使用思维导图等工具，并且经常整理已学知识的联系。

可能有人跟我一样面试会紧张，一紧张就容易脑子空白。我的方法是，把面试官假想成是来请教我问题的同学，不得不说这种效果真的很好。（面试官表示老子懂的比你多了去了hh）

## 6、扬长避短，但尽量争取 ##

对于那些每个应聘者必备的技能，必须要熟悉再熟悉，不要让基础成为自己的短板，切合上一条注重基础。而对于其它技能，深入学习其中的几个，然后想办法引导面试官提问这些方面的问题。

最有效最常见的引导方式是简历。简历信息往往是面试官出题的依据，所以简历一定不要写自己没接触过的技术，即使招聘信息有这项要求，如果面试官提问简历上的内容，发现你根本不会，那么，你简历上的所有技能点，面试官都会打个问号。对于你有深入学习的方面，可以单点列出，比如，熟悉 JavaScript，能熟练操作 DOM，尽管 JavaScript 包含了 DOM，但你依然可以强调一下。

面试官往往会根据应聘者的回答来决定下一个问题，我们也可以利用这点，在面试回答中引导。在回答开放性问题时，这种方法十分有效，但切记点到为止，不要过分深入导致偏题。比如，面试官提问：对一个已有的网站，你哪些的性能优化方案？ 当你阐述性能改进提议之后，末了，加一句“除了性能，一个网站考虑还可以从安全性和 SEO 这些方面进行优化”。

如果面试官 Web 安全和 SEO 感兴趣，那他就中套了。

如果面试官抛出了一个你稍有了解但不熟悉的问题。不要慌，先思考片刻。整合自己知道的，做一些合理的推测。然后在回答的时候，先表明自己不是很熟悉，但在学习其他知识的时候有接触过，简单说说自己的了解和推断。不少面试官会故意提出一些稍微超出面试者能力的问题，考量面试者的临场能力和迁移学习能力。

万一，明确面试官问题后，发现自己丝毫不会，直接表明，把面试官的注意力转移到下一道题，停留的时候长了，可能会放大这道题的影响。从容应对接下来的题目，面试官不会因为一两道题淘汰一个各方面都很优秀的面试者。

## 7、后话 ##

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。

其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

[MDN]: https://developer.mozilla.org/zh-CN/
[W3school]: https://www.w3school.com.cn/index.html
[JavaScript]: https://zh.javascript.info/
[PDF]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DhCLQP3CQ
[ac0b1c2376da47d727e0dc8a77e76478.png]: /images/20221120/f152af7ee0814e66b1ea9bba57138ea5.png
[b871b45fb2e6d5442144c863cbcff965.png]: /images/20221120/8a14d9fee60841bb975db98b7fac4c0c.png
[f5c18f4b2878302f1f53a8c393e7eb0d.png]: https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png
[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DCNNxKtKV