Skip to content
Linbudu's Blog

【outdated】2020 前端基础

4 min read

基础

JavaScript 基础

建议每一条都烂熟于心

  • 常用设计模式

    • 单例
    • 装饰者
    • 中介者
    • 观察者
    • 迭代器
  • 装箱 / 拆箱 & 类型转换

  • 数据类型判断

    • 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
  • 原型

    • __proto__与 prototype
    • 顶级原型对象 Object
    • Function 与 Object,鸡生蛋与蛋生鸡问题
    • 原型链继承与类式继承的本质差异, 二者的同名属性分别会如何起作用?
  • 闭包

    • 实现 & 应用 & 原理
    • 经典问题(setTimeout & IIFE(立即执行函数) & let)
  • 执行上下文 调用栈 作用域链

    推荐阅读我的这篇博客 搞懂执行上下文+闭包+AO/VO+作用域(链)

    • 变量对象(VO)与活动对象(AO)
  • 继承

    • 寄生组合式继承(组合+原型)
  • 异步 事件循环

    • 微任务 & 宏任务 ....
    • 浏览器 UI 渲染与事件循环?(UI 渲染属于哪种任务,它的执行时机?)
    • async 与 await 在其中的处理
    • 实现 Promise
    • 并行 顺序 中断 Promise
    • Promise A+规范
      • 立即 resolved 的 Promise 执行时机
  • 垃圾收集

    • 内存泄漏(如何使用 Chrome 检测)

    • 标记清除法

    • 引用计数法

      • 循环引用如何处理?
    • 引出 -> ES6 的 WeakSet 与 WeakMap

  • this 指向

    • 作用 & 意义
    • 隐式丢失
    • 四种优先级
    • 箭头函数的 this
  • Object.defineProperty() 与 descriptor(修饰符,即可配置(configurable) 可写(writable) 可枚举(enumerable) 及值(value))

    • 与 Proxy 差异, 为什么 Vue3.0 切换到 Proxy?
  • 模块化

    • ES Modules 与 CommonJS 差异
      • 语法 & 导入 & 导出 加载方式
      • 为什么不要使用 export default
    • 二者对循环引用的处理
    • 为什么 Webpack 要使用摇树优化, 需要将 Babel 编译结果设置为 ES6?
  • 其他

    • call & bind & apply

    • caller / callee

    • typeof 与 Instanceof 原理

      • tyoeof null? (机器码)
    • 柯里化(尾递归优化) & 函数式编程

    • 类数组

    • isNaN() 和 Number.isNaN()

    • Obejct.is() 的不符直觉的处理(扩展:React 的ShallowEqual底层对 Object.is()进行了优化, 见shallowEqual.js

HTML&CSS

这一块的话,我的个人想法是不需要准备的太细致,大概的知识点足矣。

  • 语义化

  • SEO

  • DTD <!DOCTYPE>

  • W3C 与 WHATWG 规范

  • Html5 新增 API

  • DOM/BOM API

  • 常见布局

  • 优先级

  • 伪类与伪元素

  • 预处理器与后处理器

  • 盒模型

  • CSS3 动画

    • GPU 加速原理
  • 定位

    • 文档流
  • 子绝父相 blabla...

    • sticky
  • src & href 区别

  • Flex 布局属性及其可取值

  • Rem 与 em -> 手淘的 Flexible 方案, 小程序与 Rax 的 rpx 方案

  • BFC / IFC

  • 水平 / 垂直 / 水平垂直居中

  • 预处理器与后处理器

  • reset 与 normalize.css, 推荐用哪个?

  • 移动端

    • 像素比

    • 检测横屏

    • 图片模糊问题(srcset, 自动选择符合像素比的图片)

    • 视口类型

    • vw vh

    • 1Px

基础手写/算法

算法我就帮不上太多忙啦,以下这些,不仅要会基本实现,还要会各个方面的优化版本。

  • 原生 ajax axios(我有一个仓库是自己实现的 axios 的 http 部分,有兴趣的同学可以翻翻,ts-axios
  • bind / call / apply
  • debounce / throttle
  • instanceof
  • 深浅拷贝
  • promise
  • lazy man(挺好玩的)
  • new
  • 用 setTimeout 实现 setInterval, 为什么要这么做
  • 继承
    • 实现 ES6 Class 实质的继承
  • 冒泡 / 快排 / 选择 ...
  • 观察者与发布订阅模式
  • 刷刷 leetcode 吧...

ES6

  • let const var 暂时性死区等

  • ES6 的 Class 实质, 与 ES5 继承异同?

    • Babel 编译结果
    • 为什么需要先调用super()?
  • Generator

    • 纤程 & 协程 & 线程 & 进程
    • yield
    • co 模块
  • Iterator

    • for...of
  • Symbol 类型使用, 一些类库的底层都用它来干什么?

  • Promise

    • 回调函数延迟绑定
    • 错误穿透
    • 状态机制
    • all race allSettled
  • Async/Await 的原理

    • NodeJS 14.3.0 版本实现的顶级 await
  • Decorator,建议直接看 ts 的

  • Proxy

    • 为什么 Vue 抛弃了 Object.defineProperty
    • 元数据 & 元编程
    • 常用方法
  • Reflect

    • 为什么需要它?
    • 与 Proxy 的结合
  • map set

    • map 与对象互转

    • set 与数组互转

    • weakMap weakSet

  • 其他新增 API

  • 关于 TC39 的标准制定过程

    • Strawman
    • Proposal
    • Draft
    • Candidate
    • Finished
  • ES 7/8/9/10 /...

Node

  • 优缺点 适用场景

  • Node 创建子进程的方式,这几种方式的底层,异同

    • spawn
    • exec
    • execFile
    • fork
  • npm install 过程

    • 版本冲突 与 dedupe
  • Buffer

  • Stream

    • 可读/可写/可读可写/可转换流
  • Node 的适用场景及原因(事件驱动 异步 I/O blabla...)

  • V8 内存管理

    • 新生代与老生代机制
      • From 空间与 To 空间
    • 标记清除与标记整理
      • 触发点
    • 增量标记
  • Cluster & IPC

    • child_progress
    • 主从模式
  • Node 异步 I/O & 进程池 & Libuv

  • 事件循环

    • timer
    • I/O
    • Idle prepare
    • poll
      • 阻塞
    • check
    • close CB
    • 每一阶段均有的 nextTick 与 microTask
  • Koa

    • vs Express: 异同点 & 各自优势

    • 中间件原理 与 洋葱模型(Koa-Compose 模块)

    • 选择 Koa 与选择 Express 的考量权衡

浏览器

  • 跨域与跨站

  • 强缓存与协商缓存

    • 优先级

    • 请求与响应中的缓存相关请求头

    • E-tag 与 Last-Modified

  • 从输入 URL 到页面呈现

    • 页面渲染中的不良现象

      • 白屏
      • FOUC
    • 图层树 绘制指令 绘制列表

      • 显示提升
      • 隐式提升(层爆炸)
    • 栅格化线程池 位图

    • 重绘 回流

    • DOM 树与 CSSOM 树建树过程

      • 令牌化->建树
      • 样式收集
    • 阻塞

      • 加载 js 阻塞 dom
      • css & js 的加载
      • 给 js 标签添加 async & defer 的作用
  • 操作 DOM 为什么慢?

    • 引擎切换

    • 互斥

  • cookie / session / token

  • 本地存储(web storage)

  • service worker(随便了解一些即可)

  • requesAnimationFrame

  • requestIdleCallback(可以在被问到 React Fiber 时提到)

  • 事件机制

    • 委托发生的阶段
    • IE 的事件模型
    • 阻止事件与冒泡
    • addEventListener 的第三个参数: useCapture
  • RESTFul 规范(URL & 方法 & 请求头...)

  • 跨域

    • JSONP 原理
    • Nginx 原理 与 实际配置
    • CORS
      • Options 预检请求
      • 简单 / 复杂 请求
      • 相关字段
  • 前端路由原理

    • hash
      • onHashChange
    • history
      • go
      • push
      • replace
      • pushState
      • replaceState
      • onPopState
  • XSS

    • 文档型 & 反射型 & 存储型
    • 防范: httpOnly & 转义 & CSP
  • XSRF

    • GET 型 POST 型 链接类型

    • 同源检测

      • origin
      • referer
      • 同源检测伪造
    • axios 的 XSRF 防御手段(X-XSRF-TOKEN)

    • samesite!

  • Fetch & XHR 对比

    • cookie
    • abort
    • 使用onProgress监听进度

数据库

  • 脏读 / 幻读 / 不可重复读

  • 事务及边界

  • 索引

  • ORM(Object Relationship Mapping)的原理

网络

  • 七层与五层模型
  • DNS 查找机制
    • CDN CNAME
  • 请求/响应报文
    • 头 & 主体
  • http1.1 -> http1
    • 身份认证
    • 断点续传(206 状态码)
    • 缓存
    • keep-alive
  • http2 -> http1.1
    • 多路复用
    • 头部压缩
    • server-push
  • https 会话层机制
    • (非)对称加密
    • 浏览器预置的 CA 整数
  • TCP 握手/挥手 过程中出错?
  • 泛洪攻击
    • RST 包
  • TCP/UDP 适用场景
    • QUIC 协议
    • 为什么 DNS 使用 UDP
  • TCP 拥塞控制
    • 慢启动 & 拥塞避免
    • 快速重传 & 快速恢复
  • 正向代理与反向代理
  • Get 与 Post 区别
    • 幂等性
    • 安全性

进阶

框架及工具

TypeScript

  • type 与 interface 异同

  • Class 增强

  • 类型编程

    推荐阅读俺的博客: TypeScript 类型编程初探

    • 泛型

    • 类型守卫 & is 关键字

    • 实现工具类型

  • 装饰器 / IoC 体系

  • public / protected / private / static关键字

Git

  • 暂存区 等基本概念
  • git fetch
  • git rebase
  • git merge
  • git reset
  • git revert

Babel

  • 工作阶段
    • 解析 babylon
    • 转化 babel-traverse
    • 生成 babel-generator
  • babel-plugin
  • babel-preset
  • babel-polyfill
  • @babel/plugin-transform-runtime

Webpack & Parcel

Parcel 是可选的, 并不需要掌握, 而是作为加分项

  • compiler 与 compilation

  • HMR(Hot Module Reloading)原理

  • 二者的工作流程

  • Loader

    • 以 Babel-Loader 为例, 讲讲 loader 都做了什么
  • Plugin

  • 性能调优

    • 打包速率

      • 减少查找时间

      • DLL(Dynamic Link Library, 动态链接库, 已经不推荐使用)

      • 多进程打包插件

      • 影响编译的配置(如source-map)

    • 打包大小

      • JS/CSS 摇树优化
      • 压缩 & Uglify
      • 代码分割(Code Spilting)
    • 打包交互友好度

      • 进度指示(webpackbar插件)
      • 错误友好提示(friendly-error-plugin)

React

  • 性能优化

  • 生命周期(标注x的为已经废弃)

    • WillMount x
    • render
    • DidMount
      • 为什么数据获取要在这里? 而不是 WillMount?
    • WillReceiveProps x
    • shouldComponentUpdate
    • WillUpdate x
    • render
    • DidUpdate x
    • 以下为新增
    • getDerivedStateFromProps
    • getSnapshotBeforeUpdate
    • getDerivedStateFromError
      • 在页面崩溃时, 与 componentDidCatch 如何搭配降级
  • 为什么要废弃掉这几个生命周期?

    • 为什么 getDerivedStateFromProps 是静态方法
  • Hooks

    • useState

    • useEffect

    • (可选, 有一定理解难度) forwardRef & useRef & useImperativeHandle

    • useCallback

    • useMemo

  • Fiber

    • reconciliation
    • commit
    • Concurrent 模式
      • Suspense
      • useTransition
  • Redux 与 Mobx 起码熟练一个 8

    • 源码

    • 中间件原理

  • setState

    • 原生事件->同步, 合成事件->异步, 为什么?
  • React 的事件机制

  • V-Dom 与 Diff 算法

  • 与 Vue 的比较

    • 约束 / 迎合开发者
    • 思想

Vue

实际不止这些 但我不是主要写 Vue 的

  • MVVM 原理
    • Observer
    • Compile
    • Watcher

业务场景

  • 白屏问题排查
  • 骨架屏
  • 超长列表
    • requesAnimationFrame
    • 虚拟列表
  • 单点登录(SSO)
  • 埋点的原理
  • 扫码登陆
  • 大文件分片 / 完整性校验 / 断点续传 / 秒传 / 拖拽上传 / 粘贴上传

小程序

  • 基础架构
  • properties / data
  • behavior(封装性)
  • DOM BOM 是如何禁止访问的?
  • 生命周期
    • 页面级
    • 应用级
  • 性能优化
  • vs PWA / Hybrid / 各种跨端方案

漫谈

测试

  • 单元测试
  • 集成测试
  • 端到端测试(E2E)
  • 混沌测试

工程化

  • 错误监控

    • Sentry 原理
    • 你理解的错误监控, 是如何的? 收集哪些信息?
  • 性能优化

    • Webpack
    • http 缓存
    • 使用Performance API获取应用表现
  • 脚手架

    • 如何自建脚手架? -> yeoman
  • 埋点

    • SPA 应用
    • Hybrid 应用
  • (可选) GraphQL & BFF & Apollo

    • vs RESTFul 优劣势
    • BFF 意义, 解决了什么问题?
      • 接口清洗 聚合 ...
      • 带来的新问题
      • Serverless 协作
    • Apollo 生态圈的主要 package
  • CI / CD, 自动化构建流程解决了什么问题?

  • Serverless

    • FaaS
    • BaaS
    • 小程序云函数思路
    • Serverless 解决了什么问题?
  • 前端趋势

    • 智能化
    • 跨端
      • 5G 物联网带来的影响
      • Flutter 与 RN 此类方案
      • 演进
    • 价值
      • 向后端进发
      • 对业务更熟悉
  • 工程化

    • 模块化
      • 以 React 为例, 你的组件模块化思路?
      • 项目开发模块化
    • 规范化
      • 各种各样的 Lint
      • CR
      • 测试
      • ...
    • 系统化
      • 微服务
      • 微前端
      • Serverless
      • 中间层
      • ...