前端学习路线（2023）
这个前端学习路线看起来很详细和全面，涵盖了从基础知识到高级框架，从单机开发到全栈项目，从混合应用到原生应用，从性能优化到架构设计的各个方面。如果你能够按照这个路线学习和实践，我相信你一定能够成为一名优秀的前端工程师。
不过，我也要提醒你，这个路线并不是一成不变的，你需要根据自己的实际情况和学习进度来调整和优化，同时也要关注前端领域的最新动态和技术变化，不断地更新自己的知识体系和技能树。前端开发是一个永远学不完的领域，只有不断地学习和进步，才能保持自己的竞争力和创造力。祝你成功！
第一阶段前端开发基本功
HTML
HTML元素和属性
HTML表单和图形处理
HTML媒体和最佳实践
CSS
CSS基本语法与选择器
CSS背景、文本、边框、轮廓与颜色
CSS列表、表单与表格样式
CSS样式层叠与继承
CSS盒模型、定位、浮动和显示属性
CSS渐变、阴影与滤镜
CSS变换、过渡与动画
Web字体与多列布局
页面制作工具
VSCode及插件
PhotoShop的使用和图片整合
markman、pxcook工具使用
蓝湖、sketch与axure工具使用
该阶段获得初级web前端工程师水平，熟悉前端开发的HTML与CSS基础知识。能够配合UI设计师进行项目开发。
可从事职位：初级前端开发工程师、前端实习生
第二阶段 页面布局实战
布局技术
BFC、 IFC、 GFC、FFC等概念
Flex弹性布局
网格布局
媒体杳询
viewport. rem, vw, dpr与ppi
布局规范与方案
PC端网站布局规范
PC端管理系统布局规范
流式布局 （100%布局)
等比缩放布局(rem布局)
响应式布局
移动端reset, 1px border，高清图片
移动端设备适配最佳实践
该阶段获得初级Web前端工程师水平，能够完成各种PC端与移动端网页布局与样式设计实现。可以做各浏览器兼容与设备适配。
可从事岗位：初级前端开发工程师、前端实习生
第三阶段 前端开发内功
原生JavaScript
交互功能开发
某本语法
流程控制语句
函数与数组
String与Date
BOMSDOM
拖拽效果
客户端存储(cookie存储、 WebStorage)
正则表达式
Ajax
面向对象基础
运动与游戏开发
数据结构与算法
JavaScript
工具库自主研发
DOM库
事件库
AJAx库
原型和继承库
MVVM核心库
基于SPA的路由库
面向对象进阶与ES应用
Promise
async/await浯法
try / catch 浯法
原型链
构造函数
执行上下文栈与执行上下文
作用域链
闭包
this
ES5-ES12
设计模式
原生JS经典交互特效开发
时间轴特效
tab页面切换效果
网页定位导航特效
滑动门特效
焦点图轮播特效
导航条菜单效果
瀑布流特效
弹出层效果
倒计时效果
抽奖效果
该阶段获得中级Web前端工程师水平，主要进行页面行为交互，实现网站中常见交互特效。
可从事岗位：JavaScript开发工程师
第四阶段 PC端全栈项目开发
前端工具库
Animate CSS
VanillaJS
Lodash
Swiper
axios
Moment.js
Eslint, prettier
ECharts
jQuery
前端工程化与模块化
Linux
Less/Sass
NPM
Git
AMD/CMD/UMD
ES6模块化
Node.js服务端开发
Node 基础入门
Express 框架基础
中间件开发
MVC开发模式
基于Express的后端路由
MongoDB数据库的基本使用
基于Token的登录状态保持
Node.js的JEventLoop
文件上传（单文件/多文件）
模板引擎
静态资源加载
服务端渲染页面
PC端网站开发
该阶段获得中级 Web 前端工程师水平，并能配合 U1 和后台实现项目。
可从事职位：网站开发工程师、Web前端开发工程师
第五阶段 前端高级框架技术
Angular
Angular脚手架与创建命令
TypeScript语法与修饰模式
Ng服务与依赖注入
Ng组件与生命周期
Ng路由与Ng状态管理
基于Angular的UI组件库
数据可视化
数据可枧化基础
Echarts/Highcharts
D3.js入门
D3.js入进阶
D3.js选择器与数据
基于Echarts/D3.js项目实战
React
React 18
ReactRouter6
Umi技术
其他技术栈
开发基于React的C端和B端项目
Vue
Vue3选项式API
Vue3组合式API
Vite2+SFC
VueRouter4
Vuex4
Pinia2
TypeScript基础
TS+Vue3
其他技术栈
开发基于Vue3的C端和B端项目
全栈Web3.0开发
Web3.0 生态概念详解
Solidity 智能合约基础与实践
Web3.js 助飞你的 DApp上以太坊
智能合约 Solidity＋以太坊实践
应用 Solidity 开发以太坊在线钱包 Web3.0 项目
该阶段获得高级Web前端工程师水平，主要进行前后端全栈开发。能够独立完成一个中小项目的前后台。对于Web开发有着非常熟练的编程能力。
可从事职位：高级Web开发工程师
第六阶段 混合应用开发技术
微信公众号
微信内置公众号定制
JSSDK接入
公众号常见功能开发
微信小程序
微信小程序基础
小程序高级应用
原生多端小程序开发
uni-app多端小程序框架
Taro 多端小程序框架
Electron技术
Electron入门
Electron 调试技巧
Electron主进程与渲染进程API
Electron 与 React、Vue集成
构建Windows、Mac及Linux跨平台应用
PWA技术
什么是PWA
PWA项目实战
该阶段高级Web前端开发工程师/Electron开发工程师，获得高级Web前端工程师水平，主要进行混合式App项目开发。能够实现多端开发并拥有多端开发能力，整合资源，实现跨平台跨设备的架构能力。
可从事岗位：混合APP开发工程师/小程序开发工程师
第七阶段 原生应用开发技术
HarmonyOS鸿蒙开发
认识鸿蒙
框桇基础
肉置组件
自定义组件
接口
Flutter
Flutter环境搭建
界面结构与基础部件
布局与表单
Dart语法
widgets容器
网络请求与路由
ReactNative
RN环境搭建
RN基础组件
RN动画和手势
Expo基础
RN+Expo调用硬件设备
该阶段获得大前端高级开发工程师水平，主要涉猎原生APP开发。主导移动端多元产品项目实现。能够跨平合开发提出可建设性解决方案。
可从事岗位：大前端高级开发工程师
第八阶段 大前端架构
开发工具及服务器技术
Webpack5
Vite2
Git工具及GitHub/Gitee
ESLint与单元测试
TypeScript架构
阿里云ECS: linux服务器
Nginx: Web服务器
Docker ：容器化应用
Serverless: 无服务器技术
WebAssembly技术
前端性能
SSR技术
Nuxt.js 服务器端渲染
Next.js 服务器端渲染
SEO：搜索引擎优化
低代码与组件库开发
低代码平台搭建
基于Vue/React/小程序的U组件库开发
微前端架构
什么是微前端
微前端的实现技术
基于Webpack+Vue+React微前端实战
安全
前端攻击
前端异常监控
该阶段获得大前端架构师水平，主要进行前端项目架构和项目把控。能够解决网站出现的突发状况，能够改进网站性能到极致。拥有大型网站、大量高井发访问量等开发经验。
可从事岗位：大前端架构师/资深前端开发工程师
除了学习路线，我还有一些其他的建议，希望对你有用：
多看多写多练。前端开发是一个实践性很强的领域，你需要通过不断地编写代码，来巩固你的知识点，提高你的编程能力，发现你的问题和不足，同时也要多看一些优秀的代码和项目，学习他们的思路和技巧，拓展你的视野和思维。
多思考多总结多分享。前端开发是一个需要不断思考和创新的领域，你需要通过不断地思考，来深入理解你的知识点，提出你的疑问和想法，解决你的难题和挑战，同时也要多总结你的经验和收获，分享给他人，得到他人的反馈和建议，促进你的成长和进步。
多交流多合作多参与。前端开发是一个需要团队协作和社区参与的领域，你需要通过不断地交流，来沟通你的需求和意见，了解他人的想法和建议，协调你的工作和任务，同时也要多合作，与他人一起完成项目和功能，提高你的协作能力和效率，同时也要多参与，加入一些前端学习交流群 ，或者参加一些前端相关的活动和比赛，扩大你的人脉和影响力。
关注我公众号：一粒程序米，获取更多学习资源。