我是怎么写出前端面试图谱的？

未分类

近日，GitHub上出现了一个热门项目InterviewMap，这是一个前端团队共同编写的前端面试项目，附带大量的前端面试知识点，在短短半个月时间内，star数就突破了6K。为此，InfoQ与该前端团队负责人俞诚恺取得了联系，共同合作将其内容整理成电子书，名为《前端面试指南》，关注前端公众号，在菜单栏回复：前端面试指南，就可免费下载。

InfoQ还独家采访了俞诚恺，让他为大家讲述他们团队编写这本《前端面试指南》的历程。以下全文是对采访的整理：

作为程序员，相信大家都有阅读技术文章的习惯吧！我也一样，在二三月份的时候，我发现面试的文章层出不穷，且屡屡能获得不少的关注，但是大部分的面经都是提供出一些面试问题，然后针对某个问题进行解答，其实，这些文章火爆的原因和应试教育一样，开发者背一些题目从而想通过考试。但是一旦题目进行了改动，虽然考的知识点还是一样，可是能做出来的人就少了，究其根本，这些面试文章并没有系统而全面地总结出这些面试题的考点和规律。

既然开发者在这方面需求量这么大，当时我就在想，是不是可以收集一些大厂的面试题，根据面试题提炼出所考的知识点，然后针对知识点进行讲解。这样做不仅能在自己的面试准备中用上，还能帮助到别人梳理知识点，更好的学习。并且我也一直认为输出是一种很好的学习方式，在写这个开源项目的过程中，也弥补了我的知识盲区。

我们团队是如何建立起来的？

最开始的时候，我在GitHub上开源了一个 React 的项目，然后建立了两个四百人左右的微信群。但是随着时间的推移，群内的技术交流慢慢地变少了。和预想中的一样，太大的群缺少管理以后总会慢慢走向死亡的。

因此我萌发了建立一个成员控制在 50人 以下的小群的想法，成员越少越好管理，这样也能保证群的质量。成员基本都是从大群中经过筛选选出的，筛选条件基于我认为的优秀程序员必备的技能：科学上网和较高的英语水平，而且群内禁止潜水，我每隔半个月会清理一次潜水成员。这样筛选之后，群内成员的教育和技术背景得到很大提升，保证了群内的交流质量。

在打算做面试图谱的时候，我在小群内详细说明了我这个想法，得到了群内成员的支持，然后与几位群成员的讨论之后，我们这个团队成立了。

项目进行时

想法是我提出的，团队是我建立的，所以我肯定要在初期起到一个带头作用。在第一期的内容中，大部分的内容都是由我一手编写，然后由团队中的成员审阅是否有错误。在翻译过程中，我主要做校对工作，翻译全是由其他团队成员完成的。

翻译应该是这个项目进行中遇到的最大困难了，毕竟中译英比英译中要难上好几倍。

在翻译的过程中，我们花了很多时间去寻找术语的正确英文翻译，斟酌句子该如何翻译，很多知识点都重复翻译了好几次才通过校对。当然在翻译的过程中，我们也对该如何翻译英文技术文章有了不少的经验，并且内部书写了一篇英文翻译的规范文档，在接下去的翻译工作中应该能提高不少的效率。

在项目初期，团队成员从网上和身边朋友中收集了不少大厂的面试题，毕竟大厂的面试题质量要高出其他题目不少。然后将面试题分门别类，提炼出每个面试题中所涉及的知识点，最后从中筛选出了高频知识点作为第一版的内容提纲。

在书写内容的过程中，每个知识点从来没有粘贴复制过别人的内容，都是先写出自己的理解，然后查阅 MDN 或者业内大牛的博客查看是否有出错或者遗漏的内容，并且实践每一份代码保证正确性，最后由团队成员审阅一遍内容，没有问题才算完成一个知识点。这样的一个过程，虽然不能说保证内容百分百的正确，但是可以说出错的内容已经降低到最少了。

项目开源后，有些读者反馈部分知识点内容没有更加深入进去。这个问题在书写的过程就有考虑到，但是基于时间和自身水平的综合考虑，没有把握写清楚的内容都没有写进第一版中。当然这会在后期完善起来，争取大部分的知识点都能做到从基础到深入细致的讲解。

框架内容中为何少了 Angular？

从时间角度讲，虽然从萌发想法到第一版本的开源已经有近半年的时间，但是因为大家都是有工作的人，只有业余时间才能书写内容。在这个有限的时间中，我们比较了三大框架的热度、技术问答及相关文章热度，先选取了相对热门的 Vue 和 React 来讲解。

从技术角度讲，其实三大框架底层技术实现的原理都是相通的。我们的知识点也是尽量从底层讲起，三大框架除了 API 的区别，其实只要能熟练使用其中一个框架，上手其他框架的难度都不会很高。

至于会不会完善这部分的内容，主要还是看读者的反馈。如果读者对这方面需求大的话，还是会去完善这部分的内容。当然我们不会为了完善而去形式上的完善，假如要做，肯定会保质保量的做好。不会复制粘贴网上的内容糊弄读者，会根据常考点、难点、易错点、源码写出高质量的知识点。

掌握好基础是面试必备

面试是一次面试者给用人方展示个人技术实力的一次机会，但前提是面试者有实力。

面试图谱虽然提供了不少的知识点，但对于初学者而言，建议能在看完图谱的同时，能系统的多阅读几本经典书，做点项目提高自己，这样才能提高成功率。而对于非初学者来说，图谱应该能让你更好的准备面试，但是平时的积累也是必不可少的。

在学习的过程中，一定要先打好自己的基础，切勿好高骛远，须知基础才是未来发展的根基。在学好基础的同时，也要学习英语，因为英语作为一门全球通用语言，对于开发者的作用是莫大的。

在公司业务中，每一次开发新功能都应该仔细阅读需求文档后再开工，避免需求的不当理解造成返工。同时也要记录在开发中遇到的坑，对于日后是笔不少的财富，因为它能避免你的再次踩坑，也能在以后的面试中有料可说。

在面试前，要先写好一份不错的简历，在简历中尽量多展示个人的闪光点，而不是流水账式的描述个人的技能，因为这样的简历 HR 每天都能看到很多。简历务必保证真实，虚假的简历很容易被识破，浪费双方时间。

如果有公司邀约面试，应该先了解下对方公司的业务，可以在天眼查上查询下公司信息，简单的了解下对方公司。并且提前准备好一些回答，在面试中尽量的展示出来。

每次面试完，都应该记录下本次面试涉及到的问题，便于复盘，找出薄弱点加强，以便下次更好的参加面试。

关于未来

接下来，我打算继续完善前端的内容，争取在明年跳槽季前更新完大部分的前端内容。目前已经规划好了第二版的内容，预计将于九月份更新完毕，分别为以下内容：

• 新增 CSS 内容。这部分篇幅应该不大，毕竟在面试中 CSS 考的不多。

• 新增 Webpack 内容。这部分内容将会包括插件原理，Webpack 与其他类似工具的区别，如何优化打包速度，打包原理，Babel 原理等。

• 新增小程序相关内容。这部分内容将会包括日常使用中的坑点，如何规划组件以及类似 MpVue 框架的实现原理等。

• 完善框架的内容。这部分内容将会新增 Vue 全家桶的源码分析，包括 Vue 的响应式原理，模板编译原理，事件机制原理，一些常用功能的原理，Vue Router 源码解析，Vuex 源码解析等。

当然在完善前端内容的同时，也会继续新增计算机方面的知识点，包括数据结构及算法方面的完善，操作系统等等，这部分内容会全部由我来编写。除了计算机知识以外，团队内的成员还会书写其他技术方向的内容，比如：系统设计、区块链、运维、后端等等，同时也欢迎更多的人加入团队，一起输出内容。

我们第一期开源的成果可谓是不错的，同时也吸引到了几个新成员的加入。在接下来的第二期内容建设中，我主要负责框架的内容完善和 webpack 内容的编写，其他的内容将由别的团队成员编写了。我们也会一如既往的维持高质量的知识点输出。

同时也欢迎更多的人加入我们的团队参与内容编写、翻译、校对等等，共同维护这个项目，让这个项目变得更好。

作者简介

俞诚恺，GitHub 6.3K stars 项目作者，对 iOS、前端有深入研究。目前正在寻找工作机会，如果你有杭州前端岗位的内推，欢迎和我联系。

作者GitHub：https://github.com/KieSun

作者邮箱：zx597813039@gmail.com

前端面试图谱GitHub：https://github.com/InterviewMap/InterviewMap