前端这条路真是一年比一年卷了，每天都在更新很多东西，在 2022 年入门前端需要学点什么，以下是我的理解。

预备知识

提问的艺术：

1. 表达问题的能力，解决问题的能力，多想多实践的能力。
2. 善用 GitHub Issue、Google Search、Stack Overflow 检索的能力。

HTML：

1. 了解语义化标签，不过在实际开发中这种东西用的真的多吗，大部分都是 div 一把梭，当然真正做人性化的网站会正确使用语义化标签，不管是后期维护还是对盲人朋友都有很大的帮助。
2. Meta 标签，常见的有 viewport、keyword 等。
3. Link、Script 标签的使用，rel、async、defer 等属性的用法。
4. 了解 a11y 是什么。

CSS：

1. 会使用常见属性，如 background、overflow、position 等等。
2. 了解 CSS 盒模型，以及定位。
3. BFC 是什么，用在什么地方。
4. CSS3 动画。
5. 各类选择器，伪类（如 :hover, :focus, ::before），以及权重
6. CSS 变量

个人建议 CSS 不需要刻意去学，CSS 有大部分东西在实际开发中并不会用到，而且 CSS 更新之快，为了保证兼容性和学习成本，大部分新的提案和特征不会立刻被大众接受。而且刻意去记而不去实践很容易忘。

JavaScript

1. 掌握 ES6，如今已没有必要从 ES5 开始。
2. 了解 JS 是一个单线程的语言，动态弱类型语言。
3. 网络请求，了解 XMLHTTPRequest，会使用 Fetch API
4. DOM、BOM 常用 API，以及会用这种方法来操作 DOM。
5. 事件处理，冒泡、捕获
6. 异步编程，以及如何将回调地域代码转换为 Promise 写法。

以上内容的掌握，并且能借助一些 UI 库实现一个包含网络请求的登陆页面，算是前端入门了。

基础知识

接下来就要打打基础。开始跨进现代前端的第一步。

JavaScript

1. 原型链、继承是怎么一回事。
2. 一些常见的设计模式（工厂模式，观察者模式、订阅发布模式等）。
3. 闭包是什么，使用闭包如何防止内存泄漏。
4. 作用域是什么。
5. this 的指向、隐式和显式绑定 this。
6. 类型间的隐式转换 （toString(), valueOf, [Symbol.toPrimitive]）。
7. 了解 Proxy、Reflect 元编程。

Linux 基础

1. 常用命令（cd, cp, mv, ls, rm, mkdir 等）。
2. 会使用 Git 常用命令。
3. 环境变量

基础工程化

可以先选一个前端框架进行学习。以 React、Vue 2 为例。如果是急着找工作可以学 React，学习曲线上 React 大于 Vue 2，但是 Vue 2 目测会被 Vue 3 慢慢取代，而 Vue 3 的 composition api 在一定程度上与 React Hooks 相似，学习曲线上与 React 几乎一致。学习 React 等于又学习了一个 Vue 3 也是个不错的选择。

React：

1. 了解 JSX 是什么，怎么去使用，JSX 最终编译的产物是什么。
2. 了解 Class Component 的用法，以及生命周期。
3. 了解高阶组件（HOC）。
4. 掌握 React Hooks 使用，函数式组件的开发。
5. 调试的能力，能规避一些不必要的重渲染。
6. 会使用至少一种状态管理库（Redux、Mobx 等）。
7. 至少通读一遍官方文档。

Vue 2：

1. 通读官方文档即可开始。
2. 建议跟着 全栈之巅 学习

Vue 2 在门槛上明显低于其他框架，这也使得 Vue 2 在短时间内吸引了大量学习者，但是在使用过程中，坑明显比 React 要多得多。再加上 Vue 2 不太聪明的报错方式，让调试更加繁琐。这些在实际开发中对比可以深刻体会到。

常用类库：

1. UI 库：Antd，naive-ui 等
2. 网络请求库：axios，umi-request、ky 等
3. 状态管理库：vuex、pinia、redux、mobx 等

CSS：

1. 了解 CSS 预处理器是什么，解决了什么问题（Less、SCSS、Stylus 等）
2. CSS Module 是什么，解决了什么问题。
3. CSS in JS 是什么。

工具链：

1. 会使用 Git 管理代码
2. npm, yarn, pnpm
3. 了解打包工具，至少知道是干什么的：Webpack、Rollup、Vite、etc.

架构：

1. 项目目录分配
2. 路由处理
3. 数据管理，持久化数据存储的处理
4. MVVM

NodeJS:

1. 会使用 Express、Koa 或其他服务器框架建立简单的服务器。
2. 数据库的使用: CRUD，借助 ORM、ODM 库（MongoDB: mongoose, typegoose. MySql: typeorm. etc.）
3. RESTFul 接口标准。

到这里为止，可以去找个厂上班了。刷刷面试题，问题应该不大。当然有几个拿得出手的项目还是不可少的。

再深入工程化

工具链：

1. 会使用至少一种打包工具，配置的能力、发包的能力，package.json 的定义。(main, type, files, module, etc.)
2. 配置 ESLint、Prettier、StyleLint，统一代码风格。
3. 部署 CI/CD，自动化流程。
4. husky、lint-staged
5. Babel 是什么、SWC 了解、ESBuild 了解。

React:

1. 理解 React 的 Diff 方式，为什么会重渲染，如何避免或减少重渲染。性能优化。
2. 拆分组件。抽离 Hooks。

Vue 3：

1. 通读 Vue 3 文档。
2. Composition API、Proxy。
3. 多实践多踩踩坑。

TypeScript:

必学。不要求非常会做体操，简单的类型要会写。然后项目开始用 TypeScript 重构。

架构：

1. monorepo
2. 微前端
3. 独立组件库
4. SSR/SPA/CSR/SSG，同构实践

CSS:

1. 会使用一种原子 CSS 框架（TailwindCSS, WindiCSS, etc.）
2. 了解 PostCSS

方向

大前端:

1. 移动端开发：React Native、Ionic 等
2. 小程序开发：微信小程序、uni-app、remax 等
3. 桌面端开发：Electron、NodeGUI 等
4. H5 开发
5. 游戏开发：Canvas、WebAssembly 等

架构：

1. AST
2. 设计模式
3. 算法与数据结构
4. Rust、Go

平台：

主要有前端监控、埋点等其他服务于开发的平台。

唉，以上只是不全面总结，前端真的太卷了。