前端知识体系
2022-04-21 15:52:14 0 举报AI智能生成
登录查看完整内容
前端工程师需要掌握的技能点
作者其他创作
大纲/内容
抽象
建模
流程严谨、死板无情
数学思维
国外问答网站（如stackoverflow.com）
github
英文文档
报错信息
英语
相关科目
冯若依曼结构
二进制
算数运算和逻辑运算
计算机组成原理
进程和线程
CPU调度运算
内存管理
文件系统和IO
操作系统
寄存器和内存模型
堆栈模型
CPU指令
汇编语言
编译器流程
AST
编译原理
TCP/IP 协议
UDP
DNS
HTTP
计算机网络
ASCII 码
unicode 字符集
UTF-8 / UTF-16
编码
计算机基础
结构化与非结构化的思维，重要
栈（逻辑结构）可用数组（代码）表示
栈（逻辑结构）可用链表（代码）表示
队列（逻辑结构）可用数组（代码）表示
树（逻辑结构）可用对象（代码）表示
等
逻辑结构与代码表现（很多人分不清楚），例如
向量（如 C 语言的数组，length 不可变）
链表
栈
队列
线性结构
普通树
二叉树（为何偏偏重点讲二叉树？而不是三叉树、四叉树……）
AVL 树
红黑树
B 树
搜索树
树
堆
优先级队列
词典（散列表）
图
数据结构
复杂度
二分
贪心
动态规划
算法思想
递归思想（爆栈）
查找
排序
新增、删除
遍历
新增删除（平衡树）
搜索
最短路径
KMP 算法
前缀匹配
字符串
常用算法
leetcode 刷题
算法
类和对象
三要素（继承、封装、多态）
UML 类图
面向对象 OOP
面向切面编程 AOP
高级函数
纯函数
curry
compose
函数式编程 FP
编程模式
SOLID 设计原则
工厂模式
单例模式
观察者
发布订阅
代理
装饰器，等等……
常见设计模式
MVC
MVVM
设计
编程基础
W3C
ECMA-262
业界标准
XML
基础标签
video
audio
媒体标签
SVG
Canvas
图形标签
HTML
“流”实际上是 CSS 世界中的一种基本的定位和布局机制
“流体布局”，指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身具有自适应特性，所以“流体布局”往往都是具有自适应性的。但是，“流体布局”并不等同于“自适应布局”。
“自适应布局”是对凡是具有自适应特性的一类布局的统称，“流体布局”要狭窄得多。例如，表格布局也可以设置为 100%自适应，但表格和“流”不是一路的，并不属于“流体布局”
理解“流” - CSS 的设计核心
基础的图文样式
inline block 和 inline-block
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间的相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
content（内容区）：元素的宽和高；border（边框区）：盒子的边缘；padding（填充区）：为了使页面布局看起来美观大方，盒子里的内容区会用padding来解决父元素和子元素的位置关系；margin（外边界区）：控制同辈元素之间的位置关系。
盒模型
margin 相关
flex
float 布局
BFC
布局
relative
absolute
fixed
定位上下文
定位
关于 viewport
rem
vw vh
响应式
选择器
渐变
动画
css3
字体 iconfont
BEM
css-in-js ，等等……
模块化
less
sass
预编译器
CSS
变量，表达式，函数等基础语法
自由变量
闭包
this
作用域
class 和继承
原型和原型链
promise
async/await
宏任务和微任务
event loop 模型
异步编程
Map 和 Set
Proxy 和 Reflect
装饰器 Decorator
数组
对象
正则表达式
日期处理
常用 API
异常处理
ES6 Module（可对比 AMD、CMD、CommonJS）
ES 语法
变量类型
函数参数类型
函数返回值类型
类型
自定义类型
接口
泛型
枚举
函数重载
命名空间
Typescript 语法
DOM 结构
DOM 操作
DOM 操作的性能考虑
事件绑定
冒泡模型
事件代理（委托）
DOM 事件
window
location（获取 url）
navigator（获取 UA）
history（前端路由）
screen
BOM 操作
postMessage
BroadcastChannel
通讯
XMLHttpRequest
Fetch
span style=\
cors
jsonp
跨域请求
cookie
ajax
localStorage
sessionStorage
indexedDB
存储
webworker
JS Web API
JSON 格式
WebAssembly
Web RTC
语法和 API
什么是 IP
7 层模型
3 次握手，4次挥手
TCP/IP
url 格式
DNS 解析（域名到 IP）
method（Restful API）
1xx 消息 表明请求已被接受，须要继续处理 这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束
2xx 成功 表明请求已成功被服务器接收、理解、并接受
3xx 重定向 这类状态码表明须要客户端采起进一步的操做才能完成请求。一般，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的Location域中指明
4xx 客户端错误 这类的状态码表明了客户端看起来可能发生了错误，妨碍了服务器的处理
5xx 服务器错误 表示服务器没法完成明显有效的请求
状态码
Request Header
Response Header（其中会有 gzip 压缩）
强制缓存
协商缓存
缓存策略
http
如何加密传输？
购买证书
https
实现原理
websocket
session
jwt
登录方案
oauth2
sso
鉴权方案
文件上传
PV
UV
QPS ，等等……
相关术语
CDN（专门提供静态文件服务，需要知道）
网络和通讯
常用命令
多人协作开发
github gitlab coding.net 等
代码版本管理 git
npm
package.json
yarn
软件包管理
UI 组件库，业务组件库
公共 SDK
技术基建
charles mock
mock.js
在线 mock server
mock
debugger
抓包
配置代理（如微信能力的测试，需要线上域名）
charles 、 fiddler、wireShark
performance
lighthouse
chrome 开发者工具
深入：内存泄漏的排查
调试和抓包
jest 等工具
Vue React 框架的测试工具
单元测试
概念
github actions
travis ，等等
CI/CD
ssh
ssh key 信任
scp 远程拷贝
vim 编辑器
linux 基本应用
wiki 平台
在线 office / 知识库
markdown 格式
文档
需求评审和 UI 设计
技术方案设计
开发过程：编码、调试、单元测试、自测、写注释和文档、代码走查等
联调
提测
全量
小流量（灰度）
ABTest
上线
DevOps 概念
研发流程
开发流程
eslint 编码规范（结合 pre-commit）
git 规范：branch 命名规范，commit 规范
jsdoc 注释规范
规范化
代码分模块组织（依赖于 js css 模块化语法和 webpack 等工具的支持）
组件化
yeoman
脚手架（如 create-react-app vue-cli）
监听文件变化，自动构建
CI/CD 自动单元测试，自动提测、上线等
自动兼容（如 postcss babel）
自动化
基础配置
常用 loader
常用 plugin
代码拆分、公共代码抽离（产出多 chunk）
性能优化
webpack
babel-polyfill
babel-runtime
corejs
babel
rollup
Parcel
前端工程化
浏览器和 webview
加载过程
渲染过程
重绘/重排
页面加载和渲染：从输入 url 到页面显示的整个过程
js 引擎（ 如 V8 ）
内存机制
垃圾回收机制
js 运行机制
优化加载速度
优化渲染速度
优化操作体验（如节流、防抖）
Chrome Performance API 性能监控
Chrome lightHouse 检测工具
XSS
CSRF
DDOS 攻击
密码加密存储
安全
错误监控、报警
性能监控
统计上报（小流量统计）
APM 监控平台
为什么用图片发请求
埋点
监控和统计
jsbridge（如微信 jssdk）
js 调起 app
客户端能力
运行和监控
SPA 和 MPA （单页应用和多页应用）
前端路由
虚拟 DOM 和 diff 算法
框架基础
vue-cli
组件
模板
指令
组件属性
组件生命周期
高级使用（如动态组件、异步组件、slot 等等）
使用
响应式（ Object.defineProperty ）
模板编译
虚拟 DOM
原理
vuex
vue-router
elementUI
ant-design-vue
VantUI（H5）
UI 框架
周边
Vue
响应式（使用es6 proxy代理，将对象进行转化拦截，使用weakMap做弱引用缓存。当触发代理的get时就会调用track，在track里面会把对应的effect收集到targetMap）
Pinia.js
自动导入 unplugin-vue-components和unplugin-auto-import
element-plus
vue3
create-react-app
JSX 语法
组件和属性
state 和 setState
高级使用（如 Context、高阶组件、render-prop 等）
性能优化（如 shouldComponentUpdate PureComponent
JSX 语法糖本质
合成事件机制
batchUpdate 机制
事物机制
组件渲染流程
fiber
redux
react-router
Hooks
React
Angular
前端框架
echarts - 统计图表
jquery 或 zepto - DOM 操作
axios - ajax
date-fns 或 moment - 日期时间格式
css reset 库
caniuse.com 浏览器兼容性
tinypng
常用工具和插件
基本 API（如 http、fs 等）
commonjs 模块化
中间件
洋葱圈模型
koa
express
egg
框架
调试
nodejs
服务端模板，如 ejs artTemplate 等
nuxt.js （Vue SSR）
next.js（React SSR）
SSR
nginx（反向代理、负载均衡）
redis
mysql
mongodb
数据库
docker
日志分析
常用软件
serverless
Deno
服务端
小程序
PWA
跨端（如 RN Weex）
客户端 electron
技术广度
其他重要的事
前端知识体系
0 条评论
回复 删除
下一页
