---
title: "前端技术高阶"
date: 2018-12-29
lastmod: 2020-01-05
weight: 3
type: docs
icon: #
description: "高阶高线图"
# search related keywords
keywords: ["前端技术","高阶"]
---
关注“高校俱乐部”微信公众号，快人一步获取高清全套技术路线图
{{< embed-pdf-view url="/images/frontend.pdf" >}}
### 搭建
- 搭建标准
- 模块研发规范
- Webpack Module Fedoration
- 模块依赖关系描述规范
- Kissy Seed
- 模块数据描述规范
- JSON Schema 规范
- 搭建过程
- 模块化搭建
- 数据投放
- 页面主题
- 页面插件
- 区块搭建
- 终端渲染
- SSR
- 数据接口网关
- 国际化
- 跨国文件同步
- 多语言/多地区/多货币
- 多端渲染
- 终端识别
- CDN+源站缓存架构
- 搭建物料
- 模块
- 区块
- 源码页面
- 页面容器
### Node&Serverless
- Serverless
- Serverless 框架
- Midway Serverless
- 应用
- 云端一体化研发
- 服务编排
- App Serverless
- 云平台
- 公有云平台AWS Lambda、阿里云 FC、腾讯 SCF
- 私有化平台K8S + KNative + ServiceMesh
- DevOps
- 进程管理
- PM2
- forever
- 日志
- 负载均衡
- Shell 命令
- Docker
- 性能监控
- Alinode
- Easy Monitor
- web 服务器
- Nginx
- Tengine
- 数据库
- 关系型数据库
- MySQL
- PostgreSQL
- 非关系型数据库
- MongoDB
- Redis
- LiteDB
- API Clients
- REST
- GraphQL
- 调度方式
- RPC
- gRPC
- dubbo
- dnode
- 任务调度
- Agenda
- 实时通信
- Socket.io
- 消息
- RabbitMQ
- Kafka
- mqtt
- Web Frameworks
- Express.js
- Koa.js
- Sails.js
- Egg.js
- Midway.js
- Meteor.js
- Fastify
- 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实例描述
- 基础设施
- 基础UI组件库
- Material UI、AntD
- 物料脚手架
- 组件开发、模板开发
- 物料中心 / 资产中心
- 资产包
- lowcode 引擎
- 入料模块、编排模块、渲染模块、出码模块、大纲面板、编辑面板、属性面板、属性设置器
- 开箱即用解决方案
- 表单组件
- 动态表单
- 列表组件
- 图表组件库
- ECharts、AntV、BizCharts
- WebExcel SDK
- SpreadJS
- 场景设计器 SDK
- 页面设计器、表单设计器、流程设计器、图表设计器
- UIPaaS
- 微前端
- single-spa、qiankun、icestark
- 模型驱动 SDK
- 工作台 SDK
- SaaS产品
- 在线设计
- Figma
- 在线研发（Web IDE）
- 阿里云开发平台
- No-Code / Low-Code 研发平台
- Power Apps、outsystems、salesforce lightning、云凤蝶、宜搭
### 体验管理
- 体验模型设计
- 体验指标
- 体验模型
- 体验数据采集
- 行为数据采集
- 稳定性数据采集
- 性能数据采集
- 体验分析方法
- 任务分析
- 任务耗时、任务转化率、任务完成数等
- 表单分析
- 表单提交耗时、表单提交成功率、表单出错率等
- 主观分析
- 满意度（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
- Vega
- 常用统计图表
- Chartjs
- ECharts
- Highcharts
- 图分析与编排
- Cytoscape
- G6
- mxGraph
- Sigma.js
- X6
- 地理空间可视化
- Leaflet
- L7
- Mapbox
- PolyMaps
- 领域方案
- 监控可视化
- 关系可视分析
- 金融数据可视化
- 商业智能可视化
### 工程体系
- 初始化
- 工程模板
- 物料
- 最佳实践
- 开发
- Code Lint
- Mock
- Debug/Preview
- 构建
- 前端资源构建
- 其他语言如(Typescript)
- 检查
- 单测/E2E
- 安全扫描
- CI & CD
- Code Review
- 发布
- 监控
- 上报标准
- 监控平台
- 告警诊断
- 安全生产
- 前端安全环境
- 攻防演练
- 变更管控
- 自动化
### 国际化
- 多语言
- 标准文案
- 翻译术语库
- 文案本地化测试
- 自动文案溯源
- 多语言banner
- RTL
- 本地化
- 本地化通用组件
- Locale Data
- CLDR-SDK
- 全球化数字地图
- 本地化开发规约
- 体验度量
- 标准设计规范
- 体验度量
- 用研工具
- 极致性能
- CDN&网络链路
- 资源域名
- 海外性能监控
- 地区化实验环境
- 端性能
- 差异化投放
### 跨端技术
- 跨端解决方案
- 跨平台
- Web
- Electron
- 移动端
- Hybrid
- ReactNative/Weex
- Flutter
- 一码多端
- 规范
- W3C/WHATWG
- 小程序
- 其他（XML、Dart）
- 框架
- 增强型
- 编译时
- 运行时
- 跨端 API
- 桥接与通信
- JSBridge
- 跨端 API 规范
- 平台配套
- BridgeSDK
- 自动化测试
- CanIUse
- 跨端搭建
- 标准与规范
- 物料规范
- 搭建协议
- 一码多搭
- Web
- 小程序
- 原生 Native
- 跨端调试
- DevTools
- 模拟器调试
- 真机调试
- 统一发布
- 跨端组件
- 标准与规范
- 脚手架
- 文件结构
- 属性与 API
- 发布与引用
- 视觉交互
- 自适应
- 平台特性
- 跨端组件
- 跨容器（H5/小程序）
- 跨平台（PC/无线）
- 跨端性能
- 性能优化最佳实践
- CSR
- NSR
- SSR
- 渲染容器优化
- 性能指标
- FCP
- LCP
- TTI
- TBT
- 性能采集
- 性能埋点
- SDK
- 采样与分析
- 性能大盘
- OLAP
- 数据可视化
### 互动技术
- 技术标准
- CSS
- Canvas
- SVG
- WebGL
- WebGPU
- OpenGL
- Metal
- Vulkan
- 基础概念
- 通用概念
- 场景
- 节点
- 组件
- 3D 概念
- 相机
- 灯光
- 材质
- 着色器
- 网格
- 后处理
- 环境渲染
- 互动引擎
- 渲染引擎
- 2D
- 3D
- 物理引擎
- 动画引擎
- 声音引擎
- GUI 引擎
- VR/AR 引擎
- 基础知识
- 图形学
- 数学
- 物理学
- 工程体系
- 工具
- 调试工具
- 脚手架
- IDE 插件
- 可视化编辑器
- 资产库
- 美术资产
- 玩法资产
- 搭建体系
- 研发平台
- 基础组件
- 降级方案
- 机型设备降级
- 特性降级
- 客户端版本降级
- 设备特性
- 设备输入
- 传感器
- VR/AR
- 容器适配
- Web
- 小程序/轻应用
- 小游戏
- 核心能力输出
- 动画
- 微交互
- 游戏
- VR/AR、全景
- 工业化渲染
- 多媒体
- 直播、音频、长短/视频等
### 智能化
- 总结展望
- 理论
- 技术
- 工程体系
- 前端算法框架
- Tensorflow.js
- datacook
- 特征工程
- 数据可视化
- 传统机器学习算法
- Pipcook
- 神经网络算法概述
- 如何定义神经网络
- 前端机器学习生态（Boa）
- 模型部署
- 模型优化
- 商业化能力
- 数据
- 模型
- 研发能力
- D2C视觉稿转编码
- imgcook代码生成原理
- P2C PRD转编码
- S2C服务转编码
- 业务逻辑点识别与生成能力
- C2C编码转编码
- 业务能力
- C端研发解决方案
- 自定义DSL
- 自定义组件
- 自定义Model
- 自定义编辑器插件
- 接口服务调用
- B端研发解决方案
- 多场景组件识别样本制造
- 目标检测与图片分类模型训练
- 代码转换器
- 端智能解决方案
- 模型运算框架
- 常见业务模型能力
- 端智能工程能力
### 多媒体
- 音视频基础
- 基础概念
- 容器格式
- 编码格式
- 直播技术
- 推流
- 流媒体协议
- 流媒体服务
- 播放器技术
- 拉流
- Demux
- 解码
- Remux
- 渲染
- Web媒体技术
- 流操作基础
- WebRTC
- MSE
- WebAssembly
- WebXR
- WebGL
- 开源产品和框架
- flv.js
- hls.js
- video.js
- FFmpeg
- OBS
- MLT