引言 📚

大家好，两个月前我写了这样一篇文章：「 30天整理 ｜2W字长篇」用一篇文章明确前端学习路线并构筑知识体系🌿，主要讲述了我的前端学习之路，以及在与大佬的探讨下共同完成的一幅巨大的前端知识体系导图。

如果想要那副完整的前端知识体系导图可以去那篇文章的末尾获取。因为没钱冲 xmind 会员，所以想要去水印版本的还是加我好友，我来私发给你～

虽然我觉得那篇文章的完整性已经很高了，但是由于其中提到的知识点太多，并不适合作为个人向的学习路线，更适合作为一个较完整的知识图谱进行查阅，所以诞生了本篇文章，本篇文章的内容如下：

• 分析我的个人能力和未来规划
• 根据分析结果和完整的知识图谱梳理出我未来的学习路线

这个学习路线也将成为我未来很长一段时间的文章输出目标和规划，所以其实这个系列就更像是一场前端工程师的真人秀，我希望这个系列可以做到：

• 身体力行：从我个人出发进行规划，从而给大家传输经验
• 陪伴成长：我希望各位也可以获得系统的学习之旅，在我的陪伴下一同成长
• 系统性：整个学习路线需要尽量保证系统性，使得知识体系足够完整

现在，请大家欣赏这个系列的开篇作：

从零构筑属于自己的知识体系 🌿

如果对前端体系没有一个大致的了解，我还是希望先去阅读：「 30天整理 ｜2W字长篇」用一篇文章明确前端学习路线并构筑知识体系🌿，如题，这是前端重学之路，还是需要有一定的基础了解的。

自我分析 🎵

首先当我们要确立属于自己的长期学习目标时，可以先对自己的能力和未来规划做一个审视。比如先给自己一个简短的定位：

我觉得我的知识面还可以但是都没啥深入研究且不够系统

我对自己的定位就是上面这句话，我眼里自己了解的东西不少，但是都没有什么深入的研究，不求甚解，基础也不算扎实，很多知识点并没有形成体系。所以对于我这个阶段我对自己未来一段时间的学习规划就是：

对前端知识系统的重新学习，夯实基础，并深入原理。

我想获取许多同学和我处于同一个阶段，所以也可以尝试在未来一段时间跟随我的步伐一起重学前端。当然也会有很多同学处于更高的阶段，想去深入研究某些方向，正所谓人与人的悲欢不尽相同，我只能在此膜拜大佬嘤嘤嘤。

漫漫学习路 🌊

整个学习的过程我也按照之前的那篇文章的顺序来，从通用能力到前端基础到工程化再到计算机基础，下面我就把学习流程列出：

学习顺序从上到下～

通用能力

• shell
• git
• linux 常用指令
• 正则

html

• canvas
• 音视频

话说虽然我之前写了不少 canvas 相关的文章，但是都是在整活儿，并没有系统的学习过 canvas，我打算在这次学习流程中完成这个历史债务。

css

• 选择器
• BFC
• 盒模型
• CSS动画
• 浮动/定位/布局

js

• es6+ 语法
• ES 标准（深入理解js）
• ES5 实现 ES6+ 语法糖
• js 模块化
• fetch api && ajax 和基于ajax封装的请求库
• 变量提升
• 闭包
• 事件冒泡
• 原型链 & 继承
• 微任务 & 宏任务 & 事件队列
• this 指针
• 超集：typescript

现代流行框架 Vue

因为我现在使用的技术栈 Vue，所以我打算深入研究一下，再考虑学习 react

原理相关：

• 响应式原理
• 虚拟 dom
• diff 算法
• 模板编译
• slot 原理

vue3 相关：

• composition API
• 与 vue2 的异同

• 使用
• 实现原理

前端工程化

• Node
• 打包工具

• webpack
• rollup
• vite

• 使用 & 原理

• 预处理

• babel
• 现代 css

• less
• sass

• 依赖管理

• npm
• yarn

• CI/CD
• 设计模式
• eslint
• nginx
• 微前端

• single-spa
• qiankun
• qp

浏览器

• 调试
• 浏览器渲染原理
• v8
• webworker
• 垃圾回收

网络

• ISO-OSI七层网络模型
• 状态码
• api 规范

• restful
• graphql

• 协议

• http & https & http2
• grpc
• tcp
• udp

js 服务端开发

• nestjs
• mysql
• 生产环境部署

• pm2
• forever

插件开发

• vscode 插件
• chrome 插件

我之前也开发过不少 vscode 插件，可以去看我之前的文章～

前端前沿

• low code
• deno

一直都比较好奇 deno，学起来学起来～

数据结构

• 数组
• 栈
• 队列
• 链表
• 树
• 图

算法

• 时间复杂度 & 空间复杂度
• 常见算法

• 树的遍历
• 排序算法

• 算法思想

• 穷举法
• 递推法
• 递归法
• 分治法
• 贪心算法
• 动态规划法
• 迭代法
• 分支界限法
• 回溯法

• 经典算法

• kmp

编译原理

• 状态机
• 程序设计语言及其执行

• 低级语言
• 高级语言

• 编译器结构

• 前端（分析部分）

• 词法分析
• 语法分析
• 语义分析
• 中间代码生成

• 后端（综合部分）

• 代码优化
• 代码生成

编译原理我之前也写过文章，比较详细～

操作系统

• 什么是操作系统
• 进程和线程

计算机组成原理

• 计算机的基本组成
• 计算机指令 & 运算

• 计算机指令
• 计算机运算

• 处理器设计

• 异常 & 中断
• 流水线

• 存储器设计

• 存储器的结构层次

通往光辉荣耀的路 ✨

就这样，我未来一段时间的完整的体系化学习路线就是这样：

结束语 🔥

这样本篇文章的内容就到这里结束了。请大家继续期待我后续的文章～

剧透一下，按照上面的流程我尽量保证一周一篇文章，当然下周就是 shell 啦～

当你身处黑暗时
不要放弃寻找光明
因为在寻找光明的路上
你也可以变成一道光

-to be continued-