— 4 min read
建议每一条都烂熟于心
常用设计模式
装箱 / 拆箱 & 类型转换
数据类型判断
typeof 底层机器码 对于对象不准确(都会显示 object)
typeof null 机器码 000 表示为对象 但 null 全零...
instanceof 基于原型链的判断 可准确判断 Array/Function/Object
对于基本数据类型不能准确判断
111 instanceof Number -> false 同样的还有"xx"和 true, 因为字面量值不是实例, new Number() 才是
constructor 同样可以理解为基于原型链, 但修改原型会使得结果不准确
Object.prototype.toString.call() 最准确的判断? 可用于深拷贝中判断数据类型, 返回"[object array]"
这种形式
常用位运算
~~undefined
原型
闭包
setTimeout
& IIFE(立即执行函数)
& let
)执行上下文 调用栈 作用域链
推荐阅读我的这篇博客 搞懂执行上下文+闭包+AO/VO+作用域(链)
继承
异步 事件循环
垃圾收集
内存泄漏(如何使用 Chrome 检测)
标记清除法
引用计数法
引出 -> ES6 的 WeakSet 与 WeakMap
this 指向
Object.defineProperty() 与 descriptor(修饰符,即可配置(configurable) 可写(writable) 可枚举(enumerable) 及值(value))
模块化
其他
call & bind & apply
caller / callee
typeof 与 Instanceof 原理
柯里化(尾递归优化) & 函数式编程
类数组
isNaN() 和 Number.isNaN()
Obejct.is() 的不符直觉的处理(扩展:React 的ShallowEqual
底层对 Object.is()进行了优化, 见shallowEqual.js)
这一块的话,我的个人想法是不需要准备的太细致,大概的知识点足矣。
语义化
SEO
DTD <!DOCTYPE>
W3C 与 WHATWG 规范
Html5 新增 API
DOM/BOM API
常见布局
优先级
伪类与伪元素
预处理器与后处理器
盒模型
CSS3 动画
定位
子绝父相 blabla...
src & href 区别
Flex 布局属性及其可取值
Rem 与 em -> 手淘的 Flexible 方案, 小程序与 Rax 的 rpx 方案
BFC / IFC
水平 / 垂直 / 水平垂直居中
预处理器与后处理器
reset 与 normalize.css, 推荐用哪个?
移动端
像素比
检测横屏
图片模糊问题(srcset
, 自动选择符合像素比的图片)
视口类型
vw vh
1Px
算法我就帮不上太多忙啦,以下这些,不仅要会基本实现,还要会各个方面的优化版本。
let const var 暂时性死区等
ES6 的 Class 实质, 与 ES5 继承异同?
super()
?Generator
Iterator
Symbol 类型使用, 一些类库的底层都用它来干什么?
Promise
Async/Await 的原理
Decorator,建议直接看 ts 的
Proxy
Reflect
map set
map 与对象互转
set 与数组互转
weakMap weakSet
其他新增 API
关于 TC39 的标准制定过程
ES 7/8/9/10 /...
优缺点 适用场景
Node 创建子进程的方式,这几种方式的底层,异同
npm install 过程
Buffer
Stream
Node 的适用场景及原因(事件驱动 异步 I/O blabla...)
V8 内存管理
Cluster & IPC
Node 异步 I/O & 进程池 & Libuv
事件循环
Koa
vs Express: 异同点 & 各自优势
中间件原理 与 洋葱模型(Koa-Compose 模块)
选择 Koa 与选择 Express 的考量权衡
跨域与跨站
强缓存与协商缓存
优先级
请求与响应中的缓存相关请求头
E-tag 与 Last-Modified
从输入 URL 到页面呈现
页面渲染中的不良现象
图层树 绘制指令 绘制列表
栅格化线程池 位图
重绘 回流
DOM 树与 CSSOM 树建树过程
阻塞
操作 DOM 为什么慢?
引擎切换
互斥
cookie / session / token
auth_token
& refresh_token
本地存储(web storage)
service worker(随便了解一些即可)
requesAnimationFrame
requestIdleCallback(可以在被问到 React Fiber 时提到)
事件机制
RESTFul 规范(URL & 方法 & 请求头...)
跨域
前端路由原理
XSS
XSRF
GET 型 POST 型 链接类型
同源检测
axios 的 XSRF 防御手段(X-XSRF-TOKEN)
samesite!
Fetch & XHR 对比
onProgress
监听进度脏读 / 幻读 / 不可重复读
事务及边界
索引
ORM(Object Relationship Mapping
)的原理
type 与 interface 异同
Class 增强
类型编程
推荐阅读俺的博客: TypeScript 类型编程初探
泛型
类型守卫 & is 关键字
实现工具类型
装饰器 / IoC 体系
public / protected / private / static关键字
Parcel 是可选的, 并不需要掌握, 而是作为加分项
compiler 与 compilation
HMR(Hot Module Reloading
)原理
二者的工作流程
Loader
Plugin
性能调优
打包速率
减少查找时间
DLL(Dynamic Link Library
, 动态链接库, 已经不推荐使用)
多进程打包插件
影响编译的配置(如source-map
)
打包大小
Code Spilting
)打包交互友好度
webpackbar
插件)friendly-error-plugin
)性能优化
生命周期(标注x的为已经废弃)
为什么要废弃掉这几个生命周期?
Hooks
useState
useEffect
(可选, 有一定理解难度) forwardRef & useRef & useImperativeHandle
useCallback
useMemo
Fiber
Redux 与 Mobx 起码熟练一个 8
源码
中间件原理
setState
React 的事件机制
V-Dom 与 Diff 算法
与 Vue 的比较
实际不止这些 但我不是主要写 Vue 的
错误监控
性能优化
脚手架
埋点
(可选) GraphQL & BFF & Apollo
CI / CD, 自动化构建流程解决了什么问题?
Serverless
前端趋势
工程化