之前在《前端菜鸟的阿里实习百日之旅》一文中，我的好友「承和」分享了一些作为前端开发实习生的感悟，文章发出后，很多人在后台询问能不能谈谈前端的学习路径，以及作为一个萌新如何拿到大厂的前端 offer。的确，秋招已过去大半，下一波待就业的应届生们也可以开始考虑实习和春招了，为此，本文以 Q&A 形式邀请了他来讲述他是如何一步步 get 大厂的前端 offer，希望他的成长经历可以为正在准备的人带来一些启发。

Q：初来乍到，先做个简单的自我介绍吧

「01 二进制」的读者，你们好，我是承和，目前是一名计算机专业的研三学生，就读于杭州电子科技大学，本科就读于马爸爸的母校，也就是杭州师范大学。在此次秋招中，很幸运的拿到了阿里，字节，拼多多等公司的 Offer，希望我的成长经历能对你们有所启发。

Q：能不能简单说说你这些年的前端学习经历呢？

说起前端，其实我最早接触的是 iOS 客户端开发。在我大二的时候，苹果发布了最新的开发语言 Swift，恰巧在当时，我在编程上的启蒙老师所在的实验室正在招新，听说加入还会分配 MacBook，于是我马上联系了他。就这样我顺理成章的白嫖到了一台 MacBook Air 笔记本，而当时分配到的任务是开发一款 App，也正是从这个任务开始，我走上了软件开发这条不归路。

后来实验室为了减少开发和维护的成本，导师让我学习有关跨平台应用开发技术，也正是从那时起，我逐渐接触到前端开发。在学习过程中，我发现，相对于客户端，前端开发有更广的发展空间，再加上当时客户端的就业形势是**“49 年入国军”**，因此，毅然决然地选择了前端开发。

再后来，读研期间，学习了点深度学习的相关知识，发现这玩意儿极其烧脑，加上国内学术圈又相当浮躁，多数研究生基本都是为了发论文而发论文，很少有能实际落地应用到工程之中的。加之现在算法岗 hc 非常少，大厂的算法岗几乎是神仙打架，想着肯定是没办法靠算法吃饭了，所以又重新投入到了前端的怀抱中，从 0 开始学起，好好沉淀自己的前端技术。

Q：你这也算是有了几年开发经验的老鸟了，要不简单谈谈你是如何学习前端技术的？

我个人认为，学习编程就和练武一样，学习任何一门技术都是修炼内功和学习招式的过程。内功指的就是基础，就前端领域而言，也就是我们常说的前端三板斧：HTML、CSS 和 JS。我们可以根据网上较流行的知识图谱或者一个面试宝典，进行初步的学习。若想要深刻了解的话，便要通过阅读大量相关的专业书籍来加强理解（后面我也会推荐一些，此处没有广告，可放心食用）。

招式指的便是各种前端框架，这些框架帮助我们封装了底层对于 dom 的操作等，使我们能够专注于业务代码的编写。现如今国内 Vue 和 React 大行其道，但是作为 JS 革命性的框架之一，jQuery 我们自然不能忘记，该框架非常适合前端入门者进行学习。

对于框架的学习大致可以分为以下 3 个步骤 👇：

第一步，学会**招式的使用，**你要学会怎么用它，知道这个框架究竟解决了哪些问题，这些资料最好的获取方式便是官网，例如 React 官网，便清楚的说明了 React 的用途，在开发中大多数遇到的问题也能在 React 官网上找到解决方法。

第二步便是用框架做一个项目，在编写项目的过程中，你会遇到很多"稀奇古怪"的问题，通过解决这些问题，可以加深你对框架的理解。

第三步要做到知其然知其所以然，在熟练掌握框架的使用后，去学习它的源码，去看一些源码解析或者大佬的直播课，最好是自己手动实现一个类似于 React 的 diff 算法。

Q：在学习的过程中，有什么需要注意的呢？

在学习过程中你会接触到非常多的知识点，难免会产生焦虑，这时候要做的就是定义一个边界，做到对另一个知识点的探索适可而止。

例如，在利用 React 脚手架的开发过程当中，我们会接触到 Webpack，我们可以先用脚手架中 Webpack 默认配置来进行项目开发，去了解 Webpack 的功能和大致打包流程，来做到对 Webpack 的整体认识，在后续进行项目优化时，可以尝试对默认配置进行修改，通过熟读 Webpack 官网，了解针对 Webpack，我们有哪些优化手段，并且付诸于实践，在工程当中加深自己对于框架和工具的理解。

上述是如何学习一个前端框架的简单例子。我们有时候会感叹，这么多的知识点，我们如何来进行学习，这也是国内技术面试的现状：面试造火箭，工作拧螺丝。在准备面试的过程当中，我们可以通过一个面试宝典或知识点的总结来系统的学习前端，随后其余教程和专业书籍加深你对知识点的理解，根据人类的遗忘周期，大概会在第二至第三天会忘掉大部分第一天学习的知识，因此，通过反复学习，反复理解，达到内功和招式的相互影响，最终修炼成功！

Q：作为一个 Offer 收割机，关于前端面试你有什么想说的呢？

正如上文提到的，国内现在的技术面试基本是“面试造火箭，工作拧螺丝“，在准备面试过程当中，要求我们既有较广的知识面，又需要在一个领域有比较深入地研究。比如面试官会非常感兴趣问 React 源码相关的一些问题，这可能在我们的工作过程当中基本接触不到，因为一般的大厂都有自己的组件库和针对自己的业务，会对市面上较流行的脚手架工具都做一层封装，大部分的开发人员都属于”搬砖“的角色，也就是完成特定的任务即可。所以，这时候就会用人问了，明明是工作中不常用的知识点，为什么面试官就喜欢问呢？

个人看来，问源码能考察一位同学对该项技术是否有思考和热情，因为框架的使用基本每一个人都会，然而对于源码的阅读和理解，有助于更深层次的去理解框架，在开发中遇到一些问题时，也能够更加快速的去定位问题，有相应的方法去解决。将来在做业务的技术选型时，因为你知道各个框架的利弊，所以能够更加快速的做出决策和进行开发。这也就是面试官喜欢考察源码的原因，在原有的广度基础上，来查看我们的知识点深度究竟在哪里。

Q：简单分享一下你的面经吧

面试一般分为三个部分，自我介绍，面试官提问，和同学提问。其中第一部分和第三部分我们需要进行详细的准备，自我介绍准备一分钟左右时长即可，对于应届生来说，可能没有太多的项目经验，我们可以介绍下自己学习前端的过程和相对比较擅长的技术栈，有目的性的来引导面试官问对应的问题。面试官基本也会挑你简历上写的知识点来问，这时候就要求我们对简历上的每一个知识点都要做到胸有成竹，在写该知识点的时候，可以模拟下面试官可能会问些什么问题，对知识点进行总结和有逻辑性的表达，在回答过程当中也可以合理的“埋坑”，引导面试官往自己擅长的知识点上问。

举一个较简单的例子，浏览器中输入 URL 究竟发生了什么，你回答了相关步骤中有一步为浏览器根据返回的状态码进行判断再进行后续操作。那么接下来面试官可能会问你你了解到的状态码有哪些。你经过准备也知道这个知识点，便能自信的回答。在最后一个环节反向提问的过程中，可以针对职位相对应的技术栈和相关的业务，或者此次面试过程中有什么不足点，有什么建议进行提问，有时高质量的提问也能提升面试官的印象分。在面试后我们要进行及时的复盘和总结，例如每一个提问知识点的及时记录，对于在此次面试过程中发挥不好的地方，及时想出对应的方法总结，有利于在下次面试中更充分的发挥自己的实力。

Q：要不推荐一些资料呗？

下面是我个人推荐的较好的学习资料，既有书籍也有博客等。

  • HTML：基本概念和常用标签的掌握，h5 新标签和新特性。html 语义化等。
  • CSS：《CSS 世界》(从流的概念来讲解) ,flex 布局(阮一峰教程)。
  • JS:《JavaScript 高级程序设计第 4 版》(红宝书反复看) 《你不知道的 JS》《javascript 语言精髓与编程实践》
  • ES6:菜鸟教程 ES6(大致浏览新特性) 《阮一峰 ES6 标准入门》(api 细节查看)
  • Typescript:ts 官网，一文学会 TypeScript 的 82% 常用知识点（上）
  • Vuejs:vue 官网(建议花 2-3 天完完整整的看下来)，  《剖析 vuejs 运行机制》(染陌大佬编写)     逐行分析 vue 源码
  • React:react 官网，《深入浅出 react 技术栈》，React 技术揭秘
  • Webpack:webpack 官网，《深入浅出 webpack》
  • Node:nodejs 菜鸟教程(快速上手),《深入浅出 nodejs》(掌握 node 的事件循环和垃圾回收算法，有精力可以研究 v8 源码)。
  • 计算机网络：《图解 HTTP》(反复看)，《计算机网络》(谢希仁著)
  • 数据结构：《算法》(书名就叫算法，虽然是 java 写的，但也能看得懂)。
  • 设计模式：《javascript 设计模式与开发实践》
  • 知识点总结和面试宝典：个人秋招经验总结(前端方向)  前端面试与进阶指南

子弈大佬的面经: 个人前端资源汇集（持续更新） 面试分享：两年工作经验成功面试阿里 P6 总结

最后

这便是简单的一些前端学习和面试经验的分享，希望对你的前端学习和面试都有一定的帮助。欢迎各位读者留言讨论，也欢迎添加我的微信，进一步的交流和分享前端经验，预祝小伙伴们都有自己满意的 offer！