IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
发布时间：2023-08-24 17:30
IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/数据可视化/工程体系/国际化/跨端技术/互动技术/智能化/多媒体)之详细攻略
目录
初级(前端基础、研发工具、HTML、CSS、JavaScript、浏览器、相关学习资源)
前端基础(客户端/网络/服务端/行业标准/ECMA-TC39)
Html：网站设计的内容概览简介、网页设计流程/工具/内容组成、脚本代码之详细攻略
JavaScript(语法/数据类型深入/对象/函数/原型/类/异步流程控制/模块化/异常捕获)
JavaScript：JavaScript编程语言的简介、安装、学习路线(几十项代码编程案例分析)之详细攻略
浏览器(DOM/浏览器API/网络/权限/安全与隐私/兼容性/开发者工具)
中级(研发链路/工程化基础、库、框架、性能优化、工作原理、综合能力、相关学习资源)
研发链路/工程化基础(脚手架(Scaffold)，包管理，开发，构建，代码规范，测试，CI/CD)
框架React(基础，组件，状态管理，路由，样式，框架，周边生态)
高级(搭建、Node&Serverless、IDE、中后台、体验管理、数据可视化、工程体系、国际化、跨端技术、互动技术、智能化、多媒体)
Node&Serverless(Serverless，DevOps，数据库，调度方式，Web Frameworks)
中后台(基础概念和规范，基础设施，开箱即用解决方案，SaaS产品)
体验管理(体验模型设计，体验数据采集，体验分析方法，数据洞察方法，体验工具、平台)
数据可视化(技术标准，数理统计，图形美学，可视化基础概念，图表类库/可视化框架，领域方案)
跨端技术(跨端解决方案，一码多端，跨端，API，跨端搭建，跨端组件，跨端性能)
互动技术(技术标准，基础概念，互动引擎，基础知识，工程体系，基础组件，核心能力输出)
智能化(总结展望，前端算法框架，商业化能力，研发能力，业务能力)
参考文章：https://codechina.gitcode.host/developer-roadmap/frontend/intro/
初级(前端基础、研发工具、HTML、CSS、JavaScript、浏览器、相关学习资源)
前端基础(客户端/网络/服务端/行业标准/ECMA-TC39)
| 客户端 | 客户端 |
| 网络 | 网络：Domain、TCP/IP、DNS、HTTP |
| 服务端 | 服务端 |
| 行业标准 | 行业标准 W3C/WHATWG：CSS标准，HTML、XHTML、XML、HTML5标准，DOM标准，SVG标准，小程序标准 |
| ECMA-TC39 | ECMA-TC39：EcmaScript标准、JavaScript标准 |
研发工具(编辑器/调试预览/图片编辑器/版本管理)
| 编辑器 | 编辑器：Sublime Text、Visual Studio Code、WebStorm |
| 调试预览 | 调试预览 浏览器调试工具：FireBug、Chrome DevTools 本地服务：file://、http://、SimpleHTTPServer 在线服务：CodePen、JSFiddle 网络调试：hosts、Switchhosts，Debugging Proxy、Charles、wireshark |
| 图片编辑器 | 图片编辑器：Photoshop、Sketch |
| 版本管理 | 版本管理：Git、SVN |
HTML(元素/属性/事件/编码)
| 元素 | 元素 |
| 属性 | 属性 |
| 事件 | 事件：窗口事件、表单事件、键盘事件、鼠标事件、多媒体事件 |
| 编码 | 编码：URL编码、语言代码、字符集 |
Html：网站设计的内容概览简介、网页设计流程/工具/内容组成、脚本代码之详细攻略
https://blog.csdn.net/qq_42229253/article/details/127028358
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 |
| 模块化 | 模块化：commonJS，amd、cmd、umd、es-module |
| 异常捕获 | 异常捕获：try…catch…finally，throw，Error |
JavaScript：JavaScript编程语言的简介、安装、学习路线(几十项代码编程案例分析)之详细攻略
https://blog.csdn.net/qq_42229253/article/details/127030497
浏览器(DOM/浏览器API/网络/权限/安全与隐私/兼容性/开发者工具)
| DOM | DOM：DOM Tree，DOM Node，DOM Query，DOM Properties，DOM Modify，Styles，Coordinates、Element Scrolling，DOM Events、UI Event、Bubbling and Capturing、Event Delegate |
| 浏览器API | 浏览器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 |
| 开发者工具 | 开发者工具：设备模式，元素面板，控制台面板，源代码面板，网络面板，性能面板，内存面板，应用面板，安全面板 |
相关学习资源()
![\"\"](\"https://img-blog.csdnimg.cn/431758a596eb42feb1be7954eb6762f6.jpeg\")
中级(研发链路/工程化基础、库、框架、性能优化、工作原理、综合能力、相关学习资源)
研发链路/工程化基础(脚手架(Scaffold)，包管理，开发，构建，代码规范，测试，CI/CD)
| 脚手架 (Scaffold) | 脚手架 (Scaffold) |
| 包管理 | 包管理：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 覆盖率测试：istanbul |
| CI/CD | CI/CD：TravisCI，CircleCI，Codecov，Jenkins |
库(原则，CSS，JS，动画，设计规范/组件，文档)
| 原则 | 原则：DRY |
| CSS | CSS |
| JS | JS |
| 动画 | 动画：CSS动画，JS动画，Lottie |
| 设计规范/组件 | 设计规范/组件：Material Design，Apple Human Interface Guidelines，Ant Design，WeUI，mini-ali-ui |
| 文档 | 文档：jsdoc，bisheng，dumi，Storybook |
框架React(基础，组件，状态管理，路由，样式，框架，周边生态)
| 基础 | 基础：JSX，生命周期，Hooks，Immutable |
| 组件 | 组件：AntDesign，material-ui |
| 状态管理 | 状态管理：Redux，Dva，Mobx，xState |
| 路由 | 路由 |
| 样式 | 样式：classnames，styled-components |
| 框架 | 框架：Next.js，Gatsby，react-admin，Ant Design Pro |
| 周边生态 | 周边生态：React Native，preact、remax、rax、taro |
性能优化(指标，评估工具，优化方案)
| 指标 | 指标 |
| 评估工具 | 评估工具：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、避免表达式等），JS代码优化及评估 感官体验优化：骨架屏，Snapshot，Loading |
工作原理(浏览器，JavaScirpt引擎)
| 浏览器 | 浏览器：DOM Tree、CSSOM 渲染、绘制，会话，事件循环，垃圾回收，Webkit 深入 |
| JavaScirpt引擎 | JavaScirpt引擎：V8，SpiderMonkey，JavaScriptCore |
综合能力(知识管理，软件工程，交互设计，开源项目)
| 知识管理 | 知识管理：Markdown，脑图，wiki，GitBook |
| 软件工程 | 软件工程：过程模型，需求分析，概念设计，体系结构设计，项目管理 |
| 交互设计 | 交互设计：交互原型，视觉还原 |
| 开源项目 | 开源项目：GitHub，OpenJS，Apache |
相关学习资源
![\"\"](\"https://img-blog.csdnimg.cn/9ed2072200974047a27300f831429b18.jpeg\")
高级(搭建、Node&Serverless、IDE、中后台、体验管理、数据可视化、工程体系、国际化、跨端技术、互动技术、智能化、多媒体)
搭建(搭建标准，搭建过程，终端渲染，搭建物料)
| 搭建标准 | 模块研发规范：Webpack Module Fedoration 模块依赖关系描述规范：Kissy Seed 模块数据描述规范：JSON Schema 规范 |
| 搭建过程 | 模块化搭建 数据投放 页面主题 页面插件 区块搭建 |
| 终端渲染 | SSR 数据接口网关 国际化：跨国文件同步，多语言/多地区/多货币 多端渲染：终端识别 CDN+源站缓存架构 |
| 搭建物料 | 模块 区块 源码页面 页面容器 |
Node&Serverless(Serverless，DevOps，数据库，调度方式，Web Frameworks)
| Serverless | Serverless 框架：Midway Serverless 云平台 |
| 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开发 |
中后台(基础概念和规范，基础设施，开箱即用解决方案，SaaS产品)
| 基础概念和规范 | 中后台领域名词定义：物料（组件/区块/模板）、低代码引擎、微前端 中后台物料规范：文件目录、API、国际化、无障碍 中后台低代码搭建协议规范：协议结构、低代码物料描述、应用描述 微前端规范：主应用、子应用、微模块、生命周期函数 模型驱动数据模型描述协议规范：协议元信息、业务模型、API实例描述 |
| 基础设施 | 基础UI组件库：aterial 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&网络链路 资源域名 海外性能监控 地区化实验环境 端性能 差异化投放 |
跨端技术(跨端解决方案，一码多端，跨端，API，跨端搭建，跨端组件，跨端性能)
| 跨端解决方案 | 跨平台：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 |
| 基础概念 | 通用概念：场景，节点，组件， |
| 互动引擎 | 渲染引擎：2D，3D 物理引擎 动画引擎 声音引擎 GUI，引擎 VR/AR，引擎 |
| 基础知识 | 图形学 数学 物理学 |
| 工程体系 | 工具：调试工具，脚手架，IDE，插件 可视化编辑器： 资产库：美术资产，玩法资产 搭建体系： 研发平台： |
| 基础组件 | 降级方案：机型设备降级，特性降级，客户端版本降级 设备特性：设备输入，传感器，VR/AR 容器适配：Web，小程序/轻应用，小游戏 |
| 核心能力输出 | 动画 微交互 游戏 VR/AR、全景 工业化渲染 多媒体：直播、音频、长短/视频等 |
智能化(总结展望，前端算法框架，商业化能力，研发能力，业务能力)
| 总结展望 | 理论 |
| 前端算法框架 | Tensorflow.js |
| 商业化能力 | 数据 |
| 研发能力 | D2C视觉稿转编码：imgcook代码生成原理 |
| 业务能力 | C端研发解决方案：自定义DSL，自定义组件，自定义Model，自定义编辑器插件，接口服务调用 B端研发解决方案：多场景组件识别样本制造，目标检测与图片分类模型训练，代码转换器 端智能解决方案：模型运算框架，常见业务模型能力，端智能工程能力 |
多媒体(音视频基础，直播技术，播放器技术，Web媒体技术)
| 音视频基础 | 基础概念 容器格式 编码格式 |
| 直播技术 | 推流 流媒体协议 流媒体服务 |
| 播放器技术 | 拉流 Demux 解码 Remux 渲染 |
| Web媒体技术 | 流操作基础 WebRTC MSE WebAssembly WebXR WebGL 开源产品和框架 flv.js hls.js video.js FFmpeg OBS MLT |
![\"\"](\"https://img-blog.csdnimg.cn/7f083fd3debb4c3c86f06ef623c9d2c5.jpeg\")