前端大师修炼路线

前端技术排名网站：https://risingstars.js.org/2022/zh

构建可在任何浏览器上运行的现代 Web 体验的指南

大前端

全能全栈工程师

页面设计 => UI 工程师 => 图形相关算法相关
后台开发 => DBA Nodeis 工程师 || Python Java
产品需求 => 产品经理 => 项目经理
测试自动化 => 测试工程师||AI 工程师 => 性能||多端 Andriod/iOS
全栈开发 => 架构师 => CTO

第一步：前端前置知识

1、网络

互联网是如何工作的？
- 参考阅读 1：https://developer.mozilla.org/zh-CN/docs/Learn/Common_questions/How_does_the_Internet_work
- 参考阅读 2：How Does the Internet Work? (stanford.edu)
什么是 HTTP？
- 参考阅读 1：关于 HTTP 协议，一篇就够了 - 简书 (jianshu.com)
- 参考阅读 2：What is HTTP? | Cloudflare
浏览器及其工作原理
- 参考阅读 1：javascript - 前端都该懂的浏览器工作原理，你懂了吗？ - 麦乐 - SegmentFault 思否
- 参考阅读 2：How browsers work (web.dev)
DNS 及其工作原理
- 参考阅读 1：www.what21.com
- 参考阅读 2：What is DNS? | How DNS works | Cloudflare
域名
- 参考阅读 1：什么是域名？ - 学习 Web 开发 | MDN (mozilla.org)
- 参考阅读 2：https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_domain_name
什么是主机?
- 参考阅读：一文告诉你主机和服务器的区别和联系 - 腾讯云开发者社区-腾讯云 (tencent.com)
- 参考视频：www.youtube.com
TCP/IP
- 参考阅读：TCP/IP: What is TCP/IP and How Does it Work? (techtarget.com)

2、客户端

浏览器
Chrome
Safari
Firefox
IE
APP
小程序
WebView

3、服务端

WebServer
服务端语⾔
数据库
操作系统

4、前端研发工具

编辑器
调试预览
图片编辑器
版本管理

第二步：前端入⻔

1、HTML

HTML 元素和属性：
- 元素 Elements
- 属性 Attributes
- 标题 H1-H6
- 段落 P
- 样式 Style
- 格式 Formatting
- 引用和引文元素 Quotations
- 注释 Comments
- 颜⾊ Colors
- 图片 Images
- 行内和块元素 Block & Inline
- 文件路径 File Paths
- 表格 Tables
- 列表 Lists
HTML 表单
- 什么是 HTML 表单参考链接：HTML Forms (w3schools.com)
- 表单属性参考链接：HTML Form Attributes (w3schools.com)
- 表单元素参考链接：HTML Form Elements (w3schools.com)
- Input 类型参考链接：HTML Input Types (w3schools.com)
- Input 属性参考链接：HTML Input Attributes (w3schools.com)
- Input 表单属性参考链接：HTML Input form* Attributes (w3schools.com)
HTML 图形处理
- Canvas 参考链接：HTML Canvas (w3schools.com)
- SVG 参考链接：SVG Tutorial (w3schools.com)
HTML 媒体
- Video 参考链接：HTML Video (w3schools.com)
- Audio 参考链接：HTML Audio (w3schools.com)
- Plug-ins 参考链接：HTML Plug-Ins (w3schools.com)
HTML APIs
- HTML Geolacation 参考链接：HTML Geolocation API (w3schools.com)
- HTML Drag/Drop 参考链接：HTML Drag and Drop API (w3schools.com)
- HTML Web Storage 参考链接：HTML Web Storage API (w3schools.com)
- HTML Web Workers 参考链接：HTML Web Workers API (w3schools.com)
HTML 最佳实践参考链接：html-best-practices/README.zh-CN.md at main · hail2u/html-best-practices (github.com)
可访问性
- 参考链接 1：Accessibility Tutorial (w3schools.com)
- 参考链接 2：A Complete Guide To Accessible Front-End Components — Smashing Magazine
SEO 基础
- 参考链接 1：developers.google.com
- 参考链接 2：seo/guide (github.com)
- 参考链接 3：medium.com

2、CSS

语法
- @规则
- 层叠
- 注释
- 解释器
- 继承
- 简写
- 优先级
- 值定义
- 单位与取值类型
选择器：
- 元素选择器
- 选择器分组
- 类选择器
- ID 选择器
- 属性选择器
- 后代选择器
- 子元素选择器
- 相邻选择器
- 伪类
- 伪元素
样式
布局
- 盒模型：盒模型 - 学习 Web 开发 | MDN (mozilla.org)
  - box-sizing
  - margin、padding、border、content
- 定位：定位 - 学习 Web 开发 | MDN (mozilla.org)
  - position
  - top、left、bottom、right
  - z-index
- 浮动：浮动 - 学习 Web 开发 | MDN (mozilla.org)
  - float
  - 浮动清理
- 显示：display - CSS: Cascading Style Sheets | MDN (mozilla.org)
  - display
  - visibility
- 网格布局：网格布局的基本概念 - CSS（层叠样式表） | MDN (mozilla.org)
  - CSS Grid
- 弹性盒布局：flex 布局的基本概念 - CSS（层叠样式表） | MDN (mozilla.org)
  - Flex Box
- 移动端布局方案：简述移动端常见的布局方式 - 走看看 (zoukankan.com)
  - em、rem、vw/vh、100%
响应式设计和媒体查询
- 参考资料 1：Responsive Web Design Introduction (w3schools.com)
- 参考资料 2：响应式设计 - 学习 Web 开发 | MDN (mozilla.org)
动画
- Animation：animation - CSS（层叠样式表） | MDN (mozilla.org)
- Transition：transition - CSS（层叠样式表） | MDN (mozilla.org)

3、W3C/WHATWG 行业标准

CSS 标准：Cascading Style Sheets (w3.org)
HTML、XHTML、XML、HTML5 标准：HTML Standard (whatwg-cn.github.io)
SVG 标准：Scalable Vector Graphics (SVG) 1.1 (Second Edition) (w3.org)
DOM 标准：DOM Standard (whatwg.org)
小程序标准：MiniApp Standardization White Paper version 2 (w3.org)

第三步：JavaScript

1、语法

值、变量
数据类型
- 基本类型
- 类型判断
- 类型转换
流程控制
运算（表达式、运算符）
- 数学方法
- 比较
- 逻辑运算
函数：函数 - JavaScript | MDN (mozilla.org)
- 函数声明
- 函数表达式
- 回调函数
- 箭头函数

2、数据类型深入

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures

原始类型的方法
数字类型
字符串
数组
数组方法
Iterable object（可迭代对象）
Map and Set（映射和集合）
WeakMap and WeakSet（弱映射和弱集合）
Object.keys，values，entries
解构赋值
⽇期和时间
JSON 序列化、反序列化

3、对象

JavaScript 深入之变量对象 · Issue #5 · mqyqingfeng/Blog (github.com)

属性/字面量
in、for...in
对象引用
深拷⻉、浅拷⻉
Symbol
垃圾收集机制
this
new
Optional chaining '?.'
类型转换 Symbol.toPrimitive
Property flags、descriptors
getters、setters

4、函数

函数 - JavaScript | MDN (mozilla.org)

调用栈
递归、尾递归
arguments、params spread
作用域、闭包
var、变量提升
IIFE、匿名执行函数
NFE、函数命名表达式
箭头函数
new Function
setTimeout、setInterval
call、apply、bind
柯里化、反柯里化
执行上下文

5、原型

JavaScript 深入之从原型到原型链 · Issue #2 · mqyqingfeng/Blog (github.com)

原型链、继承
F.prototype
Object.prototype

6、类

类 - JavaScript | MDN (mozilla.org)

extend 继承
方法重载
构造函数
Super、
静态属性、静态函数
私有属性、私有函数
混合、Mixins

7、异步流程控制

ES6 系列之我们来聊聊 Promise · Issue #98 · mqyqingfeng/Blog (github.com)

Callback
Promise
async/await
generator
iterable

8、模块化

ES6 系列之模块加载方案 · Issue #108 · mqyqingfeng/Blog (github.com)

CommonJS
amd、cmd、umd
es-module

9、异常捕获

try...catch - JavaScript | MDN (mozilla.org)

try...catch...finally
throw
Error

第四步：浏览器

1、DOM

DOM Tree
DOM Node
DOM Query
DOM Properties
DOM Modify
Styles
Coordinates、Element Scrolling
DOM Events
- UI Event
- Bubbling and Capturing
- Event Delegate

2、浏览器 API

Location
History
Navigator
Default Actions
- event.preventDefault()
Form
- change、focus、blur、submit

3、网络

同步和异步请求 - Web API 接口参考 | MDN (mozilla.org)

XHR
Fetch
JSONP
WebSocket

4、权限

Cookie：Cookie - HTTP | MDN (mozilla.org)
Session：Cookie 与 Session - 知乎 (zhihu.com)
OAuth：oAuth_百度百科 (baidu.com)
SSO：什么是单点登录（SSO） - 知乎 (zhihu.com)
JWT：JSON Web Tokens - jwt.io

5、安全与隐私

6、兼容性

Can I Use：Can I use... Support tables for HTML5, CSS3, etc
polyfill：Polyfill 简介 - 简书 (jianshu.com)
shim：shim 是什么？ - 简书 (jianshu.com)
browserslist：browserslist 详解 - 简书 (jianshu.com)
Autoprefixer：Autoprefixer-css 神器 - 简书 (jianshu.com)

7、开发者工具

developer.chrome.com

设备模式
元素面板
控制台面板
源代码面板
网络面板
性能面板
内存面板
应用面板
安全面板

8、ECMA-TC39 行业标准

ECMAScript 标准：Ecma TC39 (github.com)
JavaScript 标准

第五步：工程化基础

第六步：前端库与框架

1、CSS 库

作用域
- scoped css：如何理解 Scoped CSS - 知乎 (zhihu.com)
- css modules：什么是 CSS Modules ？我们为什么需要他们 - 热爱前端知识 - 博客园 (cnblogs.com)
- css-in-js
  - styled-jsx：vercel/styled-jsx: Full CSS support for JSX without compromises (github.com)
  - styled-components：styled-components: Documentation
  - emotion：Emotion – Introduction
- aphrodite：Khan/aphrodite: Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation (github.com)
样式库
- normalize.css：Normalize.css: Make browsers render all elements more consistently. (necolas.github.io)
- Bootstrap：Bootstrap 中文网 (bootcss.com)
- Tailwind：Tailwind CSS 中文文档 - 无需离开您的 HTML，即可快速建立现代网站。
- Bulma：Bulma: Free, open source, and modern CSS framework based on Flexbox

2、JS 库

工具类
- history：remix-run/history: Manage session history with JavaScript (github.com)
- path-to-regexp：pillarjs/path-to-regexp: Turn a path string such as /user/:name into a regular expression (github.com)
- lodash：Lodash
- fastclick：ftlabs/fastclick: Polyfill to remove click delays on browsers with touch UIs (github.com)
- date-fns：date-fns - modern JavaScript date utility library
网络类：
- axios：Axios (axios-http.com)
- got：vinnichase/got: got is a fluent, functional, zero-dependency, in-memory JavaScript graph database. (github.com)
数据流
- rxjs：RxJS
- Immer：Introduction to Immer | Immer (immerjs.github.io)
模板引擎
- Art-template：art-template (aui.github.io)
- handlebars：Handlebars (handlebarsjs.com)
- ejs：EJS -- 嵌入式 JavaScript 模板引擎 | EJS 中文文档 (bootcss.com)
动画库
- CSS 动画：使用 CSS 动画 - CSS（层叠样式表） | MDN (mozilla.org)
  - animate.css：Animate.css | A cross-browser library of CSS animations.
  - animista：Animista - On-Demand CSS Animations Library
- JS 动画：高级动画 - Web API 接口参考 | MDN (mozilla.org)
  - velocity.js：Velocity.js (velocityjs.org)
  - tween.js：tween.js | JavaScript animation engine (tweenjs.github.io)
- Lottie：Lottie Docs (airbnb.io)
组件库
- Material Design：material.io
- Ant Design：Ant Design - 一套企业级 UI 设计语言和 React 组件库
- Vant：Vant 4 - 轻量、可靠的移动端组件库 (gitee.io)
- Element：Element - 网站快速成型工具
文档
- jsdoc：Use JSDoc: Index
- storybook：Introduction to Storybook

3、框架

React：
- redux.js：Redux - A predictable state container for JavaScript apps. | Redux
- mobx：README · MobX 🇺🇦
- recoil：Recoil (recoiljs.org)
- react-router：Home v6.7.0 | React Router
Vue：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
- vuex：Vuex 是什么？ | Vuex (vuejs.org)
- vue-router：Home | Vue Router (vuejs.org)
Angular：Angular - Getting started with Angular
- RxJS：RxJS - Introduction
- NgRx：NgRx - What is NgRx?link

4、类型检查

TypeScript：TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)
Flow：Flow: A Static Type Checker for JavaScript | Flow

第七步：小程序

1、小程序生态

2、跨端小程序开发

uni-app：uni-app 官网 (dcloud.net.cn)
taro：Taro 介绍 | Taro 文档 (jd.com)
kbone：kbone 是什么？ | wechat-miniprogram / kbone

第⼋步：大前端开发

1、移动应用开发

React Native：React Native · Learn once, write anywhere
NativeScript：NativeScript
Flutter：Flutter - Build apps for any screen
Ionic：Ionic Framework - The Cross-Platform App Development Leader
HarmonyOS 鸿蒙：HarmonyOS 应用开发官网 - 华为 HarmonyOS 打造全场景新服务

2、桌面应用开发

Electron：Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron (electronjs.org)
NW.js：NW.js (nwjs.io)

3、PWA

参考资料 1：What is a PWA? Progressive Web Apps for Beginners (freecodecamp.org)
参考资料 2：Learn PWA (web.dev)
参考链接 3：渐进式 Web 应用（PWA） | MDN (mozilla.org)

4、Web Assembly

https://webassembly.org

第九步：性能优化

1、指标

真实指标
- 1、First Contentful Paint (FCP)：First Contentful Paint 首次内容绘制 (FCP) (web.dev)
- 2、Largest Contentful Paint (LCP)：Largest Contentful Paint 最大内容绘制 (LCP) (web.dev)
- 3、First Input Delay (FID)：First Input Delay 首次输入延迟 (FID) (web.dev)
- 4、Cumulative Layout Shift (CLS)：Cumulative Layout Shift 累积布局偏移 (CLS) (web.dev)
实验室指标
- Total Blocking Time (TBT)：Total Blocking Time 总阻塞时间 (TBT) (web.dev)
- Time to Interactive (TTI)：Time to Interactive 可交互时间 (TTI) (web.dev)

2、评估工具

Chrome DevTools：developer.chrome.com
LightHouse：developers.google.com
PageSpeed Insights：developers.google.com
WebPageTest：www.webpagetest.org

3、优化方案

压缩
- 代码压缩：UglifyJS — JavaScript parser, compressor, minifier written in JS (lisperator.net)
- 文本压缩（gzip、Brotil、Zopfli 等）
- Tree-shaking：Tree Shaking | webpack 中文文档 (docschina.org)
- Code-splitting：代码分离 | webpack 中文文档 (docschina.org)
图片优化
- 小图优化
  - css sprite：www.w3schools.com
  - iconfont：iconfont-阿里巴巴矢量图标库
  - dataURI：Data URI 学习要点总结 - 知乎 (zhihu.com)
  - svg：SVG 教程 - SVG：可缩放矢量图形 | MDN (mozilla.org)
- 图片格式选择
- 压缩：tinypng 网站工具：TinyPNG – 智能压缩您的 WebP、JPEG 和 PNG 图片 (tinify.cn)
加载策略
- 懒加载：彻底玩转图片懒加载及底层实现原理 (baidu.com)
- DNS 预解析：你知道 DNS 预解析吗？ - 简书 (jianshu.com)
- 预加载和预渲染：前端性能优化之预加载和预渲染 | 码农家园 (codenong.com)
- 离线化（ServiceWorker、AppCache、离线包等）：前端离线化探索 | AlloyTeam
- HTTP 缓存：简单谈下 HTTP 缓存 - 知乎 (zhihu.com)
- 数据缓存（localStorage、sessionStorage）：数据缓存的处理 - 简书 (jianshu.com)
- 资源加载（顺序、位置、异步等）：前端性能优化-加载优化欧菲斯集团的博客-CSDN 博客前端加载优化
- 请求合并：请求合并的 3 种方式，大大提高接口性能！_公众号:肉眼品世界的博客-CSDN 博客
- HTTP2：一文读懂 HTTP/2 特性 - 知乎 (zhihu.com)
- CDN：CDN 是什么？使用 CDN 有什么优势？ - 知乎 (zhihu.com)
- 服务端渲染
  - React 2
  - Angular Universal：Angular - Server-side rendering (SSR) with Angular Universal
  - Vue.js Nuxt.js：Nuxt - The Intuitive Vue Framework (nuxtjs.org)
执行渲染：网页渲染性能优化 —— 性能优化上 - 知乎 (zhihu.com)
- CSS 代码优化（选择器、启用 GPU、避免表达式）：21 种 CSS 优化技巧帮助提高你的网站速度！ (mockplus.cn)
- 使用 RequestAnimationFrame 实现视觉变化：requestAnimationFrame 详解以及无线页面优化-前端开发博客 (caibaojian.com)
- 降低复杂度或使用 Web Worker
- 避免大型、复杂的布局和布局抖动
- 简化绘制复杂度、减少绘制区域
- 输入处理程序防抖
感官体验优化：Skeleton Loader Example – How to Build a Skeleton Screen with CSS for Better UX (freecodecamp.org)
- ⻣架屏
- Snapshot
- Loading

第⼗步：工作原理

1、浏览器

DOM Tree
CSSOM
渲染、绘制
会话
事件循环
垃圾回收
Webkit 深入
引擎
- Trident
- Gecko
- Presto
- Webkit：WebKit/WebKit: Home of the WebKit project, the browser engine used by Safari, Mail, App Store and many other applications on macOS, iOS and Linux. (github.com)
- Webkit2
- Blink
- Chromium：source.chromium.org

2、JavaScript 引擎

V8
SpiderMonkey
JavaScriptCore

第⼗一步：Node.js

1、Serverless

Serverless 框架
- 腾讯云 Serverless Framework
- Midway Serverless、Dapr
应用
- 云端一体化研发
- 在线服务编排
- App Serverless
云平台
- 公有云平台：AWS Lambda、阿里云 FC、腾讯云
- 私有云平台：K8S + KNative + ServiceMesh

2、DevOps

进程管理
- PM2
- Docker
⽇志
负载均衡
Shell 命令
Docker
性能监控
- Open Telemetry
- Alinode
- Easy Monitor
Web 服务器
- Nginx：taobao/nginx-book: Nginx 开发从入门到精通 (github.com)
- Tengine

3、数据库

MySQL
PostgreSQL
MongoDB
Redis
LiteDB
Oracle：Oracle | Cloud Applications and Cloud Platform
MS SQL Server：Microsoft 数据平台 | Microsoft
PolarDB-云原生：云原生关系型数据库PolarDB MySQL 版_MySQL 安装部署数据库迁移扩容-阿里云 (aliyun.com)
OceanBase-云数据库：云数据库 OceanBase蚂蚁数据库金融分布式数据库_数据库-阿里云 (aliyun.com)

4、API Clients

REST
GraphQL

5、分布式服务

RPC
- gRPC
- Dubbo
- Dnode
任务调度
- Agenda
实时通信
- Socket.io
消息
- RabbitMQ
- Kafka
- mqtt

6、Web Frameworks

Express.js
Koa.js
Sails.js
Egg.js
Midway.js
Metetor.js
Fastify
Next.js

第⼗二步：综合能⼒

1、知识管理

Markdown
脑图
wiki
GitBook

2、软件工程

过程模型
需求分析
概念设计
体系结构设计
项目管理
- 立项管理
- 整体管理
- 范围管理
- 进度管理
- 成本管理
- 质量管理
- ⼈⼒资源管理
- 沟通管理
- ⻛险管理
- 采购管理
- 合同管理
- 变更管理
- 战略管理
- 项目集和项目组合管理
- 流程管理
- 知识管理

3、交互设计

交互原型
视觉还原

4、开源项目

Github
OpenJS
Apache

高阶

1、IDE

底层能⼒
支撑服务
核⼼能⼒
功能模块
场景

2、中后台

规范和标准
基础设施
开箱即用解决方案
研发平台

3、体验管理

体验模型设计
体验数据采集
体验分析方法
数据洞察方法

4、数据可视化

技术标准
数理统计
图形美学
可视化基础概念
绘图引擎
图标类库/可视化框架
领域方案

5、工程体系

初始化
开发
构建
测试
发布
监控

6、国际化

多语⾔
本地化
体验度量
极致性能

7、跨端技术

跨端解决方案
一码多端
跨端 API
跨端搭建
跨端组件
跨端性能

8、互动技术

技术标准
基础概念
互动引擎
基础知识
工程体系
基础组件
核⼼能⼒输出

9、智能化

总结展望
前端算法框架
商业化能⼒
研发能⼒
业务能⼒

10、多媒体

音视频基础
直播技术
播放器技术
Web 媒体技术
开源产品和框架

前端大师修炼路线 ​

大前端 ​

第一步：前端前置知识 ​

1、网络 ​

2、客户端 ​

3、服务端 ​

4、前端研发工具 ​

第二步：前端入⻔ ​

1、HTML ​

2、CSS ​

3、W3C/WHATWG 行业标准 ​

第三步：JavaScript ​

1、语法 ​

2、数据类型深入 ​

3、对象 ​

4、函数 ​

5、原型 ​

6、类 ​

7、异步流程控制 ​

8、模块化 ​

9、异常捕获 ​

第四步：浏览器 ​

1、DOM ​

2、浏览器 API ​

前端大师修炼路线

大前端

第一步：前端前置知识

1、网络

2、客户端

3、服务端

4、前端研发工具

第二步：前端入⻔

1、HTML

2、CSS

3、W3C/WHATWG 行业标准

第三步：JavaScript

1、语法

2、数据类型深入

3、对象

4、函数

5、原型

6、类

7、异步流程控制

8、模块化

9、异常捕获

第四步：浏览器

1、DOM

2、浏览器 API