IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略

IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/数据可视化/工程体系/国际化/跨端技术/互动技术/智能化/多媒体)之详细攻略

目录

初级(前端基础、研发工具、HTML、CSS、JavaScript、浏览器、相关学习资源)

前端基础(客户端/网络/服务端/行业标准/ECMA-TC39)

研发工具(编辑器/调试预览/图片编辑器/版本管理)

HTML(元素/属性/事件/编码)

Html：网站设计的内容概览简介、网页设计流程/工具/内容组成、脚本代码之详细攻略

CSS(语法/选择器/定位/布局/样式/动画/应用)

JavaScript(语法/数据类型深入/对象/函数/原型/类/异步流程控制/模块化/异常捕获)

JavaScript：JavaScript编程语言的简介、安装、学习路线(几十项代码编程案例分析)之详细攻略

浏览器(DOM/浏览器API/网络/权限/安全与隐私/兼容性/开发者工具)

相关学习资源()

中级(研发链路/工程化基础、库、框架、性能优化、工作原理、综合能力、相关学习资源)

研发链路/工程化基础(脚手架(Scaffold)，包管理，开发，构建，代码规范，测试，CI/CD)

库(原则，CSS，JS，动画，设计规范/组件，文档)

框架React(基础，组件，状态管理，路由，样式，框架，周边生态)

性能优化(指标，评估工具，优化方案)

工作原理(浏览器，JavaScirpt引擎)

综合能力(知识管理，软件工程，交互设计，开源项目)

相关学习资源

高级(搭建、Node&Serverless、IDE、中后台、体验管理、数据可视化、工程体系、国际化、跨端技术、互动技术、智能化、多媒体)

搭建(搭建标准，搭建过程，终端渲染，搭建物料)

Node&Serverless(Serverless，DevOps，数据库，调度方式，Web Frameworks)

IDE(底层能力，支撑服务，核心能力，功能模块，场景)

中后台(基础概念和规范，基础设施，开箱即用解决方案，SaaS产品)

体验管理(体验模型设计，体验数据采集，体验分析方法，数据洞察方法，体验工具、平台)

数据可视化(技术标准，数理统计，图形美学，可视化基础概念，图表类库/可视化框架，领域方案)

工程体系(初始化，开发，构建，检查，发布)

国际化(多语言，本地化，体验度量，极致性能)

跨端技术(跨端解决方案，一码多端，跨端，API，跨端搭建，跨端组件，跨端性能)

互动技术(技术标准，基础概念，互动引擎，基础知识，工程体系，基础组件，核心能力输出)

智能化(总结展望，前端算法框架，商业化能力，研发能力，业务能力)

多媒体(音视频基础，直播技术，播放器技术，Web媒体技术)

---

参考文章：https://codechina.gitcode.host/developer-roadmap/frontend/intro/

初级(前端基础、研发工具、HTML、CSS、JavaScript、浏览器、相关学习资源)

前端基础(客户端/网络/服务端/行业标准/ECMA-TC39)

客户端	客户端 浏览器：Chrome、Safari、Firefox APP：小程序、WebView
网络	网络：Domain、TCP/IP、DNS、HTTP
服务端	服务端 WebServer：Nginx、Apache HTTP Server、CDN 服务端语言：PHP、Java、Golang 数据库 操作系统
行业标准	行业标准 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(元素/属性/事件/编码)

元素	元素 根元素：主根元素 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编码、语言代码、字符集

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 iterable
模块化	模块化：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
开发者工具	开发者工具：设备模式，元素面板，控制台面板，源代码面板，网络面板，性能面板，内存面板，应用面板，安全面板

相关学习资源()

MDN Web 入门 友好的 Web 开发初学者教程 Web 技术路线图框架 Web 开发人员的路线图 Web 初学者开发教程 The Modern JavaScript Tutorial JavaScript权威指南 点到面学习 flex Chrome 开发者工具 W3C官网 WHATWG官网 ECMA-TC39 JavaScript: the first 20 years

中级(研发链路/工程化基础、库、框架、性能优化、工作原理、综合能力、相关学习资源)

研发链路/工程化基础(脚手架(Scaffold)，包管理，开发，构建，代码规范，测试，CI/CD)

脚手架 (Scaffold)	脚手架 (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 覆盖率测试：istanbul
CI/CD	CI/CD：TravisCI，CircleCI，Codecov，Jenkins

库(原则，CSS，JS，动画，设计规范/组件，文档)

原则	原则：DRY
CSS	CSS 作用域：scoped css，css，modules，css-in-js  样式库：normalize.css，Bootstrap，Tailwind，Bulma
JS	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(基础，组件，状态管理，路由，样式，框架，周边生态)

基础	基础：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

性能优化(指标，评估工具，优化方案)

指标	指标 真实指标：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、避免表达式等），JS代码优化及评估 感官体验优化：骨架屏，Snapshot，Loading

工作原理(浏览器，JavaScirpt引擎)

浏览器	浏览器：DOM Tree、CSSOM 渲染、绘制，会话，事件循环，垃圾回收，Webkit 深入
JavaScirpt引擎	JavaScirpt引擎：V8，SpiderMonkey，JavaScriptCore

综合能力(知识管理，软件工程，交互设计，开源项目)

知识管理	知识管理：Markdown，脑图，wiki，GitBook
软件工程	软件工程：过程模型，需求分析，概念设计，体系结构设计，项目管理
交互设计	交互设计：交互原型，视觉还原
开源项目	开源项目：GitHub，OpenJS，Apache

相关学习资源

A curated list of command line apps 常用的前端库 Learn best practices for the modern web and hone your skills with hands-on codelabs Speed Launch Metrics Survey Measure performance with the RAIL model Front-End Performance Checklist 2021 Tutorial: Intro to React A collection of awesome things regarding the React ecosystem Ant Design 开源项目经验分享 业界流行的前端规范 The State of JavaScript Echo JS Frontend Focus Hacker News

高级(搭建、Node&Serverless、IDE、中后台、体验管理、数据可视化、工程体系、国际化、跨端技术、互动技术、智能化、多媒体)

搭建(搭建标准，搭建过程，终端渲染，搭建物料)

搭建标准	模块研发规范：Webpack Module Fedoration 模块依赖关系描述规范：Kissy Seed 模块数据描述规范：JSON Schema 规范
搭建过程	模块化搭建 数据投放 页面主题 页面插件 区块搭建
终端渲染	SSR 数据接口网关 国际化：跨国文件同步，多语言/多地区/多货币 多端渲染：终端识别 CDN+源站缓存架构
搭建物料	模块 区块 源码页面 页面容器

Node&Serverless(Serverless，DevOps，数据库，调度方式，Web Frameworks)

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开发

中后台(基础概念和规范，基础设施，开箱即用解决方案，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
基础概念	通用概念：场景，节点，组件， 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端研发解决方案：多场景组件识别样本制造，目标检测与图片分类模型训练，代码转换器 端智能解决方案：模型运算框架，常见业务模型能力，端智能工程能力

多媒体(音视频基础，直播技术，播放器技术，Web媒体技术)

音视频基础	基础概念 容器格式 编码格式
直播技术	推流 流媒体协议 流媒体服务
播放器技术	拉流 Demux 解码 Remux 渲染
Web媒体技术	流操作基础 WebRTC MSE WebAssembly WebXR WebGL 开源产品和框架 flv.js hls.js video.js FFmpeg OBS MLT