为了更好的阅读效果，推荐使用在线阅读的方式。
这是一份自己总结的关于准备前端面试的一个复习汇总项目，项目不定时更新。
这不仅仅是一份用于求职面试的攻略，也是一份前端er用来检视自己，实现突破的宝典。 希望通过这个指南，大家可以打通自己的任督二脉，在前端的路上更进一步。
本仓库大量采用图的形式来传达知识，所谓一图胜千言，希望通过这种图文并茂的表达方式 让你更容易记住一些抽象，难以理解的概念，《图解前端》是我给它的副标题。
所有的内容按照主题进行分类，大家可以根据自己需要随意传送, enjoy🍻🍻🍻
我的目标是做宇宙最强的前端面试指南。
WIP： 🚧 项目还在施工中哦，请戴好头盔！
⚠️
面试是一件很主观很难的事情。 面试不通过不代表你就不合格，同样地即使面试通过也不意味着你就合格了。 作为候选人，通常会给你45分钟的时间来让你展示自己的技能。 作为一名面试官，同样难以在这么短的时间里评估这个人是否适合这项工作。 对于面试来说，没有任何一种标准能够适合所有人，面试官通常会覆盖某一个领域，但除此之外，他们会自行决定应该问哪些问题。
准备面试，我们应该准备一些真正能够体现面试人水平的题目，比如一些编程题，设计题，框架选型等，不要过分
拘泥于特别小的问题，尤其是API的问题，比如==的隐式转化，我个人很反感这种问题。
相反面试官应该更关注面试者是否了解前端开发的基本原理，而不是依赖更高级别的抽象。
比如你是否可以在不依赖库的情况下完成开发任务（当然实际情况很少这样），这样你才能彻底理解库在背后都做了什么。
我是一个对技术充满兴趣的程序员, 擅长前端工程化，前端性能优化，前端标准化等。
做过.net， 搞过Java，现在是一名前端工程师。拥有两年前端面试官的经验， 对于面试的一些技术问题和套路有一定的认识和积累。
除了我的本职工作外，我会在开源社区进行一些输出和分享，比较受欢迎的有leetcode题解 和我的第一本小书
如果大家需要内推的可以找我，我这里有包括阿里，腾讯，头条，网易等很多公司的朋友。 有需要可以直接群里联系我，或者发送到我的个人邮箱 [[email protected]]。
首先第一个主题是面试的流程， 面试流程从时间先后的顺序可以划分为：
网投/内推，线上评估, 电话面试/视频面试, 现场面试。这四个流程在一次面试中不一定都会有。
- 网投/内推
网投指的是在网络上投递简历，这样选择面会很大。 内推指的是找内部人员推荐， 内推不仅有着快速地反馈流程，而且在有时候岗位刚刚空缺出来，岗位还没有 JD 的时候就可以内推。 因此建议大家尽量内推。
- 线上评估
线上评估指的是在线做题，很多大公司以及外企都会设置这部分，尤其是对于应届生而言。
这部分考察候选人的基本算法能力，解题思路
- 电话面试/视频面试
这部分主要考察候选人的算法能力，做题速度，沟通交流技巧。
- 现场面试
这部分主要考察候选人的白板算法，系统设计，应变能力，价值观等。
上面介绍了面试的基本流程以及考察方向，接下来我们总结一下我们通常挂的原因有哪些? 为此我们需要注意什么？有没有什么小技巧？ 我在这里进行了比较详细的总结
在面试之前大家应该都对自己有了一个定位，自己要面试的层级是什么样的， 需要什么的技能，有什么要求。
Job Model 是 一个很重要的参考标准。 当然每个公司的Job Model都会不太一样， 大家可以根据自己心仪的公司的Job Model作为参考，自检一下。
比如我想要面试的是P7的岗位，那么P7的Job Model是什么呢？我可能需要提前了解一下。 一般来说P7的岗位要求会有：
- 基础扎实。j/计算机网络/设计模式/正则/安全等，并且要深入了解各项技术的原理和设计，而不只是使用。
- 经验丰富。熟悉业内不同技术方案以及优缺点，并且能选择最切合当前业务的方案。
- 技术驱动。探索新技术，将新技术带入团队，并赋能业务。
- 软技能。协同能力强，带领团队或者跨团队完成目标的能力。 ...
大家可以根据自己的期望层级，以及心仪公司的Job Model进行自测。
投递简历是面试的第一步，很多时候我们第一步都跨不过去，排除个别岗位的硬性要求，其实很多时候 是自己的简历写的不好，不能突出自己的优势，有时候甚至给自己减分。我们来看下简历该怎么写吧。
自我介绍是面试的第一个环节，如果表现良好的话不仅会给面试官留下好印象，有利于之后的面试过程， 而且流畅的自我介绍也可以给自己增加信心，让自己发挥地更好。
甚至有人说自我介绍决定了面试的 80%，可见自我介绍是一个很重要的环节。
自我介绍最好不是简历的复述，这样会给人不太好的感觉。但是即使是复述，如果 做到熟练和清晰也是不错的， 因为很多面试官在面试之前根本没有看你的简历。
草稿
算法分为三部分:
-
第一部分是 leetcode 上的题目。
-
第二部分是手写题目，实现一个小功能。比如实现 bind, curry 等
-
第三部分是 leetcode 题目变种
本仓库只列举后两个部分，对于第一部分可以去我的另一个仓库 - leetcode 题解 查看
另外对于不同的阶段，我们应该采取不同的刷题策略。
- 初级阶段
看一些基础内容，比如数据结构和算法的基本知识，看一些 JS 语言基础的一些东西。
如果需要刷题的话，一定要从简单开始。
- 中级
按照分类刷题，一个个分类突破，掌握同一类别的题目的基本解题思路和套路。
- 高级
总结题目，做到融汇贯通，一题多解，多题同解。
- 面试前
刷题找回感觉，如果能找到你想去的公司的真题进行练习就更好了，因此我也会考虑将题目按照公司进行分类。
ℹ️ 以下这些题目都是自己经历或者从网上整理下来的, 之后还会继续同步更新。
对于编程题，可能会让你白板写，也可能让你用Online Editor。 因此我的建议，是掌握白板写，熟练至少一种Online Editor， 这样可以在适当时候要求面试官让你用你熟悉的Online Editor书写。 比较有名的Online Editor有JSBin , CodePen, StackBlitz 等，我个人比较推荐StackBlitz
Tips: 如果不是白板写，一定要注意调试，即使没有做出来，但是良好的调试习惯和技能也能加分。
- 大数相加
- 手写 bind
- 实现加法
- 实现 curry
- 实现 compose
- 剪枝
- 循环有序列表的查找
- 实现深拷贝
- 实现继承
- 拍平数组
- 实现 getUrlParams
- 用 reduce 实现 map
- 用栈实现队列
- 判断是否是完全二叉树
- 实现 lensProp
- 判断链表是否成环
- 最长公共子序列
- 最长公共子串
- 实现千分位展示
- 无序不相等数组中，选取 N 个数，使其和为 M
- 实现简化的 Promise
- 实现快排
- 周期执行某个函数 n 次
- 字符串反转
- 函数节流
- 数组去重
- 实现 Math.sqrt
- 判断一个字符串是否另一个字符串的子序列
- 实现一个极简的模板引擎
- 实现一个极简的数据响应式
- 千分位转数字
- 将数字转化为中文(数字是 10 万以内)
- 已知数据格式，实现一个函数 fn 找出链条中所有的父级 id
- 获取页面所有的tagname
我并不擅长，欢迎大佬补充。
这类题目有时候是给一个情景，有时候是直接让你实现一个轮子，答案也往往是开放式的。 需要你对组件和代码设计有一定的基础。这部分主要考察候选人综合实力，思维开放性， 思维严密性，做事的方式等。
- 大量数据滚动加载
- 如何设计一个实时检查更新的功能
- 设计一个新闻列表，用户已经看过的新闻，在标题后面增加“已阅读”文字
- 实现一个轮播图组件
- 实现一个模态框组件（TODO）
- 实现一个下拉框组件（TODO）
- 实现一个标签页组件（TODO）
掌握常见的设计模式是“术”， 掌握设计模式的原则才是“道”， 只有在“术”上下过功夫，才能明白“道”的价值。
对于常见的设计模式能够说出适用场景，如果能够结合实际项目经验就更好了。常见的有单例模式，工厂模式，代理模式，观察者模式，策略模式，模板方法模式等。
流行的框架当然也是兵家必争之地，如果你能够完全了解大型知名开源框架的代码和架构实现，那绝对是一个加分项。
框架是为了解决特定问题才出现的，脱离实际业务谈框架选型以及优劣都是耍流氓。我们需要了解到各个框架在 什么情况下产生的，他们是为了解决什么问题，适合的场景是什么样的，有什么不足等。只有对这些 都非常熟悉，才能够在业务中作出合理的取舍，才能赢得面试官的认可。
React考察的点就那么几点，从简单的声明周期，特定API的使用。 到SetState的原理， 虚拟DOM，以及DOM diff算法等。 这部分需要大家对React有系统性认识。
这部分其实可以参考我之前开的一个仓库从零开始开发一个 React
我后期会陆续增加一些对于React常见问题的汇总，大家保持关注即可。
我用 20 行代码左右实现了一个迷你版本的 redux，帮助自己理解 redux 的核心**，这里是原文。
相信你可以自己实现出一个 redux，那么你会对 redux 的本质有更深入的理解，这个时候再去学习 redux 中间件机制等高级内容才会得心应手。
vue 部分我建议等到 vue 更新 3.0 之后再去研究 ta。
vuex 部分我建议等到 vue 更新 3.0 之后再去研究 ta。
JavaScript 是前端基础中的基础了, 这里的面试题目层出不穷，但是核心考点还是那几个，比较高端的基本都是词法作用域, EC, 闭包， 高阶函数.
在学习接下来的东西之前，建议大家先打好基础，这里只推荐两本书，一本是《You-Dont-Know-JS》，另一本是《JavaScript: The Good Parts》。
我非常不建议你没有系统学习JS之前就去刷题目，这是毫无意义的，根本无法从根本上理解。 之后对前端技能的考察会越来越严格。大家系统性学习之后，推荐过来看一下我这里总结的东西， 最后去网上找一些经典的题目，通过这些题目来检查自己，而不是一开始就去网上找题目做。
这里列举了几个我觉得比较有代表且比较有意思的主题：
未加入到 TODO
-
事件模型
-
浏览器安全策略
-
事件循环
-
BOM API
小程序的特点：
- 即插即用，
- 拥有 native 和跨端（不同操作系统）的能力
- 性能比 H5 好
面试的时候多会问小程序的多线程架构，以及多个 webview 是如何和 JS 线程通信的，JS 线程又是如何和 native 通信的。
还没开始整理
如果你做过混合式开发的话，原生通信一定是不能绕过的点。
网络这部分虽然不需要我们像网络工程师一样熟悉很多底层细节，
但是我们至少需要有一个高层次的抽象的思维来看待网络这个世界，
从而帮助我们更好地理解它，并且利用它去解决一些问题，典型的就是性能优化，
其实线上定位问题等有时候也需要你懂一点网络知识。
作为面试，可能需要你准备得更为深入一点。
对于网络这部分，最重要的是要有一个大的概念，下面也会介绍。
还没开始整理
如果你要做全栈或者后端，那么 node 是一个相对平滑的选择
- node 基础 API(TODO)
- node 集群(TODO)
- node 监控(TODO)
- node 底层架构和原理(TODO)
- node 和 deno 的区别(TODO)
- express 和 koa 等 web 框架(TODO)
随着前端项目越来越复杂，我们需要组织的模块数量增加，包管理慢慢浮出水面， 大家都开始讨论这个东西。 很多时候，一个项目的业务代码还不到依赖项的1%。
我们拿三个比较经典的包管理工具来讲解一下他们试图解决的问题，以及分别的优缺点， 按照时间线来说他们分别是npm,yarn, tink。
性能优化是在面试中被问到的最多的题目了，这部分需要候选人有足够的深度和广度才能回答的比较全面，也是 很容易体现候选人实力的一个点了。
这部分可以参考我之前写的文章
常见的编程范式有函数式编程、面向对象编程、响应式编程等。
在面向对象编程的世界，程序是一系列相互作用（方法）的对象，而在函数式编程的世界，程序会是一个无状态的函数组合序列。 在响应式变成的世界里，程序就是流的组合和操作。
不同的编程范式有着不同的适用场景，因此了解各种编程范式是很有必要的。
还没开始整理
TODO
这个是我之前写的函数式编程系列教程
TODO
状态管理这个东西在React和Vue这种视图框架大规模出现之后才出现的东西， 因此React或者Vue只是解决了状态到视图的映射关系，没有解决数据的产生和维护问题， 因此状态管理框架应运而生，比较著名的有redux， mobx，vuex等。
- 状态管理的本质是什么？我们为什么需要它 (TODO)
- Redux (TODO)
- Mobx (TODO)
技术面试关心的一方面是你的技术基础，包括深度广度，编码能力，另一方面关注你的经验，即你做过的项目。
关于这部分要突出项目的难点，核心问题，如果没有特别的难点，你应该问下自己你对项目做过的思考，有什么优化点和不足， 包括团队和自身。
- 你的项目难点是什么
- 做过的项目中技术架构是什么样的，可以优化么 (TODO)
还没开始整理
xss, csrf 算是比较常见的安全问题了。 如果岗位对 node 有要求，那么安全问题肯定会更多，因此这部分需要更加关注。
SEO 一直是一个非常重要的话题，尤其是依赖搜索引擎排名的系统和网站。
虽然是一个很老的领域了，但是搜索引擎优化是在客户端渲染流行之后，又重新被捡起来，开始重视的一个东西。
在工作中，我们时不时会做一些自动化或者批处理，这个时候掌握 shell 一种相对直接完成任务的方式。 shell 功能强大且移植性好，尤其在运维领域被广泛使用。
作为程序员，掌握 shell 是一种进阶。
其实网页早起都是 SSR，只不过为了提高性能和用户体验，大家开始转向 SPA，SPA 开始流行之后带来了两个问题：
-
SEO 不友好
-
首次渲染时间长，导致诸如白屏时间长等问题
为了解决这两个问题，大家开始考虑使用 SSR + CSR 的方式。 其中也踩了无数的坑，到现在 SSR 相对而言已经比较成熟了。
TS 是 JS 的超集，提供了很多 JS 没有的特性，尤其是 ES6 之前。ES6+的很多东西也是借鉴了 TS。
TS 对于构建大型系统有着得天独厚的优势，丰富的类型签名就是天生的最好的文档，因此它会及时更新，不存在代码和文档不一致的情况。 使用接口定义可以实现很好的协同，也可以避免一些潜在的 bug。
总之 TS 是一个非常值得学习的强类型语言。
还没开始整理
- 垃圾回收器(TODO)
- 预测优化(TODO)
- shapes 和 inline cache(TODO)
标准这个东西真的很重要，非常遗憾的是国内没有什么知名标准化的组织，都是在国外。
标准化能给我们带来什么？ 那就太多了，如果没有标准化，我们的世界不能想象会乱成什么样。
想象一下如果没有USB TypeC等这些规范，我们会多么不方便，更不要说别的了。
前端的标准化组织化就两个，一个是TC39, 一个是W3C，关注好这两个组织，
对于你理解大方向很关键。 下面是官方的Github仓库：
重点关注一些标准化组织的信息和社区的讨论。
这里再介绍一个justjavac(迷渡)创建的中文版的介绍最新的 ECMAScript/JavaScript 规范，以及 TC39 的提案进度 ，这里可以了解到一些TC39，以及ES最新的一些资讯信息。
我在模块化和组件化 这篇文章 讲解了模块化的一部分基础知识，在这里我还会讲解一些大家对模块化的误区，以及一些经典问题, eg: AMD，cjs,umd,esm 区别问题
待整理
WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案。
工作流是一个偏工程的话题，这部分主要考察候选人工程能力和意识。 工作流指的是日常开发中的各个环节的组合，下面我们一一讲解。
可以参考我之前开的一个仓库从零开始开发一个 Webpack
当然了解了webpack的基本原理还不够，面试中还会问一些工程性的问题，比如：
- 如何用webpack管理应用的环境相关配置 （TODO）
- 如何用webpack做一些基础的性能优化（TODO）
- 如何用webpack的配置项如何管理（TODO）
TODO
linter 是为了帮我我们找出 bug 而存在的，不要过分高估它的功能，用它来代替 code review 或者 formatter 的工作。
格式化应该是自动的，不应该是手动的。 每个团队的格式化标准可能都不一样，不要 让人去适应这些，没有什么意义，而是交给工具去做。
在npm出现之前，做任务管理的方式主要是自己处理或者记住第三方库，比如grunt，但是npm出现之后，
大家发现其实npm script + 构建工具就可以解决前端绝大多数问题了。包括VSCODE中的任务管理，其实
都有和npm有着很好的集成。
我们这里主要讲讲如何通过npm script来做前端的任务管理，从而打造高效的前端工作流程。
这里的版本管理指的是发布过程的版本管理，即我不通过回滚代码的情况，也可以做软件版本管理。
Git，SVN 只是代码管理的工具，不等同于代码管理。
项目代码需要有一个好的架构，需要高内聚低耦合，把各功能模块尽可能的分解成独立的， 在做真正的代码管路之前，我们要思考几个问题：
- 我们为什么要做代码管理 ？不做代码管理可以么？
- 做代码管理，主要的内容是什么？
最后我们再去研究怎么去做，这才是一个本应该有的流程。 不要一上来就是分支管理，git 操作，git workflow 啥的，会被绕进去， 到头来用工具解决了什么问题都不知道。
参考：
- building QuickBooks: How Intuit Manages 10 Million Lines of Code
- Why Google Stores Billions of Lines of Code in a Single Repository
- Git 速学
待整理
- 测试的原则和基本方式
- 测试的类型
- 测试框架
- 测试工作流
- BFF
- GraphQL
跨端开发是一种权衡，一种开发效率和极致性能的权衡。 就好像虚拟 DOM 一样，虚拟 DOM 其实也是一种权衡，也是开发效率，维护性和极致性能之间的权衡。 如果你足够细心你会发现软件工程有很多这样的权衡。
Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作。在全世界，Flutter 正在被越来越多的开发者和组织使用，并且 Flutter 是完全免费、开源的。
使用 JavaScript 和 React 编写原生移动应用
正则表达式是一组由字母和符号组成的特殊文本, 它可以用来从文本中找出满足你想要的格式的句子.
正则表达式其实就是在执行搜索时的格式，这部分内容比较枯燥和难懂，需要多加练习才能掌握。
这里推荐几个关于正则表达式的，我收藏的一些资源：
当然如果你比较喜欢直接用别人写好的，这里还有一份资料，可能适合你。
如果你学习的差不多了，那么就针对性找几道正则的题目练习一下，你可以去我的《编程题》主题中地正则题目练习一下。
前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。
微前端是一种架构风格，其中众多独立交付的前端应用组合成一个大型整体。
微前端目前已经到了实践阶段，虽然没有特别成熟的社区和解决方案， 但是不得不承认这是一种趋势，就像几年前的数据驱动一样。技术雷达 也阐述了微前端目前所处的历史阶段。
使用微前端，主要有如下好处：
-
由于代码可以独立开发，部署等。因此如果拆分良好的话代码会更少，更容易维护。
-
不同的业务部门合作更加容易，团队更加独立自治。
-
对于遗留系统，我们可以选择微前端的方式进行改造，而不是直接改变遗留系统的内部实现， 相对而言更加稳健。
一个典型的微前端系统大概是这样的：
（图片来自： https://martinfowler.com/articles/micro-frontends.html）
这里后续会系统性列举一些微前端的资料。
还没开始整理 可访问性一直是容易被忽略的一个点，这里我们简单聊一下前端的可访问性。
还没开始整理
面试经常会问一些你最近都在关注什么技术？或者直接就某一个新技术进行提问。 以下是我整理的一些个人认为比较新且有前景的技术：
- AI 人工智能正在改变着我们的生活，前端也不例外
- Severless 使得开发更聚焦
- IOT/AR/VR 带来的交互形式的变化
- 可视化
很多时候用人单位会对《前端工程师》有“后端”，“运维”方面的要求，不过都是浅层次的。 不过大家还是要对这些知识有所了解才行，最起码不能有“这是后端的责任，这是运维的责任”的观念。
当然不排除有的公司需要你多而精，让你一个人打通整个产品线，这个时候你要考虑一下要不要选择这家公司。
用人单位普遍的技能要求有：
- Java 开发基础（TODO）
- Python 开发基础（TODO）
- Go 开发基础（TODO）
- 运维知识（TODO）
- Github 和博客（TODO）
上面的东西选择性掌握即可，这可以说是加分项，一般不会要求这些都掌握的。
声明：
⚠️ 其中P级别的划分是结合自己对题目难度的理解，以及作者本人的陈述定义的。 这部分是很难定义的，但是为了给出大致的边界，我这里还是做了分类。如有不妥，请多多包涵。
- 阿里巴巴
- P5
- P6
- P4
- 今日头条前端面试-2018.03.23
- 记一次字节跳动前端面试，已拿offer
- 字节跳动 前端 三面面经
- 2019 字节跳动春招 web前端面试题 一面
- 字节跳动前端实习一面二面HR面面经
- 头条前端一面
- 记一次今日头条前端面试
- P5
- P6
到了这一步说明技术上没有什么问题了，接下来就是 HR 看你这个人价值观是否符合了。
草稿
模拟面试指的是按照实际的面试流程进行模拟，常见的有测试题目模拟，现场模拟。
测试题目模拟会比较多，大家可以使用OJ平台进行测试，也可以找一些题目自己测试。
现场模拟通常需要一些资深的面试官对你进行考察，你可以找自己的同事或者前辈，也可以花钱
找别人帮忙。 当然如果你不嫌弃，找我进行Mock Interview 也是可以的,
我的个人邮箱 [[email protected]]
这里列举一些测试题目：
- Front-end-Developer-Interview-Questions
- Interview Questions for front-end-Developer
- javascript-questions
- 30 seconds of code
本仓库的所有内容都是本人自己整理的，因此可能有不够完善，优秀甚至错误的地方，大家可以随意提问题。
对于前端的技能图谱，我比较推荐这个网站。 这个网站相对于其他的前端技能图谱，更新地更快一点，其他的技能图谱很多都落伍了。
现在还是初级阶段，需要大家的意见和反馈，为了减少沟通成本，我组建了交流群。大家可以扫码进入
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent