前端学习路线

一、前端基础

1、HTML

• HTML元素和属性
• HTML表单和图形处理
• HTML媒体元素以及实践

2、CSS

• 基本语法和选择器
• 样式层叠与继承
• BFC
• 盒子模型、定位、浮动和显示属性
• 渐变、阴影、滤镜
• CSS变换、过渡、动画
• Web字体与多列布局

二、JavaScript

函数

• this指向问题⭐️
• 执行上下文与执行上下文栈
• 闭包
• 原型/原型链
• 作用域/作用域链
• BOM与DOM
• try/catch 语法⭐️
• 构造函数

异步

• Ajax
• 回调函数
• 宏任务、微任务
• Promise ⭐️
• async/await 语法

ES6以上新特性

此处列出一些比较常见的：

• 模块化
• Class
• Symbol
• 箭头函数
• 解构赋值
• rest参数
• Promise
• Set/Map
• let/const
• 模板字符串
• 扩展运算符
• async/await
• 迭代器与生成器
• Object.values/Object.entries
• import.meta
• import()
• 可选链(例如：a?.b)
• Promise.any

其他

• TypeScript ⭐️
• 垃圾回收机制
• 正则表达式
• 常用设计模式

三、前端框架

1、Vue ⭐️

• 响应式原理
• Vue2和Vue3的区别
• 组件化开发
• 生命周期
• 组件间通信
• vite使用
• VueRouter
• Vuex
• Pinia
• 虚拟DOM / Diff算法
• 服务端渲染

2、React ⭐️

• JSX 语法
• 生命周期
• 组件间通信
• React Hooks
• 高阶组件HOC
• Redux
• React-Router
• 虚拟DOM / Diff算法
• 服务端渲染

四、微信小程序

• 微信开发者工具
• 小程序生命周期
• 常用指令
• 小程序数据绑定
• 常用API接口
• 小程序登录机制
• 消息订阅
• 开发框架如 Taro

五、前端工程化

1、模块化

• AMD
• CMD
• UMD
• CommonJS
• ES Modules

2、规范化

• ESlint \ TSlint
• Styleint
• Prettier

3、自动化

• 自动化构建
• 自动化部署（CI/CD）

4、测试

• Jest
• Selenium

5、工具

• Git
• Webpack
• Vite

六、前端性能优化

• 懒加载
• 性能监控
• 图片优化
• 节流防抖
• 回流重绘
• 虚拟列表
• 缓存
• 服务端渲染

七、计算机网络

1、计算机网络

• 网络层
• 传输层
• 应用层
• 网络安全

2、浏览器

• 进程线程
• 渲染原理
• 事件循环 ⭐️
• 消息队列 ⭐️
• 内存管理
• 垃圾回收机制
• 缓存机制
• 同源策略/跨域 ⭐️

八、其他

1、TypeScript

• 接口
• 泛型
• TSlint
• 装饰器
• 类型声明
• 函数类型
• 高级类型
• 类型断言
• 类型推论
• 类型保护
• 声明合并
• 模块解析
• 命名空间

2、Node.js

• 事件循环
• 事件队列
• 模块系统
• 文件系统
• 网络请求
• 反向代理
• 开发框架，如Express、Koa、NestJs

3、泛客户端

• 移动端
  • Flutter
  • React native
• 桌面应用
  • Electron
• 小程序
  • 原生小程序，以微信小程序为代表
  • 多端统一方案Taro、uni-app