2025前端知识图谱
2024-12-25 10:05:49 0 举报AI智能生成
2025前端知识图谱，后续也会随时更新，希望能够帮助学习前端知识，以及充实自己前端技术的小伙伴
作者其他创作
大纲/内容
高阶
搭建
搭建标准
模块研发规范
Webpack Module Fedoration
模块依赖关系描述规范
import- maps
模块数据描述规范
JSON Schema规范
搭建过程
模块化搭建
数据投放
页面主题
页面插件
区块搭建
终端渲染
SSR
数据接口网关
国际化
跨国文件同步
多语言/多地区/多货币
多端渲染
终端识别
CDN + 源站缓存架构
搭建物料
模块
区块
源码页面
页面容器
Node.js
Serverless
Serverless框架
Midway Serverless、Dapr
应用
云端一体化研发
在线服务编排
App Serverless
云平台
公有云平台：AWS Lambda、阿里云 FC、腾讯 SCF
私有化平台：K8S + KNative + ServiceMesh
DevOps
进程管理
PM2
Docker
日志
负载均衡
Shell命令
Docker
性能监控
Open Telemetry
Alinode
Easy Monitor
web服务器
Nginx
Tengine
数据库
MySQL
PostgreSQL
MongoDB
Redis
LiteDB
Oracle
MS SQL Server
PolarDB-云原生
OceanBase-云数据库
API Clients
REST
GraphQL
分布式服务
RPC
gRPC
Dubbo
Dnode
任务调度
Agenda
实时通信
Socket.id
消息
RabbitMQ
Kafka
mqtt
Web Frameworks
Express.js
Koa.js
Sailsjs
Eggjs
Midwayjs
Meteorjs
Fastifty
Next.js
IDE
底层能力
Command
IDE基础功能模块之间种解耦方式，同时提供部分内置命令供插件调用
File Service
文件服务抽象，提供FS Provider接口，可以基于Node,js fs实现本地文件读写，或基于BrowserFS、MemoryFS 等实现纯前端的文件系统
Storage
IDE存储服务，管理IDE如用户设置及插件配置等缓存内容
Theme/Syntax highlighting
CSS variables、Textmate、Vscode- oniguruma
网支撑服务
插件市场
Egg、OSS、权限管控，Group、 Client 分组
日志服务
spdlog
更新服务
electron-updater、 差量更新
容器服务
K8S、Docker、 Pounch
核心能力
通信服务
遵循基于JSONRPC 2.0协议，使用vscode jsonrpc
插件体系
兼容VS Code插件协议，自有KAITIAN插件API扩展
编辑器（LSP）
Monaco Editor、 Language Server Protocol
调试服务
Debug Adapter Protocol
功能模块
资源管理
文件树虚拟列表
Terminal
node-pty、xterm、断连恢复
SCM源代码管理
源代码管理抽象接口，通过Git等插件实现
Layout
可扩展、高自由度、配置化插槽
场景
Local
小程序开发者工具
ProCode开发
Cloud
模块搭建
D2C
LowCode开发
中后台
规范和标准
中后台物料规范
文件目录、API、 国际化无障碍
中后台低代码搭建协议规范
协议结构、低代码物料描述、应用描述
微前端规范
主应用、子应用、微模块、生命周期函数
模型驱动协议规范
协议元信息、业务模型、API 实例描述
中后台领域名词定义
前端物料（组件/区块/模板）、低代码引擎（入料/编排/渲染/出码）、微前端（主应用/子应用/微模块）、模型驱动（DO/BO/VO/UI）
基础设施
基础UI组件库
Fusion、AntD、 Material UI
物料脚手架
统脚手架Build- Scripts、组件开发、模板开发
物料中心/资产中心
物料大包/资产包
Lowcode 引擎
入料模块、编排模块、渲染模块、出码模块、大纲面板、编辑面板、属性面板、属性设置器
开箱即用解决方案
表单组件
动态表单、表单解决方案FormilyJS
列表组件
图表组件库
ECharts、AntV、 BizCharts
WebExcel SDK
SpreadJS
低代码场景设计器SDK
页面设计器、表单设计器、流程设计器、图表设计器
UIPaaS
中后台搭建、小程序搭建、BPMS
IceStark、qiankun、 single spa
微前端
模型驱动SDK
研发平台
在线设计
D-One在线设计、Figma
在线研发（Web IDE）
阿里云在线研发平台SpaceX
No-Code / Low-Code研发平台
宜搭、乐高、CONE、凤蝶、Power Apps、outsystems、salesforce lightning
体验管理
体验模型设计
体验指标
PV、转化率、跳失率等
体验模型
HEART模型、蜂窝模型、5E模型等
体验数据采集
行为数据采集
稳定性数据采集
性能数据采集
体验分析方法
任务分析
任务耗时、任务转化率、任务完成数等
表单分析
表单提交耗时、表单提交成功率、表单出错率等
主观分析
满意度（PSAT、CSAT）、净推荐值（NPS）、客户费力度（CES）等
用户反馈
工单、评价、反馈等
行为分析
行为流、热力图、网站旅程等
可用性测试
用户验收
数据洞察方法
多维分析
指标、维度、筛选项概念；数据立方（cube）的旋转（rotation）、 切片与切块（slice and dice）、钻取（drill down）等操作
国驱动因子分析(归因分析)
启发式归因、算法归因(logistics回归、 生存模型、probabilistic模型等)
行为预测
FM模型、FNN模型、PNN模型等
体验工具、平台
APM平台
Sentry、ARMS、Fundebug等
体验数据平台
hotjar、fullstory、 mixpanel等
综合数据平台
GrowingIO、友盟、Google Analytics等
数据可视化
技术标准
Canvas
SVG
WebGL/2
WebGPU
OpenGL
数理统计
统计学
平面几何
线性代数
离散数学
图形美学
色彩
图形
动画
格式塔理论
可视化基础概念
数据类型
视觉通道与映射
信息密度
可视化隐喻
图形符号学与图形语法
基础图表类型
折线图
柱形图（条形图）
饼状图（环型图）
散点图（气泡图）
雷达图
地图
多维表格
其他
绘图引擎
2D
3D
图表类库/可视化框架
基础可视化框架
D3
G2
F2
Vega
常用统计图表
Chartjs
ECharts
Highcharts
G2Plot
图分析与编排
Cytoscape
G6
mxGraph
Sigma.js
X6
地理空间可视化
L eaflet
L7
Mapbox
PolyMaps
领域方案
监控可视化
Grafana
关系可视分析
Graphin
工程体系
初始化
工程模板
物料
最佳实践
开发
Code Lint
Mock
Debug/Preview
Code Review
weblDE
构建
本地构建
云端构建
多语言构建
sourcemap
测试
单测/E2E
安全扫描
CI
发布
卡口
权限控制
灰度放量
流量监控
回滚
CD
监控
监控
上报标准
监控平台
告警诊断
安全生产
前端安全环境
攻防演练
变更管控
国际化
多语言
标准文案
翻译术语库
文案本地化测试
自动文案溯源
多语言banner
RTL
本地化
本地化通用组件
Locale Data
CLDR-SDK
全球化数字地图
本地化开发规约
体验度量
标准设计规范
体验度量
用研工具
极致性能
CDN&网络链路
资源域名
海外性能监控
地区化实验环境
端性能
差异化投放
跨端技术
跨端解决方案
跨平台
Web
Electron
移动端
Hybrid
ReactNative/Weex
Flutter
一码多端
规范
W3C/WHATWG
小程序
其他（XML、Dart）
框架
增强型
编译时
运行时
跨端 API
桥接与通信
JSBridge
跨端API规范
平台配套
BridgeSDK
自动化测试
CanlUse
跨端搭建
标准与规范
物料规范
搭建协议
一码多搭
Web
小程序
原生Native
跨端调试
DevTools
模拟器调试
真机调试
统一发布
跨端组件
标准与规范
脚手架
文件结构
属性与API
发布与引用
视觉交互
自适应
平台特性
跨端组件
跨容器(H5/小程序)
跨平台(PC/无线)
跨端性能
性能优化最佳实践
CSR
NSR
SSR
渲染容器优化
性能指标
FCP
LCP
TTI
TBT
性能采集
性能埋点
SDK
采样与分析
性能大盘
OLAP
数据可视化
互动技术
技术标准
CSS
Canvas
SVG
WebGL
WebGPU
OpenGL
Metal
Vulkan
Web Assembly
WebXR
基础概念
通用概念
场景（Scene）
节点（Entity）
组件（Component）
3D概念
相机（Camera）
灯光（Lighting）
材质（Material）
着色器（Shader）
网格（Mesh）
后处理（Post processing）
环境渲染（Environment Rendering）
互动引擎
渲染引擎
2D
3D
物理引擎
动画引擎
声音引擎
GUI 引擎
XR 引擎
基础知识
图形学
数学
线性代数
高等数学
物理学
工程体系
工具
调试工具
脚手架
IDE 插件
格式检测工具
性能诊断工具
可视化编辑器
资产库
美术资产（模型、动画、特效）
玩法资产
样板资产
搭建体系
研发平台
基础组件
降级方案
机型设备降级
特性降级
客户端版本降级
设备特性
设备输入
传感器
XR
容器适配
Web
小程序
小游戏
核心能力输出
动画
微交互
游戏
VR/AR、全景
工业化渲染
虚拟人像
智能化
总结展望
理论
技术
工程体系
前端算法框架
Tensorflow.js
datacook
特征工程
数据可视化
传统机器学习算法
Pipcook
神经网络算法概述
如何定义神经网络
前端机器学习生态（Boa)
模型部署
模型优化
商业化能力
数据
模型
研发能力
D2C视觉稿转编码
imgcook代码生成原理
P2C PRD转编码
S2C 服务转编码
业务逻辑点识别与生成能力
C2C 编码转编码
鲸幂智能UI
业务能力
C 端研发解决方案
自定义DSL
自定义组件
自定义 Model
自定义编辑器插件
接口服务调用
B 端研发解决方案
多场景组件识别样本制造
目标检测与图片分类模型训练
代码转换器
端智能解决方案
模型运算框架
常见业务模型能力
端智能工程能力
多媒体
音视频基础
基础概念
容器格式
编码格式
直播技术
推流
流媒体协议
流媒体服务
播放器技术
拉流
Demux
解码
Remux
渲染
Web媒体技术
流操作基础
WebRTC
MSE
WebAssembly
WebXR
WebGL
开源产品和框架
flv.js
hls.js
video.js
FFmpeg
OBS
MLT
初阶
前端基础
客户端
浏览器
Chrome
Safari
Firefox
APP
小程序
WebView
网络
Domain
TCP/IP
DNS
HTTP
服务端
WebServer
Nginx
Apache HTTP Server
CDN
服务端语言
PHP
Java
Golang
数据库
操作系统
Windows
CentOS
SUSE Linux
Debian
Ubuntu
Fedora
OpenSUSE
FreeBSD
Alibaba Cloud Linux
行业标准
W3C/WHATEG
CSS标准
HTML、XHTML、XML、HTML5标准
DOM标准
SVG标准
小程序标准
ECMA-TC39
EcmaScript标准
JavaScript标准
研发工具
编辑器
Sublime Text
Visual Studio Code
webStorm
调试预览
浏览器调试工具
FireBug
Chrom DevTools
本地服务
file://
http://、SimpleHTTPServer
在线服务
CodePen
JSFiddle
网络调试
hosts、Switchhosts
Devyggubg Proxy、Charles、wireshark
图片编辑器
Photoshop
Sketch
版本管理
Git
SVN
HTML
元素
根元素
主根元素html
分区根元素body
元数据
base、head
内容分区
header、footer
内容
块级内容div、dir
文字内容a、b、strong
图片和多媒体
audio、img
内嵌内容
iframe、object
脚本
canvas、script
表格
table、tbody
表单
button、input
可交互元素
menu、menuitem
属性
常用属性
class、id、style、title
全局属性
事件
窗口事件
表单事件
键盘事件
鼠标事件
多媒体事件
编码
URL编码
语言代码
字符集
CSS
语法
@规则
层叠
注释
解释器
继承
简写
优先级
值定义
单位与取值类型
选择器
元素选择器
选择器分组
类选择器
ID选择器
属性选择器
后代选择器
子元素选择器
相邻选择器
伪类
伪元素
定位
position
top、left、bottom、right
z-index
布局
Box Model
FlexBox
Grid
Column
样式
背景
文本
轮廓
列表
动画
Animation
transition
应用
响应式
em、vh/vw、%
自适应
@media、rem
JavaScript
语法
值、变量
数据类型
基本类型
类型判断
类型转换
流程控制
运算（表达式、运算符）
数学
比较
逻辑
函数
函数声明
函数表达式
回调函数
箭头函数
数据类型深入
原始类型的方法
数字类型
字符串
数组
数组方法
Iterable object （可迭代对象）
Map and Set （映射和集合）
WeakMap and WeakSet （弱映射和弱集合）
Object.keys，values，entries
解构赋值
日期和时间
JSON序列化、反序列化
对象
属性/字面量
in、for...in
对象引用
深拷贝、浅拷贝
Symbol
垃圾收集机制
this
new
Optional chaining '?.'
类型转换 Symbol.toPrimitive
Property flags、descriptors
getters、setters
函数
调用栈
递归、尾递归
arguments、params spread
作用域、闭包
var、变量提升
IIFE、匿名自执行函数
NFE、函数命名表达式
箭头函数
new Function
setTimeout、setInterval
call、apply、bind
部分施用、柯里化
执行上下文
原型
原型链、继承
F.prototype
Object.prototype
类
extend继承
方法重载
构造函数
Super、[[HomeObject]]
静态属性、静态函数
私有属性、私有函数
混合、Mixins
异步流程控制
Callback
Promise
Promises/A+、Promisification、Thenable
async/await
generator
iterable
模块化
commonJS
amd、cmd、umd、es-module
异常捕获
try...catch...finally
throw
Error
浏览器
DOM
DOM Tree
DOM Node
DOM Query
DOM Properties
DOM Modify
Style
Coordinates、Element Scrolling
DOM Events
UI Event
Bubbling and Capturing
Event Delegate
浏览器API
location
history
navigator
Default Actions
event.preventDefault()
Form
change、focus、blur、submit
网络
XHR
Fetch
JSONP
WebSocket
权限
Cookie
Session
OAuth
SSO
JWT
安全与隐私
Content Security Policy(CSP)
CORS
XSS
CSRF
MITM
Samesite
兼容性
Can I Use
polyfill
shim
browserslist
Autoprefixer
开发者工具
设备模式
元素面板
控制台面板
源代码面板
网络面板
性能面板
内存面板
应用面板
安全面板
中阶
研发链路（工程化基础）
脚手架（Scaffold）
CLI（command-line interface）
commander
inquirer
ora
chalk
emoji
初始化（Boilerplate）
create-react-app
umi
vue-cli
包管理
NPM
Yarn
开发
dev-server
hot-reload
mock
proxy
构建
构建器
gulp
Webpack
snowpack
vite
JS编译
tsc
babel
esbuild
CSS编译
Sass
Less
Stylus
postCss
代码规范
业界流行规范
Airbnb Style Guide
StandardJS
Google Style Guide
阿里巴巴前端规约
CSS 命名规范
BEM
OOCSS
SMACSS
工具
ESLint
stylelint
commitlint
Prettier（代码格式化）
husky 和 lint-staged（流程控制）
F2ELint（阿里前端规约配套的Lint工具）
测试
单元测试
jasmine
mocha
jest
enzyme
E2E 测试
Selenium
karma
cypress
Puppeteer
Appium
WebDriver
ChromeDriver
UIRecord
PhantomJs
覆盖率测试
istanbul
CI/CD
TravisCI
CircleCI
Codecov
Jenkins
库
原则
DRY
CSS
作用域
scoped css
css modules
css-in-js
样式库
normalize.css
Bootstrap
Tailwind
Bulma
JS
工具类
history
path-to-regexp
lodash
fastclick
date-fns
网络
axios
got
数据流
rxjs
Immer
模版引擎
动画
CSS动画
JS动画
Lottie
设计规范/组件
Material Design
Apple Human Interface Guidelines
Ant Design
WeUI
mini-ali-ui
文档
jsdoc
bisheng
dumi
Storybook
框架
React
性能优化
指标
真实指标
First Contentful Paint（FCP）
Largest Contentful Paint（LCP）
First Input Delay（FID）
Cumulative Layout Shift （CLS）
实验室指标
Total Blocking Time（TBT）
Time to Interactive（TTI）
评估工具
Chrome DevTools
LightHouse
PageSpeed Insights
WebPageTest
优化方案
压缩
代码压缩
文本压缩（gzip、Brotli、Zopfli等）
Tree-shaking
Code-splitting
图片优化
小图优化（css sprite、iconfont、dataURI、svg）
图片格式选择
压缩（如tinypng）
响应式
加载策略
懒加载
DNS预解析、预加载、预渲染
离线化（ServiceWorker、AppCache、离线包等）
HTTP缓存
数据缓存（localStorage、sessionStorage）
资源加载（顺序、位置、异步等）
请求合并
HTTP2
CDN
服务端渲染
执行渲染
CSS代码优化（选择器、启用GPU、 避免表达式等）
使用requestAnimationFrame实现视觉变化
降低复杂度或使用Web Worker
避免大型、复杂的布局和布局抖动
简化绘制复杂度、减少绘制区域
输入处理程序防抖
感官体验优化
骨架屏
Snapshot
Loading
工作原理
浏览器
DOM Tree、CSSOM
渲染、绘制
会话
事件循环
垃圾回收
Webkit深入
引擎
Trident
Gecko
Presto
Webkit
Webkit2
Blink
Chromium
JavaScript引擎
V8
SpiderMonkey
JavaScriptCore
综合能力
知识管理
Markdown
脑图
wiki
GitBook
软件工程
过程模型
需求分析
概念设计
体系结构设计
项目管理
立项管理
整体管理
范围管理
进度管理
成本管理
质量管理
人力资源管理
沟通管理
风险管理
采购管理
合同管理
变更管理
战略管理
项目集和项目组合管理
流程管理
知识管理
交互设计
交互原型
视觉还原
开源项目
GitHub
OpenJS
Apache
0 条评论
下一页
