前端技术体系总结，含2000多个节点的脑图

近一年一直在结合现有业务和过往项目对前端的技术进行梳理，并最终汇总成一个脑图（用电脑打开，手机会乱码），暂包含2199个节点。

总结的侧重点在基础和某些技术的原理性分析，并带有大量链接对相关知识点进行批注，本文只是对技术体系的目录性介绍，最终还是要看图和对应链接。

不包含小程序相关。

基础

这里包括计算机基础和前端基础两种，这是构建整个技术体系的关键。

计算机基础

计算机组成会关注数据的表示和运算，以及指令系统。

操作系统原理会关注进程和线程相关。

编译原理要了解基本的编译过程，并对前端涉及到的babel对js、ts乃至react的编译有所理解，其他的还比如prettier对ast的使用。

计算机网络是前端打交道最多的科目，首先要对计算机网络分层的状况和具体运作流程有感性的认识，避免死记硬背。其中最重要的是http协议，包括http1.1,2.0乃至3.0，以及相关的https，tls等。

数据结构是依靠现有语言的原生实现，根据要解决的问题，对现有数据类型的直接使用和二次封装。
数据结构以数组和链表为基础，数组提供了栈和队列所需的api，链表需要自己实现。
字符串是字符组成的数组。
树是有多个子结点的链表，因为树可以递归生成，因此涉及到的递归算法较多。工作中最常见的树就是dom树。
图是有环的树，使用较少。
散列表可以直接使用Map和Object。
堆在逻辑上基于完全二叉树，在存储上使用数组，因为堆排序性能较好，也较常用。

前端基础

前端的基础可以看成是广义的html5，除了对应规范本身外，还可以参考mdn相关章节进行补充。

ecma262,这是js的基础规范，常见的版本比如es6。

html和dom规范，大部分在whatwg，还有一部分在w3c，规定了html和浏览器等平台对js的使用。

css标准，在w3c，因为大部分同学使用的较浅，因此不太关注。

基础扩展

前面主要谈的是规范之内的东西，因为主要是给实现者使用的，比如v8的开发者，因此我们开发过程中需要进一步的扩展以便更方便的使用。

ts，由于js缺乏类型系统，不能静态类型检查，因此我们可以借助ts。

css的语法很简单，而且没有模块化，为了更好的利用css，出现了很多的解决方案，包括需要进一步编译成css才能用的sass和less等，赋予了css更强大的编程能力，使用css-in-js或css module，给了我们模块化写法等等。

node.js，是js运行的一个宿主环境，除了用法传统的web服务器，前端主要用作开发环境相关，比如打包。

electron,是一个结合了浏览器和node.js特性的跨平台应用开发程序，比如vscode和迅雷都是以这种方式开发的。

js框架，最常见的包括vue和react，是我们接触最频繁的扩展，用声明式的写法对状态和ui进行同步，另外还包括状态管理、路由管理、ssr等相关library。

工具链

编译器，babel生态很完善，swc速度很快，主要使用前者，我们能使用最新版本的js就得益于它。

版本管理工具，常用的包括git和svn，主要是git，git本质是一个数据库，提供了命令行和gui的交互方式。

代码规范工具，我们常常使用eslint对代码质量进行把控，使用prettier对代码格式进行规范，另外使用git hook可以对进入代码管理的不合格代码进行阻拦。

模块打包工具，顾名思义就是为打包而生的，除了打包之外还有其他作用，比如hmr，tree shaking,最常用的是webpack,需要对其原理有所了解；rollup常常被库开发者使用，vitejs虽然放在这里，但不太算打包工具，利用esmodule和esbuild提供了开发环境，利rollup打包。

任务构建工具，传统的包括grunt和gulp，但由于我们都安装了npm，因此大部分操作交给了npm script。

自动化工具，主要用法部署，常用的比如jenkins。

单元测试，比如jest。

mock工具，比如mockjs。

监控工具，比如sentry。

其他

以上都是些比较系统的技术，还有很多需要注意的点。

web性能。

web安全，前端主要注意的是xss和csrf。

serverless,主要用作fass和bass，比如写一些简单的接口，价格便宜且不需要另外运维。

编程范式，我们常见的是函数式编程和面向对象，函数式编程侧重于数据的流动，面向的本质是用来设计和扩展自己的数据结构，侧重于数据的处理。

浏览器原理，对我们代码运行的主要宿主有所了解，可以更好的理解相关基础知识和提高性能。

服务端基础，熟悉一些后端语言，对js有更好的理解。对docker,linux,nginx会用，还有常规的数据库有所了解。

后记

本文，包括文章开始提供的脑图链接会随时更新，欢迎关注和交流。