IT：前端進階技術(shù)路線圖(初級→中級→高級)之初級(研發(fā)工具/HTML/CSS/JS/瀏覽器)/中級(研發(fā)鏈路/工程化/庫/框架/性能優(yōu)化/工作原理)/高級(搭建/Node/IDE/中后臺/體驗管理/數(shù)據(jù)可視化/工程體系/國際化/跨端技術(shù)/互動技術(shù)/智能化/多媒體)之詳細攻略
參考文章：https://codechina./developer-roadmap/frontend/intro/
初級(前端基礎(chǔ)、研發(fā)工具、HTML、CSS、JavaScript、瀏覽器、相關(guān)學習資源)
前端基礎(chǔ)(客戶端/網(wǎng)絡(luò)/服務端/行業(yè)標準/ECMA-TC39)
| 客戶端 | 客戶端
瀏覽器：Chrome、Safari、Firefox
APP：小程序、WebView |
| 網(wǎng)絡(luò) | 網(wǎng)絡(luò)：Domain、TCP/IP、DNS、HTTP |
| 服務端 | 服務端
WebServer：Nginx、Apache HTTP Server、CDN
服務端語言：PHP、Java、Golang
數(shù)據(jù)庫
操作系統(tǒng) |
| 行業(yè)標準 | 行業(yè)標準
W3C/WHATWG：CSS標準，HTML、XHTML、XML、HTML5標準，DOM標準，SVG標準，小程序標準 |
| ECMA-TC39 | ECMA-TC39：EcmaScript標準、JavaScript標準 |
研發(fā)工具(編輯器/調(diào)試預覽/圖片編輯器/版本管理)
| 編輯器 | 編輯器：Sublime Text、Visual Studio Code、WebStorm |
| 調(diào)試預覽 | 調(diào)試預覽
瀏覽器調(diào)試工具：FireBug、Chrome DevTools
本地服務：file://、http://、SimpleHTTPServer
在線服務：CodePen、JSFiddle
網(wǎng)絡(luò)調(diào)試：hosts、Switchhosts，Debugging Proxy、Charles、wireshark |
| 圖片編輯器 | 圖片編輯器：Photoshop、Sketch |
| 版本管理 | 版本管理：Git、SVN |
HTML(元素/屬性/事件/編碼)
| 元素 | 元素
根元素：主根元素 html、分區(qū)根元素 body
元數(shù)據(jù)：base、head
內(nèi)容分區(qū)：header、footer
內(nèi)容：塊級內(nèi)容 div、dir，文字內(nèi)容 a、b、strong
圖片和多媒體：audio、img
內(nèi)嵌內(nèi)容：iframe、object
腳本：canvas、script
表格：table、tbody
表單：button、input
可交互元素：menu、menuitem |
| 屬性 | 屬性
常用屬性：class、id、style、title
全局屬性 |
| 事件 | 事件：窗口事件、表單事件、鍵盤事件、鼠標事件、多媒體事件 |
| 編碼 | 編碼：URL編碼、語言代碼、字符集 |
Html：網(wǎng)站設(shè)計的內(nèi)容概覽簡介、網(wǎng)頁設(shè)計流程/工具/內(nèi)容組成、腳本代碼之詳細攻略
https://blog.csdn.net/qq_42229253/article/details/127028358
CSS(語法/選擇器/定位/布局/樣式/動畫/應用)
| 語法 | 語法：@規(guī)則、層疊、注釋、解釋器、繼承、簡寫、優(yōu)先級、值定義、單位與取值類型 |
| 選擇器 | 選擇器：元素選擇器、選擇器分組、類選擇器、ID 選擇器、屬性選擇器、后代選擇器、子元素選擇器、相鄰選擇器、偽類、偽元素 |
| 定位 | 定位：position，top、left、bottom、right，z-index |
| 布局 | 布局：Box Model、FlexBox、Grid、Column |
| 樣式 | 樣式：背景、文本、輪廓、列表 |
| 動畫 | 動畫：Animation、transition |
| 應用 | 應用
響應式：em、vh/vw、%
自適應：@media、rem |
JavaScript(語法/數(shù)據(jù)類型深入/對象/函數(shù)/原型/類/異步流程控制/模塊化/異常捕獲)
| 語法 | 語法
值、變量
數(shù)據(jù)類型：基本類型、類型判斷、類型轉(zhuǎn)換
流程控制
運算（表達式、運算符）：數(shù)學、比較、邏輯
函數(shù)：函數(shù)聲明、函數(shù)表達式、回調(diào)函數(shù)、箭頭函數(shù) |
| 數(shù)據(jù)類型深入 | 數(shù)據(jù)類型深入：原始類型的方法，數(shù)字類型，字符串，數(shù)組，數(shù)組方法，Iterable object（可迭代對象），Map and Set（映射和集合），WeakMap and WeakSet（弱映射和弱集合），Object.keys、values、entries，解構(gòu)賦值，日期和時間，JSON序列化、反序列化 |
| 對象 | 對象：屬性/字面量，in 、for…in，對象引用，深拷貝、淺拷貝，Symbol，垃圾收集機制，this，new，Optional chaining '?.’，類型轉(zhuǎn)換Symbol.toPrimitive，Property flags、descriptors，getters、setters |
| 函數(shù) | 函數(shù)：調(diào)用棧，遞歸、尾遞歸，arguments、params spread，作用域、閉包，var、變量提升，IIFE、匿名自執(zhí)行函數(shù)，NFE、函數(shù)命名表達式，箭頭函數(shù)，new Function，setTimeout、setInterval，call、apply、bind，部分施用、柯里化 |
| 原型 | 原型：原型鏈、繼承，F.prototype，Object.prototype |
| 類 | 類：extend 繼承，方法重載，構(gòu)造函數(shù)，Super、[[HomeObject]]，靜態(tài)屬性、靜態(tài)函數(shù)，私有屬性、私有函數(shù)，混合、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/網(wǎng)絡(luò)/權(quán)限/安全與隱私/兼容性/開發(fā)者工具)
| 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 |
| 網(wǎng)絡(luò) | 網(wǎng)絡(luò)：XHR，Fetch，JSONP，WebSocket |
| 權(quán)限 | 權(quán)限：Cookie，Session，OAuth，SSO，JWT |
| 安全與隱私 | 安全與隱私：Content Security Policy (CSP)，CORS，XSS，CSRF，MITM，Samesite |
| 兼容性 | 兼容性：Can I Use，polyfill，shim，browserslist，Autoprefixer |
| 開發(fā)者工具 | 開發(fā)者工具：設(shè)備模式，元素面板，控制臺面板，源代碼面板，網(wǎng)絡(luò)面板，性能面板，內(nèi)存面板，應用面板，安全面板 |
相關(guān)學習資源()
|
- MDN Web 入門
- 友好的 Web 開發(fā)初學者教程
- Web 技術(shù)路線圖框架
- Web 開發(fā)人員的路線圖
- Web 初學者開發(fā)教程
- The Modern JavaScript Tutorial
- JavaScript權(quán)威指南
- 點到面學習 flex
- Chrome 開發(fā)者工具
- W3C官網(wǎng)
- WHATWG官網(wǎng)
- ECMA-TC39
- JavaScript: the first 20 years
|
中級(研發(fā)鏈路/工程化基礎(chǔ)、庫、框架、性能優(yōu)化、工作原理、綜合能力、相關(guān)學習資源)
研發(fā)鏈路/工程化基礎(chǔ)(腳手架(Scaffold)，包管理，開發(fā)，構(gòu)建，代碼規(guī)范，測試，CI/CD)
| 腳手架 (Scaffold) | 腳手架 (Scaffold)
CLI（command-line interface）：commander，inquirer，ora，chalk，emoji
初始化（Boilerplate）：create-react-app，umi，vue-cli |
| 包管理 | 包管理：NPM、Yarn |
| 開發(fā) | 開發(fā)：dev-server，hot-reload，mock，proxy |
| 構(gòu)建 | 構(gòu)建
構(gòu)建器：gulp，Webpack，snowpack，vite
JS編譯：tsc，babel，esbuild
CSS編譯：Sass，Less，Stylus，PostCSS |
| 代碼規(guī)范 | 代碼規(guī)范
業(yè)界流行規(guī)范：Airbnb Style Guide，StandardJS，Google Style Guide，阿里巴巴前端規(guī)約
CSS命名規(guī)范：BEM，OOCSS，SMACSS?
工具：ESLint，stylelint，commitlint，Prettier（代碼格式化），husky 和 lint-staged（流程控制），F2ELint（阿里前端規(guī)約配套的Lint工具） |
| 測試 | 測試
單元測試：jasmine，mocha，jest，enzyme?
E2E測試：Selenium，karma，cypress，Puppeteer，Appium
覆蓋率測試：istanbul |
| CI/CD | CI/CD：TravisCI，CircleCI，Codecov，Jenkins |
庫(原則，CSS，JS，動畫，設(shè)計規(guī)范/組件，文檔)
| 原則 | 原則：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?
網(wǎng)絡(luò)：axios，got?
數(shù)據(jù)流：rxjs，Immer
模板引擎 |
| 動畫 | 動畫：CSS動畫，JS動畫，Lottie |
| 設(shè)計規(guī)范/組件 | 設(shè)計規(guī)范/組件：Material Design，Apple Human Interface Guidelines，Ant Design，WeUI，mini-ali-ui |
| 文檔 | 文檔：jsdoc，bisheng，dumi，Storybook |
框架React(基礎(chǔ)，組件，狀態(tài)管理，路由，樣式，框架，周邊生態(tài))
| 基礎(chǔ) | 基礎(chǔ)：JSX，生命周期，Hooks，Immutable? |
| 組件 | 組件：AntDesign，material-ui |
| 狀態(tài)管理 | 狀態(tài)管理：Redux，Dva，Mobx，xState |
| 路由 | 路由 |
| 樣式 | 樣式：classnames，styled-components? |
| 框架 | 框架：Next.js，Gatsby，react-admin，Ant Design Pro |
| 周邊生態(tài) | 周邊生態(tài)：React Native，preact、remax、rax、taro |
性能優(yōu)化(指標，評估工具，優(yōu)化方案)
| 指標 | 指標
真實指標：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 |
| 優(yōu)化方案 | 優(yōu)化方案
壓縮：代碼壓縮，文本壓縮（gzip、Brotli、Zopfli等），Tree-shaking，Code-splitting
圖片優(yōu)化：小圖優(yōu)化（css sprite、iconfont、dataURI、svg），圖片格式選擇，壓縮（如tinypng），響應式?
加載策略：懶加載，DNS預解析、預加載、預渲染，離線化（ServiceWorker、AppCache、離線包等），HTTP緩存，數(shù)據(jù)緩存（localStorage、sessionStorage），資源加載（順序、位置、異步等），請求合并 HTTP2，CDN，服務端渲染
執(zhí)行渲染：CSS代碼優(yōu)化（選擇器、啟用GPU、避免表達式等），JS代碼優(yōu)化及評估
感官體驗優(yōu)化：骨架屏，Snapshot，Loading |
工作原理(瀏覽器，JavaScirpt引擎)
| 瀏覽器 | 瀏覽器：DOM Tree、CSSOM 渲染、繪制，會話，事件循環(huán)，垃圾回收，Webkit 深入 |
| JavaScirpt引擎 | JavaScirpt引擎：V8，SpiderMonkey，JavaScriptCore |
綜合能力(知識管理，軟件工程，交互設(shè)計，開源項目)
| 知識管理 | 知識管理：Markdown，腦圖，wiki，GitBook |
| 軟件工程 | 軟件工程：過程模型，需求分析，概念設(shè)計，體系結(jié)構(gòu)設(shè)計，項目管理 |
| 交互設(shè)計 | 交互設(shè)計：交互原型，視覺還原 |
| 開源項目 | 開源項目：GitHub，OpenJS，Apache |
相關(guān)學習資源
|
- 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 開源項目經(jīng)驗分享
- 業(yè)界流行的前端規(guī)范
- The State of JavaScript
- Echo JS
- Frontend Focus
- Hacker News
|
高級(搭建、Node&Serverless、IDE、中后臺、體驗管理、數(shù)據(jù)可視化、工程體系、國際化、跨端技術(shù)、互動技術(shù)、智能化、多媒體)
搭建(搭建標準，搭建過程，終端渲染，搭建物料)
| 搭建標準 | 模塊研發(fā)規(guī)范：Webpack Module Fedoration 模塊依賴關(guān)系描述規(guī)范：Kissy Seed 模塊數(shù)據(jù)描述規(guī)范：JSON Schema 規(guī)范 |
| 搭建過程 | 模塊化搭建
數(shù)據(jù)投放
頁面主題
頁面插件
區(qū)塊搭建 |
| 終端渲染 | SSR
數(shù)據(jù)接口網(wǎng)關(guān)
國際化：跨國文件同步，多語言/多地區(qū)/多貨幣
多端渲染：終端識別
CDN+源站緩存架構(gòu) |
| 搭建物料 | 模塊
區(qū)塊
源碼頁面
頁面容器 |
Node&Serverless(Serverless，DevOps，數(shù)據(jù)庫，調(diào)度方式，Web Frameworks)
| Serverless | Serverless 框架：Midway Serverless
應用：云端一體化研發(fā)，服務編排，App Serverless 云平臺
公有云平臺AWS Lambda、阿里云 FC、騰訊 SCF
私有化平臺K8S + KNative + ServiceMesh |
| DevOps | 進程管理：PM2、forever
日志
負載均衡
Shell 命令
Docker
性能監(jiān)控：Alinode，Easy Monitor
web 服務器：Nginx，Tengine |
| 數(shù)據(jù)庫 | 關(guān)系型數(shù)據(jù)庫：MySQL、PostgreSQL
非關(guān)系型數(shù)據(jù)庫：MongoDB、Redis、LiteDB
API Clients：REST、GraphQL |
| 調(diào)度方式 | RPC：gRPC，dubbo，dnode
任務調(diào)度：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基礎(chǔ)功能模塊之間一種解耦方式，同時提供部分內(nèi)置命令供插件調(diào)用
File Service：文件服務抽象，提供FS Provider接口，可以基于 Node.js fs實現(xiàn)本地文件讀寫，或基于BrowserFS、MemoryFS等實現(xiàn)純前端的- 文件系統(tǒng)
Storage：IDE存儲服務，管理IDE如用戶設(shè)置及插件配置等緩存內(nèi)容
Theme/Syntax highlighting：CSS variables、Textmate、vscode-oniguruma |
| 支撐服務 | 插件市場：Egg、OSS 、權(quán)限管控，Group、Client分組
日志服務：spdlog
更新服務：electron-updater、差量更新
容器服務：K8S、Docker、Pounch |
| 核心能力 | 通信服務：遵循基于JSONRPC 2.0協(xié)議，使用vscode-jsonrpc
插件體系：兼容VS Code插件協(xié)議，自有KAITIAN插件API擴展
編輯器（LSP）：Monaco Editor、Language Server Protocol
調(diào)試服務：Debug Adapter Protocol |
| 功能模塊 | 資源管理：文件樹虛擬列表
Terminal：node-pty、xterm、斷連恢復
SCM 源代碼管理：源代碼管理抽象接口，通過Git等插件實現(xiàn)
Layout：可擴展、高自由度、配置化插槽 |
| 場景 | Local：小程序開發(fā)者工具，ProCode開發(fā)
Cloud：模塊搭建，D2C，LowCode開發(fā) |
中后臺(基礎(chǔ)概念和規(guī)范，基礎(chǔ)設(shè)施，開箱即用解決方案，SaaS產(chǎn)品)
| 基礎(chǔ)概念和規(guī)范 | 中后臺領(lǐng)域名詞定義：物料（組件/區(qū)塊/模板）、低代碼引擎、微前端
中后臺物料規(guī)范：文件目錄、API、國際化、無障礙
中后臺低代碼搭建協(xié)議規(guī)范：協(xié)議結(jié)構(gòu)、低代碼物料描述、應用描述
微前端規(guī)范：主應用、子應用、微模塊、生命周期函數(shù)
模型驅(qū)動數(shù)據(jù)模型描述協(xié)議規(guī)范：協(xié)議元信息、業(yè)務模型、API實例描述 |
| 基礎(chǔ)設(shè)施 | 基礎(chǔ)UI組件庫：aterial UI、AntD
物料腳手架：組件開發(fā)、模板開發(fā)
物料中心 / 資產(chǎn)中心：資產(chǎn)包
lowcode 引擎：入料模塊、編排模塊、渲染模塊、出碼模塊、大綱面板、編輯面板、屬性面板、屬性設(shè)置器 |
| 開箱即用解決方案 | 表單組件：動態(tài)表單
列表組件
圖表組件庫：ECharts、AntV、BizCharts
WebExcel SDK：SpreadJS
場景設(shè)計器 SDK：頁面設(shè)計器、表單設(shè)計器、流程設(shè)計器、圖表設(shè)計器
UIPaaS
微前端：single-spa、qiankun、icestark
模型驅(qū)動 SDK
工作臺 SDK |
| SaaS產(chǎn)品 | 在線設(shè)計：Figma
在線研發(fā)（Web IDE）：阿里云開發(fā)平臺
No-Code / Low-Code 研發(fā)平臺：Power Apps、outsystems、salesforce lightning、云鳳蝶、宜搭 |
體驗管理(體驗模型設(shè)計，體驗數(shù)據(jù)采集，體驗分析方法，數(shù)據(jù)洞察方法，體驗工具、平臺)
| 體驗模型設(shè)計 | 體驗指標
體驗模型 |
| 體驗數(shù)據(jù)采集 | 行為數(shù)據(jù)采集
穩(wěn)定性數(shù)據(jù)采集
性能數(shù)據(jù)采集 |
| 體驗分析方法 | 任務分析：任務耗時、任務轉(zhuǎn)化率、任務完成數(shù)等
表單分析：表單提交耗時、表單提交成功率、表單出錯率等
主觀分析：滿意度（PSAT、CSAT）、凈推薦值（NPS）、客戶費力度（CES）等
用戶反饋：工單、評價、反饋等
行為分析：行為流、熱力圖、網(wǎng)站旅程等
可用性測試
用戶驗收 |
| 數(shù)據(jù)洞察方法 | 多維分析：指標、維度、篩選項概念；數(shù)據(jù)立方(cube)的旋轉(zhuǎn)(rotation)、切片與切塊(slice and dice)、鉆取(drill-down)等操作
驅(qū)動因子分析（歸因分析）：啟發(fā)式歸因、算法歸因（logistics回歸、生存模型、probabilistic模型等）
行為預測：FM模型、FNN模型、PNN模型等 |
| 體驗工具、平臺 | APM平臺：Sentry、ARMS、Fundebug等
體驗數(shù)據(jù)平臺：hotjar、fullstory、mixpanel等
綜合數(shù)據(jù)平臺：GrowingIO、友盟、Google Analytics等 |
數(shù)據(jù)可視化(技術(shù)標準，數(shù)理統(tǒng)計，圖形美學，可視化基礎(chǔ)概念，圖表類庫/可視化框架，領(lǐng)域方案)
| 技術(shù)標準 | Canvas
SVG
WebGL/2
WebGPU
OpenGL |
| 數(shù)理統(tǒng)計 | 統(tǒng)計學
平面幾何
線性代數(shù)
離散數(shù)學 |
| 圖形美學 | 色彩
圖形
動畫
格式塔理論 |
| 可視化基礎(chǔ)概念 | 數(shù)據(jù)類型
視覺通道與映射
信息密度
可視化隱喻
圖形符號學與圖形語法
基礎(chǔ)圖表類型：折線圖，柱形圖（條形圖），餅狀圖（環(huán)型圖），散點圖（氣泡圖），雷達圖，地圖，多維表格，其他 繪圖引擎：2D、3D |
| 圖表類庫/可視化框架 | 基礎(chǔ)可視化框架：D3，G2，Vega
常用統(tǒng)計圖表：Chartjs，ECharts，Highcharts
圖分析與編排：Cytoscape，G6，mxGraph，Sigma.js，X6
地理空間可視化：Leaflet，L7，Mapbox，PolyMaps |
| 領(lǐng)域方案 | 監(jiān)控可視化
關(guān)系可視分析
金融數(shù)據(jù)可視化
商業(yè)智能可視化 |
工程體系(初始化，開發(fā)，構(gòu)建，檢查，發(fā)布)
| 初始化 | 工程模板
物料
最佳實踐 |
| 開發(fā) | Code Lint
Mock
Debug/Preview |
| 構(gòu)建 | 前端資源構(gòu)建
其他語言如(Typescript) |
| 檢查 | 單測/E2E
安全掃描
CI & CD
Code Review |
| 發(fā)布 | 監(jiān)控：上報標準，監(jiān)控平臺，告警診斷
安全生產(chǎn)：前端安全環(huán)境，攻防演練，變更管控
自動化 |
國際化(多語言，本地化，體驗度量，極致性能)
| 多語言 | 標準文案
翻譯術(shù)語庫
文案本地化測試
自動文案溯源
多語言banner
RTL |
| 本地化 | 本地化通用組件
Locale Data
CLDR-SDK
全球化數(shù)字地圖
本地化開發(fā)規(guī)約
? |
| 體驗度量 | 標準設(shè)計規(guī)范
體驗度量
用研工具 |
| 極致性能 | CDN&網(wǎng)絡(luò)鏈路
資源域名
海外性能監(jiān)控
地區(qū)化實驗環(huán)境
端性能
差異化投放 |
跨端技術(shù)(跨端解決方案，一碼多端，跨端，API，跨端搭建，跨端組件，跨端性能)
| 跨端解決方案 | 跨平臺：Web，Electron
移動端：Hybrid，ReactNative/Weex，Flutter |
| 一碼多端 | 規(guī)范：W3C/WHATWG，小程序，其他（XML、Dart）
框架：增強型，編譯時，運行時 |
| 跨端 API | 橋接與通信：JSBridge
跨端 API 規(guī)范
平臺配套：BridgeSDK，自動化測試，CanIUse |
| 跨端搭建 | 標準與規(guī)范：物料規(guī)范，搭建協(xié)議
一碼多搭：Web，小程序，原生 Native
跨端調(diào)試：DevTools，模擬器調(diào)試，真機調(diào)試
統(tǒng)一發(fā)布 |
| 跨端組件 | 標準與規(guī)范：腳手架，文件結(jié)構(gòu)，屬性與 API，發(fā)布與引用
視覺交互：自適應，平臺特性
跨端組件：跨容器（H5/小程序），跨平臺（PC/無線） |
| 跨端性能 | 性能優(yōu)化最佳實踐：CSR，NSR，SSR，渲染容器優(yōu)化
性能指標：FCP，LCP，TTI，TBT
性能采集：性能埋點，SDK，采樣與分析
性能大盤：OLAP，數(shù)據(jù)可視化 |
互動技術(shù)(技術(shù)標準，基礎(chǔ)概念，互動引擎，基礎(chǔ)知識，工程體系，基礎(chǔ)組件，核心能力輸出)
| 技術(shù)標準 | CSS，Canvas，SVG，WebGL，WebGPU，OpenGL，Metal，Vulkan |
| 基礎(chǔ)概念 | 通用概念：場景，節(jié)點，組件，
3D概念：相機，燈光，材質(zhì)，著色器，網(wǎng)格，后處理，環(huán)境渲染 |
| 互動引擎 | 渲染引擎：2D，3D
物理引擎
動畫引擎
聲音引擎
GUI，引擎
VR/AR，引擎 |
| 基礎(chǔ)知識 | 圖形學
數(shù)學
物理學 |
| 工程體系 | 工具：調(diào)試工具，腳手架，IDE，插件
可視化編輯器：
資產(chǎn)庫：美術(shù)資產(chǎn)，玩法資產(chǎn)
搭建體系：
研發(fā)平臺： |
| 基礎(chǔ)組件 | 降級方案：機型設(shè)備降級，特性降級，客戶端版本降級
設(shè)備特性：設(shè)備輸入，傳感器，VR/AR
容器適配：Web，小程序/輕應用，小游戲 |
| 核心能力輸出 | 動畫
微交互
游戲
VR/AR、全景
工業(yè)化渲染
多媒體：直播、音頻、長短/視頻等 |
智能化(總結(jié)展望，前端算法框架，商業(yè)化能力，研發(fā)能力，業(yè)務能力)
| 總結(jié)展望 | 理論
技術(shù)
工程體系 |
| 前端算法框架 | Tensorflow.js
datacook：特征工程，數(shù)據(jù)可視化，傳統(tǒng)機器學習算法
Pipcook：神經(jīng)網(wǎng)絡(luò)算法概述，如何定義神經(jīng)網(wǎng)絡(luò)，前端機器學習生態(tài)（Boa），模型部署，模型優(yōu)化 |
| 商業(yè)化能力 | 數(shù)據(jù)
模型 |
| 研發(fā)能力 | D2C視覺稿轉(zhuǎn)編碼：imgcook代碼生成原理
P2C PRD轉(zhuǎn)編碼
S2C服務轉(zhuǎn)編碼：業(yè)務邏輯點識別與生成能力
C2C編碼轉(zhuǎn)編碼 |
| 業(yè)務能力 | C端研發(fā)解決方案：自定義DSL，自定義組件，自定義Model，自定義編輯器插件，接口服務調(diào)用
B端研發(fā)解決方案：多場景組件識別樣本制造，目標檢測與圖片分類模型訓練，代碼轉(zhuǎn)換器
端智能解決方案：模型運算框架，常見業(yè)務模型能力，端智能工程能力 |
多媒體(音視頻基礎(chǔ)，直播技術(shù)，播放器技術(shù)，Web媒體技術(shù))
| 音視頻基礎(chǔ) | 基礎(chǔ)概念
容器格式
編碼格式 |
| 直播技術(shù) | 推流
流媒體協(xié)議
流媒體服務 |
| 播放器技術(shù) | 拉流
Demux
解碼
Remux
渲染 |
| Web媒體技術(shù) | 流操作基礎(chǔ)
WebRTC
MSE
WebAssembly
WebXR
WebGL
開源產(chǎn)品和框架
flv.js
hls.js
video.js
FFmpeg
OBS
MLT |
