前端自检清单

导读：

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.8 正则

• 1.9 base64/blob

• 1.10 es6阮一峰

1.2 语言层底

• v8编译

• v8 api

2. node

2.1 应用

• 1 网络 tcp、udp、http、websocket

• 2 tls https

• 3 node 多进程与集群

• 4 express

• 5 koa

• 6 nest

• 7 electron

2.2 理论

• node 架构及模块

• libuv

• node 异步fs与网络io

• node 异步编程

• IO NIO AIO

• Node addons

3. chrome

应用

• 像素与视口、h5适配

• cef

原理

• 1.chrome进程、渲染

• 2.chrome事件循环、异步api

• 3.浏览器内核与js引擎

• 4.html解释器与dom模型

• 5.css解析与样式布局

• 6.renderobject与renderlayout

• 7.2d、3d、gpu

• 8.浏览器网络

4. hybrid app

• 线上H5调试定位

跨端技术

• 小程序原理

• 5+app 与 uniapp

• react native

• flutter

android相关

• Android 架构

• Android webview

ios相关

• ios架构

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.1.6 组件通讯之 boradcast/dispatch

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源码解析

• 解密vue异步组件

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 应用

• webpack配置

• webpack常用 plugin

• webpack 自定义loader

• webpack 自定义plugin

• 手写一个webpack

• webpack-dev-server

• taptable

vite

• 前端构建工具生态
• vite介绍
• vite插件

其他

• babel转译器

• class、extend编译

• import、require打包分析

8.服务端相关

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

• WEB 架构介绍

java

• jvm与类加载
• java 反射/注解/动态代理
• jni

计算机基础

• 网络
• 操作系统
• 数据结构
• 算法

数据库

• mongodb
• mysql

开发工具

• tomcat
• maven gradle

框架

• spring springmvc mybatis
• springboot
• springcloud
• serverless
• netty

系统设计

• RestFul
• 认证授权
• 数据安全（加密、敏感词过滤、数据脱敏）
• 定时任务
• 消息推送

分布式

• 分布式理论&算法&协议
• api网管gateway
• 分布式锁
• 分布式事务
• zookeeper
• rpc&&dubbo

高性能

• cdn
• 负载均衡
• 数据库优化、读写分离
• sql优化
• 消息队列

高可用

• 冗余设计（集群&背灾&多活）
• 流量控制（flow control）
• 降级&熔断（sentinel Hystrix）
• 超时（Timeout）重试（Retry）
• 性能测试(Jmeter LoadRunner)

9.前端工程化

开发

• git 及 hooks
• 前端代码编写规范
• debugger & sourcemap
• ts基础
• vue单元测试
• mockjs
• scss bem规范
• prettier与eslint
• 换肤

构建

• cli脚手架+调试
• 组件库文档平台
• 微前端 single-spa qiankun micro-app
• 服务端渲染 nuxt，next
• 低代码平台

网络与部署

• tcp/udp
• http1与http2
• https
• 前端鉴权
• nginx
• docker
• 前端性能测试
• 持续集成Jenkins
• 缓存
• 前端监控

10.其他

图形

• canvas参考手册
• svg参考手册
• webGL入门

angular

• 手写一个angularjs

• rxjs

web

• html 标签

• css常用

• HTMLElement尺寸

• js 常用语法

• jquery 常用语法

• 常见web安全攻防

• web component

• wasm

• web实时推送

• 跨域

• 多页签通讯

• http常用content-type

js组件

• table组件

• element-ui源码--国际化

• jq项目国际化

• axios拦截器

• react-grid-layout

• editor编辑器

实践

• 图片懒加载

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

• keep-alive嵌套路由改造

• 多表单提交校验

• 缓存历史页签，增加tabs展示

• qiankun vite无publicPath踩坑

• 如何修改element-ui源码并应用到项目中

11.感悟与总结

• 外行转码农，焦虑到躺平
• 成长曲线记录

结尾：
这篇目录作为我的知识体系。另外我的书签记录了我常看的文档链接
欢迎关注我的前端自检清单，我和你一起成长