小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
背景
笔者在《如何高效地招聘前端》一文中提到，面试题目的深度要比广度更重要，提问要挖掘候选人的极限，要有层次有梯度。这就对面试官有很高的要求，那么如何快速培训面试官呢？当然是用题库。
本文主要脱胎于笔者这些年面试以及被面试的总结，有疏漏的地方，请多留言指正。
目标
- 系统整理常见的前端知识点
- 每个知识点列举多个题目，分级，深度递增
- 方便面试官学习和使用
正文
分级与工作年限大致对应关系：基础 = 2 年以内；进阶 = 2~4 年；高级 = 4 年以上。
JavaScript
| 基础 | 进阶 | 高级 |
|---|---|---|
| - JS 的数据类型有哪些？解释一下“引用数据类型”？ - 判断变量 a 是否为数组（对象）的方法有哪些？复制数组（对象）有哪些方法？ - 什么是类数组？如何转化成数组？ - Array.prototype.pop() 的返回值是什么？对原数组的影响？如何删除数组第 n 项？- 遍历对象有哪些方法？ - 如何把一个 ,分割的字符串转成数组？反过来呢？ | - 0.1 + 0.2 === 0.3 吗？为什么？怎么解决？- 后端用 64 位整数作为 id 传到前端会有什么问题？如何解决？ - [] === [] 的结果是什么？== 呢？JS 的 == 的解析过程？- 实现 Function.prototype.bind、Array.prototype.reduce、 Promise等- JS 的作用域都有哪些？ - 什么是闭包？典型的使用场景？ - new 的过程？ | - 什么是原型链？什么是原型对象？Object 的原型对象是什么？ - 实现继承的方式及优缺点？ - 为什么不建议使用 object.hasOwnProperty而建议Object.prototype.hasOwnProperty.call？- 什么是 AST？如何应用？ - 单例模式、装饰器模式、代理模式、发布订阅模式、观察者模式的使用场景与实现 |
HTML & CSS
| 基础 | 进阶 | 高级 |
|---|---|---|
| - 什么是盒子模型？ - 列举 5 个行内/块元素 - CSS 的选择器有哪些？优先级如何？ - CSS 单位有哪些？适合的使用场景分别是什么？ - 什么是 rgba？用 HEX 如何等价实现？ - inline-block 的作用及典型应用场景？- 实现一个元素的水平、垂直居中 - padding、margin 可以为负值吗？- position: absolute 元素的偏移量以谁为基准？- 如何保证文本内容缩进的还原？ | - 响应式和自适应的区别及如何实现？ - 什么是边界塌陷？如何解决？什么是 BFC？- flex 有几个参数？意义是什么？- 如何实现溢出省略（展示省略号） - 如何实现奇偶数列不同样式？ - 实现列表第一个元素没有上边框或最后一个元素没有下边框 - 伪类与伪元素的区别？ ::before和::after的典型使用场景- PostCSS、Scss/Sass、Less 等预处理器作用？ | - 纯 CSS 实现固定宽高比 - 避免 CSS 命名冲突的解决方案有哪些？原理是什么？ - 实现三列布局且中间内容优先加载（HTML 中写在最前） - serif（衬线）与 sans-serif（非衬线）的区别？font-family 的顺序如何设计？ |
浏览器
| 基础 | 进阶 | 高级 |
|---|---|---|
| - 定义考察：文档流；重绘（repaint）/重排（reflow）；DOM/BOM；DOMTree/CSSOM/RenderTree - 浏览器从接收到 html 后的渲染过程是什么？有什么注意事项？ - Chrome 并发请求有什么限制？ - Cookie,SessionStorage,LocalStorage的区别？以及典型应用场景 | - script 标签的 defer/async 属性的区别与作用- link（style）放在 html 中间会发生什么？- 图片加载优化措施都有哪些？ - 地址栏长度限制可能引起的问题？如何解决？ | - 通常一个浏览器进程（Tab 页签）中都有哪些线程？作用是什么？ - 什么情况下会出现“浏览器阻止新页面打开”的情况？如何解决？ - Event loop、宏/微任务？node 与浏览器环境的不同- 浏览器的垃圾回收方案，如何避免内存泄漏？ |
网络
| 基础 | 进阶 | 高级 |
|---|---|---|
- TCP/IP四层（或OSI七层）是什么？HTTP、TCP、IP 分别位于哪一层？- DNS 的解析过程？常用默认端口号？ - 什么是 ajax，浏览器如何实现的？fetch的用法- 常见的 HTTP headers及作用？get 与 post 的区别？post body一共有几种格式？应用场景分别是什么？- 常见的 HTTP 状态码及意义？ - 什么是跨域？解决方案有哪些？原理是什么？ - CDN 的作用及原理？ | - 三次握手的过程？为什么三次？每一次的作用？ - 四次挥手的过程？为什么要有 TIME_WAIT？- 什么是 RESTful API？优缺点？还有哪些 method？- HTTP 2.0的意义及其新特性？- 什么是 SEO？SPA模式下如何解决？ | - 如何进行手机抓包？ - websocket与HTTP之间的关系？- 1xx的HTTP状态码表示什么？在什么场景会出现？- 如何利用浏览器强缓存优化网页打开速度？原理？如何开启？HTML 文件如何处理？ |
安全
| 基础 | 进阶 | 高级 |
|---|---|---|
- 什么是XSS攻击？如何解决？前端做还是后端做？- Cookie的作用及限制？简述SameSite,JWT | - 什么是 CSRF 攻击？如何解决？- HTTPS 的意义？如何实现？采用的什么加密（对称/非对称）？证书发放过程？如何抓包？ | - 简述第三方平台接入的过程及注意事项（如调用微信公众平台的 Open API），或描述从用户请求到接收到反馈的整个时序过程 - 设计一个提供 Open API 的服务，突出重点注意事项 |
工程化
| 基础 | 进阶 | 高级 |
|---|---|---|
| - 介绍熟悉的打包工具（webpack、rollup、parcel、gulp、vite）及优缺点 - yarn 的优缺点？ - 什么是 tree-shaking？开发时需要注意什么？- CJS、ESM区别- 什么是代码混淆？作用是什么？ - package-lock.json和yarn.lock的作用？何时会更改？是否要上传到远端？ | - 如何拆分出基本不变的代码？如何实现懒加载？ - babel转译 ES6+ 的原理是什么？AST是否有其他应用？- 常见的 lint标准有哪些？优缺点？husky和lint-staged分别解决什么问题？- 如何强制保证团队 nodejs 版本统一？ | - monorepo vs multirepo？lerna的用法及能解决的问题？- 什么是 CI/CD？解决什么问题？常见的工具框架？token 等秘钥信息如何存放？- 什么是 unit test,e2e test？解决什么问题？常见的工具框架？优缺点？- 如何设计一套埋点系统？如何计算首屏渲染时间？如何实现异常上报？ |
项目实践 - React
| 基础 | 进阶 | 高级 |
|---|---|---|
- 常见的hooks及基本用法？与生命周期的对应关系？优缺点？为什么不能在 if 中出现？- 什么是 Virtual DOM？为了解决什么问题？与真实 DOM 的区别？- Redux、Mobx、useContext等熟悉的状态管理工具的介绍及特点？ | - 如何理解单向数据流？为何这样设计？ - 如何理解 immutable？为什么？如何实现？- setState是同步还是异步？为什么？- useCallback、useMemo的典型使用场景及注意事项 | - 简述React diff算法？时间复杂度是多少？如何做到的？- React Fiber是什么？要解决什么问题？是递归还是迭代？对 diff 算法有什么影响？- 比较 HOC、render props、Hooks的优缺点 |
项目实践 - Vue
| 基础 | 进阶 | 高级 |
|---|---|---|
- 简述MVC、MVVM- 常见 Vue 的生命周期及使用场景 - @,:,# 分别是什么的简写？v-bind="obj"的意义？- computed的作用及原理 | - style 中scoped和module解决样式命名冲突的原理？- Vue 如何实现的响应式？ defineProperty、Proxy- Vue3 中如何使用 TS？Vue3 与 Vue2 的对比 | - 为什么 SFC 中 data 必须是一个函数？props 中引用类型的默认值也要求是个函数？ - Vue diff 与 React 的不同 - template的解析原理？ |
其他
TypeScript
- TS 的数据类型有哪些？TS 的作用及优缺点
interface与type的区别enum的使用场景？如何从 1（非 0）开始累加？- 如何声明一个 key 为 string，value 为 number 的对象？
- 介绍 TS 泛型，举几个常见的例子
Pick、Omit、Exclude、Required、Partial、keyof、typeof等用途？?、!、??、as的作用？- 如何声明一个类？举一个多态的例子
Git
- 常见的 Git 工具？及优缺点
- 常见 Git 命令及作用，如何实现缩写，如
git status=>git st reset、cherry-pick、rebase、reflog、--amend、--no-verify等命令的作用- 如何重命名本地分支？如何删除远程分支？
add=>commit=>push过程发生了什么？- 介绍熟悉的 git 协作规范（如 gitflow）？解决什么问题？如何落地？
跨平台
- 如何适配不同大小屏幕
- 移动端如何禁止缩放、禁止用户选择文本？
- 如何实现双击、多触点操作？
- 如何实现 1px border？
Hybrid、RN/Weex、Flutter的比较及原理- 常见的跨平台框架优缺点，及实现跨平台的原理
国际化
- 国际化常用工具
- 国际化标识放在请求的哪里？用的什么规范？
- 如何处理单复数
- 如何处理组件库国际化
- 如何处理日期、时区国际化
- 如何处理因国际化导致的样式变化
结语
正如《如何高效地招聘前端》中提到的：
我们要捋清楚一个逻辑，所有知识点都是为了解决实际问题而出现的，实际问题结合了特定场景是可以很复杂的。我们要做的就是从知识点出发，顺着那条“经常被忽略的”长长的线，找到它要解决的实际问题，然后再引申出其他相关知识点，再反复。理论上，可以无限的问下去。
理论上来说，要想真正充分发挥题库的作用，一定是对题库中所有的题都已经烂熟于胸，使用时才能够游刃有余。比如《高效》一文中举的几个例子，一个问题可以从“JS数据类型”一直问到“React 的单向数据流和 diff 算法”，如何让中间的过渡平滑，不那么生硬，是十分考验面试官的水平的。毕竟“自己有千斤力，才能四两拨千斤”。
本文只是对知识点的简单分级，而且并不能够保证足够的严谨和准确性。但是以此题库为基础，在学习、研究上述问题的过程中，一定会有额外的收获，这个绝对是因人而异了。如果以此文为起点，能够快速完善面试官的广度与深度，孵化出一批“游刃有余”的成熟面试官，那也算是功德一件。
夫学须静也，才须学也，非学无以广才，非志无以成学。——《诫子书》诸葛亮
虽天才隽朗，而实须坟诰以广知。——《抱朴子》葛洪
