What is FE

完善、系统的 Web 前端知识体系

（QQ 群 797780829）

什么是知识体系

• 完善的知识范围，包含了前端工程师常用的所有知识点
• 合理的结构化，便于理解和记忆

初衷

Web 前端知识体系很重要，而当今网络上又没有一个靠谱的，只能自己去写。一为自己总结输出，二为分享帮助他人。

• 你并不是学不动了，而是学太多迷路了 —— 知识体系就是一张地图
• 你是否能看到当前的热门技术/框架，而看不到整体？—— 知识体系给你上帝视角
• 成为技术大牛、高效学习的三步曲（参考 曹乐《如何成为技术大牛》）
  • 找准知识体系
  • 刻意训练
  • 及时反馈

目录

以下是大纲目录，查看详情可点击每个的链接。

相关科目

• 数学思维
  • 抽象
  • 建模
  • 流程严谨、死板无情
• 英语
  • 国外问答网站（如 stackoverflow.com ）
  • github
  • 英文文档
  • 报错信息

编程基础

• 计算机基础
  • 计算机组成原理
  • 操作系统
  • 汇编语言
  • 编译原理
  • 计算机网络
  • 编码
• 数据结构
  • 结构化与非结构化
  • 逻辑结构
  • 线性结构（数组、链表、栈、队列）
  • 树
  • 优先级队列
  • 词典
  • 图
• 算法
  • 复杂度
  • 算法思想（二分、贪心、动态规划）
  • 递归思想（爆栈）
  • 常用算法（查找、排序、树遍历、最短路径）
  • leetcode 刷题
• 编程模式
  • 面向对象 OOP
    • 类和对象
    • 三要素（继承、封装、多态）
    • UML 类图
  • 面向切面编程 AOP
  • 函数式编程 FP
    • 高级函数
    • 纯函数
    • curry
    • compose
• 设计
  • SOLID 设计原则
  • 常见设计模式
    • 工厂模式
    • 单例模式
    • 观察者
    • 发布订阅
    • 代理
    • 装饰器，等等……
  • MVC
  • MVVM

语法和 API

• 业界标准
  • W3C
  • ECMA-262
• XML
• HTML
  • 基础标签 熟练使用常见标签
  • 媒体标签 了解有使用过常见的如音频和视频标签
  • 图形标签
    • SVG 熟练使用，借助文档能够绘制简单svg图标
    • Canvas 熟悉，借助文档能够绘制简单svg图标
• CSS
  • 理解“流” - CSS 的设计核心
  • 基础的图文样式
  • 布局
    • inline block 和 inline-block 行内、块级、行内块级 熟练使用
    • 盒模型 分标准和ie盒模型 主要区别是content宽度计算方式 width、margin、boder
    • margin 相关 接受4个参数 上右下左 可设置auto
    • flex 弹性布局，熟练使用常用属性
    • float 布局 浮动，在使用中多有兼容问题 如float造成的margin重叠问题
    • BFC 块级上下文，改变盒呈现方式，bfc内的浮动不会影响到bfc外
  • 定位
    • relative 相对定位 熟练
    • absolute 绝对定位，相对于html根元素的定位 熟悉
    • fixed 固定定位，相对于浏览器窗口的定位 熟悉
    • 定位上下文 改变使用绝对定位元素相应的祖先元素定位 了解
  • 响应式
    • 关于 viewport 根据屏幕宽度缩放样式，常放在html头部
    • rem 计量单位，相对于全局字体大小可实现自适应布局 熟悉
    • vw vh 可视宽度和可视高度 vh常用宽度一般使用100% 熟悉
  • css3
    • 渐变 熟悉简单上下左右渐变 可接收渐变角度和颜色
    • 动画 animation定义动画名 @kkeyframes使用 相对熟悉
  • 字体 iconfont 能够使用 =>字体声明、定义样式、引入使用
  • 模块化
    • BEM block、element、 modifier的简写 相对熟悉
    • css-in-js ，等等……
• ES 语法
  • 变量，表达式，函数等基础语法
  • 作用域
    • 自由变量 作用域外（全局）的变量可以理解为自由变量
    • 闭包 什么在一个函数中的函数就叫做闭包函数
    • this 关键字 表示当前对象的引用 可以改变指向（call、apply），谁调用就指向谁
  • class 和继承
  • 原型
  • 异步编程
    • promise resolv和reject两个参数 成功回调res，失败回调rej 熟悉
    • async/await 成对使用，一般结合promise使用，await当promise状态凝固时调用
    • 宏任务和微任务 js执行机制相关 熟悉
    • event loop 模型 一种js单线程运行模型（事件循环） 宏任务-宏任务队列-微任务-微任务队列
  • Map 和 Set set数组会默认过滤重复的 相对熟悉
  • Proxy 和 Reflect 代理 了解
  • 装饰器 Decorator 了解定义不常用到
  • 常用 API
    • 字符串 熟悉
    • 数组 熟悉
    • 对象 熟悉
    • 正则表达式 熟悉
    • 日期处理 熟悉
  • 异常处理 了解try catch异常捕获
  • 模块化 熟悉
    • ES6 Module（可对比 AMD、CMD、CommonJS）
• Typescript 语法
  • 类型
    • 变量类型 熟悉 如string、boolear、number、undefined、null、object
    • 函数参数类型 熟悉 可viod
    • 函数返回值类型 熟悉 可fun
  • 自定义类型 了解
  • 接口 了解
  • 泛型 了解
  • 枚举 了解
  • 函数重载 了解
  • 命名空间 了解
• JS Web API
  • DOM 操作
    • DOM 结构 熟悉
    • DOM 操作 熟悉
    • DOM 操作的性能考虑 了解
  • DOM 事件
    • 事件绑定 熟悉
    • 冒泡模型 熟悉
    • 事件代理（委托） 熟悉
  • BOM 操作
    • window 了解
    • location（获取 url）了解
    • navigator（获取 UA）了解
    • history（前端路由）熟悉
    • screen 了解
  • 通讯
    • postMessage 了解
    • BroadcastChannel 不熟悉
  • ajax
    • XMLHttpRequest 熟悉
    • Fetch 了解
    • 浏览器同源策略 熟悉
    • 跨域请求
      • cors 熟悉
      • jsonp 熟悉
    • cookie 熟悉
  • 存储
    • localStorage 熟悉
    • sessionStorage 熟悉
    • indexedDB 不熟悉
  • webworker 不了解
• JSON 格式 熟悉
• WebAssembly 不熟悉
• Web RTC 不了解

网络和通讯

• TCP/IP（了解即可）
  • 什么是 IP 个人理解:由路由器分配的地址 了解
  • 7 层模型 了解
  • 3 次握手 了解
• url 格式 了解
• DNS 解析（域名到 IP） 了解
• http
  • method（Restful API）了解
  • 状态码 熟悉常见的
  • Request Header 了解
  • Response Header（其中会有 gzip 压缩）了解
  • cookie 了解
  • 缓存策略
    • 强制缓存 了解
    • 协商缓存 了解
• https
  • 如何加密传输？
  • 购买证书
• websocket 相对熟悉
• 登录方案
  • session 相对熟悉
  • jwt 熟悉
• 鉴权方案
  • oauth2 了解
  • sso 不熟悉
• 文件上传 相对熟悉
• 相关术语
  • PV
  • UV
  • QPS ，等等……
• CDN（专门提供静态文件服务，需要知道）

开发流程

• 代码版本管理 git
  • 常用命令 熟悉
  • 多人协作开发 熟悉
  • github gitlab coding.net 等
• 软件包管理
  • npm 熟悉使用
  • package.json 了解
  • yarn 能够使用
• 技术基建
  • UI 组件库，业务组件库 相对熟悉
  • 公共 SDK 了解
• mock 不熟悉
  • charles mock
  • mock.js
  • 在线 mock server
• 调试和抓包
  • debugger 熟悉
  • charles 和 fiddler 不熟悉
    • 抓包
    • 配置代理（如微信能力的测试，需要线上域名）
  • chrome 开发者工具 了解
  • 深入：内存泄漏的排查
• 单元测试 了解
  • jest 等工具
  • Vue React 框架的测试工具
• CI/CD 不熟悉
  • 概念
  • github actions
  • travis ，等等
• linux 基本应用
  • ssh
  • ssh key 信任
  • 常用命令 了解
  • scp 远程拷贝
  • vim 编辑器 了解
• 文档
  • wiki 平台
  • 在线 office / 知识库
  • markdown 格式 了解
• 研发流程
  • 需求评审和 UI 设计 相对了解
  • 技术方案设计 了解
  • 开发过程：编码、调试、单元测试、自测、写注释和文档、代码走查等
  • 联调 熟悉
  • 提测
  • 上线 了解
    • 全量
    • 小流量（灰度）
    • ABTest
  • DevOps 概念

前端工程化

前端工程化，也是开发流程的一部分。内容较多，因此单独拿出来讲解。

• 规范化 了解
  • eslint 编码规范（结合 pre-commit）
  • git 规范：branch 命名规范，commit 规范
  • jsdoc 注释规范
• 模块化 了解
  • 代码分模块组织（依赖于 js css 模块化语法和 webpack 等工具的支持）
  • 组件化
• 自动化
  • 脚手架（如 create-react-app vue-cli） 熟悉
    • yeoman
  • 监听文件变化，自动构建 了解
  • CI/CD 自动单元测试，自动提测、上线等
  • 自动兼容（如 postcss babel） 了解
• webpack
  • 基础配置 相对熟悉
  • 常用 loader 熟悉
  • 常用 plugin 熟悉
  • 代码拆分、公共代码抽离（产出多 chunk） 了解
  • 性能优化 熟悉
• babel
  • babel-polyfill 了解
  • babel-runtime 了解
  • corejs 了解
• rollup

运行和监控

• 浏览器和 webview
• 页面加载和渲染：从输入 url 到页面显示的整个过程 了解
  • 加载过程
  • 渲染过程
  • 重绘/重排
• js 运行机制
  • js 引擎（ 如 V8 ） 了解
  • 内存机制 了解
  • 垃圾回收机制 了解
• 性能优化
  • 优化加载速度 相对熟悉
  • 优化渲染速度 相对熟悉
  • 优化操作体验（如节流、防抖） 熟悉
  • Chrome Performance API 性能监控 了解
• 安全
  • XSS 了解
  • CSRF 了解
  • DDOS 攻击 不熟悉
  • 密码加密存储 了解
• 监控和统计 不熟悉
  • 错误监控、报警
  • 性能监控
  • 统计上报（小流量统计）
  • APM 监控平台
• 客户端能力 了解
  • jsbridge（如微信 jssdk）
  • js 调起 app

前端框架

• 框架基础
  • SPA 和 MPA （单页应用和多页应用）熟悉
  • 前端路由 熟悉
  • MVVM 熟悉
  • 组件化 熟悉
  • 虚拟 DOM 和 diff 算法 熟悉
• Vue
  • vue-cli 熟悉
  • 使用
    • 组件 熟悉
    • 模板 熟悉
    • 指令 熟悉
    • 组件属性 熟悉
    • 组件生命周期 熟悉
    • 高级使用（如动态组件、异步组件、slot 等等） 了解
    • 性能优化 熟悉
  • 原理 了解
    • 响应式（ Object.defineProperty ）
    • 模板编译
    • 虚拟 DOM
  • 周边 熟悉
    • vuex
    • vue-router
    • UI 框架
      • elementUI
      • view-design（之前叫 iview）
      • ant-design-vue
  • vue3（新版本，尚未发布）
• React
  • create-react-app 熟悉
  • 使用
    • JSX 语法 熟悉
    • 组件和属性 熟悉
    • state 和 setState 熟悉
    • 组件生命周期 熟悉
    • 高级使用（如 Context、高阶组件、render-prop 等）了解
    • 性能优化（如 shouldComponentUpdate PureComponent ） 了解
  • 原理
    • JSX 语法糖本质 熟悉
    • 合成事件机制 了解
    • batchUpdate 机制 不熟悉
    • 事物机制 不熟悉
    • 组件渲染流程 了解
    • fiber 了解
  • 周边
    • redux 熟悉
    • mobX 了解
    • react-router 熟悉
    • UI 框架
      • ant-design 熟悉
  • Hooks 熟悉
• Angular

常用工具和插件

• lodash - 工具函数 了解
• echarts - 统计图表 熟悉
• jquery 或 zepto - DOM 操作 相对熟悉
• axios - ajax 熟悉
• date-fns 或 moment - 日期时间格式 了解
• css reset 库 了解
• caniuse.com 浏览器兼容性 不熟悉
• （待继续补充……）

技术广度

• 服务端
  • nodejs 相对熟悉
    • 基本 API（如 http、fs 等）
    • commonjs 模块化
    • 框架
      • express
      • koa
        • 中间件
        • 洋葱圈模型
      • egg
    • 调试
  • SSR 了解
    • 服务端模板，如 ejs artTemplate 等
    • nuxt.js （Vue SSR）
    • next.js（React SSR）
  • 常用软件 了解
    • nginx（反向代理、负载均衡）
    • 数据库
      • redis
      • mysql
      • mongodb
    • docker
    • 日志分析
  • serverless
  • Deno 了解
• 小程序 熟悉
• PWA 了解
• 跨端（如 RN Weex） 了解
• 客户端 electron 不熟悉

其他重要的事儿

• 持续学习（有输入有输出）
• 定期反思总结，低头做事抬头看路
• 时间管理，todo 管理
• 注意身体健康：每年体检，经常锻炼，注意腰椎、颈椎
• 爱护头发

关于作者

王福朋 ，资深前端工程师，PMP，开源编辑器 wangEditor 作者。就职于一线互联网公司。

欢迎参与贡献

个人能力和视野有限，欢迎各位同仁一起贡献力量，让我们一起维护国内最完善、最系统的 Web 前端知识体系。

参与贡献的方式：

• 有建议可提交 issue
• 补充内容可直接提交 PR

提交内容时，有如下要求：

• 要对内容负责，保证内容的正确性
• 结构要合理，要考虑目录层级，不能随意堆砌