前端知识体系

导读：

js的表现能力取决于宿主环境的api支持。所以同样是js语法，我们在chrome、node、hybrid app、electron桌面应用的场景不一样。

1js原生语法的介绍；
2、3、4分别是js宿主环境node、chrome、hybrid app的介绍；
5、6两个主流js框架vue、react的介绍；
7webpack编译；
8web架构认识；
9前端相关的知识；
10 以中有足乐者，在喜欢的领域拼命的玩；

1. javascript

1.1 语法

1.1. this指向

1.2. 调用栈及js垃圾回收

1.3.js 闭包

1.4. 原型链

1.5. 手写call

1.6. 手写promise

1.7. js 模块

1.2 语言

1.8. v8编译

1.9. v8 api

2. node

2.1 应用

2.1.1 网络 tcp、udp、http、websocket

2.1.2 tls https

2.1.3 node 多进程与集群

2.1.4 express

2.1.5 koa

2.1.6 nest

2.2 理论

2.2.1 node 架构及模块

2.2.2 node 异步fs与网络io

2.2.3 node 异步编程

2.2.4 IO NIO AIO

2.2.5 libuv

2.2.6 Node addons

3. chrome

3.1.chrome进程、渲染

3.2.chrome事件循环、异步api

3.3.浏览器内核与js引擎

3.4.html解释器与dom模型

3.5.css解析与样式布局

3.6.renderobject与renderlayout

3.7.2d、3d、gpu

3.8.浏览器网络

4. hybrid app

4.1 像素与视口、h5适配

4.2 android 及 Android webkit

4.3 跨端技术

4.4 小程序原理

4.5 cef

4.6 5+app 与 uniapp

4.7 react native

4.8 flutter

4.9 android js与webview交互

4.10 electron

5. vue

5.1 使用方法

5.1.1 keep-alive

5.1.2 vue-router hash&history

5.1.3 Vuex

5.1.4 vue事件

5.1.5 vue生命周期

5.2 主流程原理

1、入口：new Vue

2、响应式视图：三类watcher

3、依赖收集：vue 响应式原理

4、视图更新：vm._update(vm.render())

5、组件渲染：createComponent

6、模版解析：vue-loader原理

5.3 源码解析

1、手写一个简易vue（虚拟dom，diff，补丁更新页面）

2、vue2源码解析

3、vue3源码解析

6.react

6.1 语法基础部分

6.1.1.生命周期

6.1.2.hoc & render props portals

6.1.3.react ref

6.1.4.react route

6.1.5.keepalive

6.1.6.react hook

6.1.7 redux 与react-redux

6.1.8 mobx 与react-mobx

6.1.9 事件处理写法

6.2 原理

6.2.1 手写一个react

6.2.1 react17源码解析

7.webpack及转译

7.1. 手写一个webpack

7.2. webpack loader demo

7.3. webpack-plugin demo

7.4. webpack-dev-server

7.5. babel转译器

7.6.taptable

7.7 class、extend编译

7.8.import、require打包分析

7.9.webpack配置

8.服务端相关

对于了一个前端开发，这些架构概念还是有必要了解一下

8.1.docker

8.2.mysql mongodb

8.3.nginx

8.4.jvm与类加载

8.5.java 反射/注解/动态代理

8.6.jni

8.7.spring springmvc mybatis

8.8.springboot

8.9.serverless

8.8.netty

8.10.springcloud

8.11.WEB 架构介绍

9.web相关

工具

1. git 常用命令

2. 前端代码编写规范

3. css bem规范

4. debugger

5. ts基础

6. 单元测试

7. mockjs

工程化

1. cli脚手架

2. 组件库文档平台

3. 微前端 single-spa qiankun micro-app

4. 服务端渲染 nuxt，next

5. 低代码平台

angular

1. 手写一个angularjs

2. rxjs

web

1. 常见web安全攻防

2. web component

3. wasm

4. canvas svg

5. web实时推送

6. 跨域

7. 多页签通讯

网络

1. tcp/udp

2. http1与http2

3. https

4. http协商缓存与强缓存

5. http常用content-type

js组件

1. jquery 语法及方法封装

2. table组件

3. element-ui源码–国际化

4. axios拦截器

5. react-grid-layout

实践

1. 导航tab超出显示“更多按钮”，下拉悬浮展示隐藏tab

2. 实现上拉加载/下拉刷新

3. 虚拟滚动

4. 多表单提交校验

5. 优化tabs组件

10.书籍读后整理

有意思比有意义更重要

• 1. 计算机
• 2. 心理学
• 3. 经济学
• 4. 管理学
• 5. 政治地理历史
• 6. 绘画

结尾：
这篇目录作为我的知识体系。
欢迎关注我的前端自检清单，我和你一起成长