js 基础
-
原型链
-
继承的实现
-
数据类型
-
var、const、let 对比
-
es next 最新规范
-
new 的过程
-
this 指向问题
-
bind 实现方式
-
闭包
-
事件循环 【超高频】
-
类型判断
-
手写 Promise
其中，关于 js 语法的资料这里不详细赘述，可以去仓库里面找对应的资料。
关于 事件循环（Event Loop） ，大小厂的问法是不同的。
小厂通常会直接让你口述事件循环的机制，这时候比较标准的回答是说出事件循环分为浏览器的事件循环和 node 事件循环，并且分别说出浏览器中的事件循环机制以及 node 事件循环机制。其中加分点在于可以答出 v8 对于 async / await 的优化以及 node 11 版本前后 node 事件循环机制的区别（其实大多数面试官可能自己都不知道，面试题都是网上找的，你说的有道理能把他唬住基本就没问题了）。具体的回答可以参考 事件循环机制满分答案[2] 。
大厂又是另外一种问法，他通常不会直接让你口述事件循环的原理，会给一道面试题给你做，里面包含了宏任务、微任务的各种坑，这种其实更简单，做多了自然就会了。
另外关于 手写 Promise ，目前我没有被小厂问过这个，但是大厂有被问过几次，分别是让我手写 Promise.finally 以及 Promise.all ，实现思路都非常简单，可以参考一下我用 js 实现的 Promise A+[3] 。
前后端通信
作为一个前端工程师，知道那几个基本的知识点足够让你应付初中级别的面试题，但是如果作为一个程序员的角度出发，还是需要丰富自己在这方面的知识。这里不展开讨论，只说面试题。
-
输入 URL 到页面展示 【超高频】
-
跨域 【超高频】
-
HTTP 各版本 （通常是由缓存带出来的问题）【高频】
-
HTTPS 原理 【高频】
-
TCP 三次握手、四次挥手
-
TCP 和 UDP 区别
-
HTTP 常见状态码
-
鉴权
输入 URL 到页面展示 虽然是一个老生常谈的问题，但是我认为这个问题基本涵盖了整个前端的所有基础知识点，可以回答得非常丰富。建议大家看我的这篇总结：浏览器输入 URL 的全过程[4] ，里面分为了网络篇、解析算法篇、渲染过程篇三个步骤，比较好的讲述了整个过程到底经历了什么。
由这个问题可以带出 缓存、DNS 解析、TCP 连接、HTTP 请求、重排重绘 等等非常多的子问题，如果你掌控的好，甚至可以控制整个面试过程，非常有利于给面试官留下比较好的印象。
跨域 也是另一个非常高频的问题，通常会问你跨域的原因以及解决方案，网上很多答案，这里不做解释。
HTTP 各版本的区别 通常并不会干巴巴的让你回答，在我遇到的所有情况下，通常都是在我答到缓存的时候，面试官会让我停下来解释缓存，这时候回答到一部分 HTTP 各版本中的区别；另外，一部分会在我回答性能优化的时候，答到 HTTP2 的时候会回答。
HTTPS 的问题也是比较简单，问的也通常比较直接，一般会让你直接说原理，然后再让你总结一遍握手过程。偶尔会让你对比一下 HTTP 之间的优缺点。
至于其他问题，可以到仓库里面找答案，也可以网上自己查，都是非常基础的问题。
安全
原本这个问题应该罗列在前后端通信中的，但是这个问题实在是太高频了，几乎每一次面试都有问到，所以我单独罗列出来。
具体的回答可以参考一下我整理的这篇文章：前端安全[5] 。
通常在回答安全问题的时候，需要回答以下几点：
-
有哪些安全问题？
-
解决的办法。
XSS 和 CSRF 是一定要回答上的，剩下的你知道多少答多少，但是别瞎说。一旦你乱说，很容易就会让人觉得你是在背书，没有自己的理解（虽然确实是在背书）。
工程化
这方面通常会从一个项目上入手来说，一般会问一下问题：
-
页面性能优化 【超高频】
-
webpack 性能优化
页面性能优化 可以聊的东西其实挺多的，比如通常会从网络、加载这两个角度出发来解决性能问题。网络角度上有可以聊到前面提到的缓存、CDN、HTTP2以及图片格式上面的优化。从加载上来说的话，又可以聊到 webpack 的打包拆包、tree-shaking、懒加载和异步加载、多线程。除了这两个角度以外，还可以从用户体验的角度上来进行优化，比如说骨架屏、动画、虚拟滚动等。
除了这种常规的角度来说，现在我们开发一个 Web 应用通常都会使用框架，每一款框架一般都会有一些配套的性能优化的手段，比如 React 里面的 shouldComponentUpdate、PureComponent、memo 等优化 diff 算法的手段也需要回答。框架的优化问题通常会在你答完性能优化的问题之后跟着问你。
具体可以看下这两篇：
-
性能优化[6]
-
React 性能优化[7]
至于 webpack，以我目前的面试经历，问的相对比较少，可以有选择的去关心关注。
框架
框架对于目前现代的 Web 应用开发来说，基本就是必备技能。面试的时候，面试官通常会根据你自己简历上写的技术栈来问，对于大小厂而言，问的方式可能也略有不同。对于小厂来说，如果你恰好技术栈和他们相一致，那么他们问的基本和大厂差不多；如果不相符，那就完全看面试官是否了解你当前的技术栈，了解的话大概会问一些，否则基本不问。对于大厂来说，那基本上是不可能不问的。
由于我的技术栈是 React + Angular，所以我的所有面试经历基本都没有被问到过 Vue 相关的问题（用 Vue 的同学不好意思了）。目前我被问到过的问题主要有：
-
Angular 变更检查的原理以及如何进行优化
-
React 的 diff 算法工作过程
-
Angular、React 的事件机制
-
React 中的 setState 是同步还是异步
-
React、Angular 的区别（如果你用过 Vue，问的问题会换成 Vue）
-
React 中各种组件复用的优劣势（mixin、render props、hoc、hook）
-
React 的 Fiber 架构
-
老版本的 React 的某些生命周期被废弃的理由
-
React 性能优化
以上的问题都很大概率会被问到。
TypeScript
2020年，ts 基本是一个前端从业者必须掌握的一项技能，一旦你简历上写了有 ts 的开发经验，那么面试基本上都会问一两道有关 ts 的题目。
ts 的一些普通知识在这里不进行赘述，这里挑选一些我在面试中遇到的题目。
另外，对于大小厂而言，他们对 ts 的掌握程度要求是不一样的，对于小厂而言，他们希望来面试的人能够熟练使用 ts 进行业务开发，所以 ts 的概念的熟练程度对他们来说最重要。而对于大厂而言，他们可能更加希望来面试的人能利用 ts 开发一些 ts 的周边工具，所以比较少会直接问 ts 的一些概念，一般都会让你手写一个 ts 的工具函数。
目前我面过的所有小厂，基本都会问 ts 中 type 和 interface 的区别 ，也基本只问这一个问题。除此之外，偶尔还会问到 ts 中如何实现一个函数的重载 ，基本上也是从使用角度出发，考验一个面试人的 ts 的熟练程度。
大厂里面，有两题我是印象比较深刻的：
-
实现一个 ts 的工具函数
GetOnlyFnProps<T>，提取泛型类型 T 中字段类型是函数的工具函数，其中 T 属于一个对象。
type GetOnlyFnKeys<T extends object> = {
[Key in keyof T]: T[K] extends Function ? K : never
}
type GetOnlyFnProps<T extends object> = {
[K in GetOnlyFnKeys<T>]: T[K]
}
-
实现一个 ts 的工具函数
UnGenericPromise<T>，提取 Promise 中的泛型类型
type UnGenericPromise<T extends Promise<any>> = T extends Promise<infer U> ? U : never
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
