大家好，我是寒草😈，一只草系码猿🐒。间歇性热血🔥，持续性沙雕🌟 如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~ 加我微信：hancao97，邀你进群，一起学习交流，成为更优秀的工程师～

引言 📚

大家好，两个月前我写了这样一篇文章：「 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-

可以加我微信：hancao97，邀你进群，一起学习交流，成为更优秀的前端工程师～