一个声称南方985普通学生，前端学习10个月，秋招斩获字节跳动offer的分享！

快来打我* 2022-12-23 09:50 104阅读 0赞

0、 我的秋招经历

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

说起我的秋招，一个词，就是“逆袭”。一开始，华为笔试没过，三七互娱笔试没过被捞起来后一面又挂，信心受挫。中间没有再继续投递，而是沉下心准备，身边同学陆续拿到offer，也挺纠结。在十月底，赶在秋招的尾巴，投了四五家网申还没截止的公司，没想到，面试一路过，最后成功上岸字节，结束秋招。

准备面试和参加面试的过程中，总结了一些个人经验，梳理一下，希望对准备面试的人有些帮助，尤其是没有面试经历的学生。这里不谈及具体的面试题目，而是一些通用的方法论。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70_pic_center]  
此文纯个人想法，希望读者保持自己的判断。

1、抛开面试，系统学习

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

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

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

MDN文档：

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

HTML 和 CSS：

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

JavaScript

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

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

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

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70_pic_center 1]

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

官方文档

一些框架和工具的学习，一定要充分利用官方文档，一般都会有快速上手的教程。因为这些版本更新很快，有些书籍跟文章的部分内容已经不适用了。建议从官方文档入手，不懂的地方 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、精准出击，逐个击破面试题考点

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

网上有很多面试题的收集文章，在掘金上就能找到，比如10 个 GitHub 上超火的前端面试项目，打造自己的加薪宝库。另外，这篇文章2020年前端面试复习必读文章【超三百篇文章/赠复习导图】罗列了一些重要考点的好文，也是很好的备面资料。

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

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

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

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

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

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

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

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

5、注重表达逻辑

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/8deeacead8d74afa9727159aa3dc49c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201124144741703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201124144756682.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201124144814963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw,size_16,color_FFFFFF,t_70#pic_center