web前端架构师大师课思维导图

HTML简介和发展史

互联网的原理

开发工具使用

HTML 基本使用

HTML 常用标签

....

css 基本介绍

css 常用属性

css 盒子模型

css float

css position

....

登录注册页项目实战

移动端浏览器内核

理解视口 / 设备宽度

百分比布局

flex 布局

em / rem

响应式网页概述

媒体查询

Bootstrap

栅格布局

....

实战项目 携程网

JavaScript简介

流程控制语句

内置对象

函数闭包设计

作用域设计

原型链设计

DOM对象

BOM对象

正则文法

ES 2016

jQuery 基础应用

....

101 网页特效 项目实战

Vue基本介绍

声明式渲染

常用指令

组件生命周期

常用修饰符

computed / watch

插槽 slot

自定义指令

vuex

vue-router

Element UI 基本使用

组件开发最佳实践

....

网易云音乐项目实战

Node的简介和安装

计算机CMD命令和环境变量

Node的基本使用

Node内置模块

作用域问题和exports

npm / node_modules

express 基础应用

MongoDB 基础应用

....

聊天室 项目实战

操作系统书籍推荐

操作系统底层细节

CPU原理

汇编语言

硬件基础知识

量子计算机

进程/线程/协程

进程调度

内存管理

计算机网络历史

OSI模型

TCP / IP 协议

IPv4 协议

IPv6 协议

UDP 协议

HTTP 协议

HTTP vs HTTP2.0

TCP、UDP、IP抓包Whireshark介绍

socket编程HTTP服务

加密、解密和证书

同源策略

算法基本概念

排序算法

选择排序

冒泡排序

插入排序

希尔排序

归并排序

计数排序

基数排序

桶排序

V8是如何执行一段JavaScript代码的？

JavaScript对象模型全解

基于 toPrimitive 函数分解大厂面试套路

V8拆箱装箱机制

V8实现对象继承

V8实现闭包

什么是异步

JavaScript Event Loop 事件循环

异步编程-发布订阅

控制反转 promise

基于 Thunk 函数的 Generator 自动执行器

co模块源码分析

async 函数实现原理

webWorker多线程机制

chrome 架构

一个浏览器是如何工作的

CSSOM 如何获取一个元素的准确位置

为什么会有捕获过程和冒泡过程

HTTP请求流程 TCP协议

从输入URL到页面展示，这中间发生了什么？

渲染流水线(上)

渲染流水线(下)

利用网络面板做性能分析

如何系统地优化页面

函数式编程概述

从零打造前端工具库 一

从零打造前端工具库 二

从零打造前端工具库 三

Utility Function escape

Utility Function iteratee

Utility Function template

Object deepClone

Function throttle

Function debounce

Function compose

JavaScript 自有类型系统的问题

TypeScript 工具的配置及相关插件的使用

TypeScript 基本类型

interface

class & interface

TypeScript 高级特性（枚举、接口、泛型）

高级类型 交叉/ 索引/条件

类型检查机制

声明文件

配置 tsconfig

编译工具：从ts-loader到Bable

代码检查工具：从TSLint到ESLint

模块化结合typescript - 泛型改造

Typescript 对 vue3 的加持

Vue 初始化

initLifecycle

响应式系统(一)检测数组变化

响应式系统(二)observe工厂函数

响应式系统(四)依赖收集过程

响应式系统(五)触发更新过程

异步更新队列

编译器 - compiler AST

virtual DOM diff 算法

Vue3 编译流程

静态提升

代码提升器

patch 算法

Composition

响应式变化

reactive

ref / computed

setup / expose

watchEffect / watch 侦听器

路由概念

前端路由和后端路由

前端路由的实现方式

Vue-router 的实现原理概述

VueRouter对象

matcher

creatematcher

addRouters

路径切换

导航守卫

什么是状态管理模式？

源码目录结构

store 初始化

$store注入

state

getters

mutations

actions

ModuleCollection

installModule

文件结构 / 代码规范

组件拆分

展示型组件开发的流程

state和数据流分析

组件的测试

集成测试

TDD 模式

Redux 和 Context 的解决方案

mock server 接口测试

项目部署

ReactDOM.render

setState

Fiber Scheduler流程

Update

更新列表

commitRoot

ref的实现过程

event事件系统-注入平台事件插件

event事件监听的过程

event-事件触发的过程

suspense and priority 异步渲染

react hooks

什么是服务器端渲染

React 客户端渲染的优势与弊端

在服务器端编写 React 组件

服务器端 Webpack 的配置

实现服务器端组件渲染

同构的概念的梳理

SSR框架中引入路由机制

服务器端渲染获取数据

数据的脱水和注水

数据代理转发

cookie登陆状态传递

SSR CSS样式的处理方案

Node.js 高级编程

NoSQL数据库设计原则

Mongoose CURD操作

Redis简介

Redis常见cli命令

JWT登录鉴权

消息中间件开发

RESTful 接口开发

WebSocket通信

SSR基础及工作原理

Nuxtjs

express

express application

express route

express middle

koa application

koa context

koa request

koa response

XSS攻击的原理

防御XSS攻击

前端CSRF 攻击原理

防御CSRF攻击

Cookies相关的安全问题

Cookies的最佳实践

Cookies安全策略

点击劫持的原理和危害

点击劫持防御策略

传输安全 /HTTPS 部署

密码安全 / 加固

DOS攻击

性能监测

回流和重绘

布局抖动

资源压缩 / 合并

HTTP资源缓存

Service workers

按需加载

持久化缓存

预渲染页面

骨架组件

节流防抖函数

Webpack 打包工具的基本使用

配置详解

打包过程和打包结果分析

资源模块的加载（Loader）

如何开发一个 Webpack 的 Loader

插件机制

开发一个 Webpack 插件

生态（Dev Server、HMR、Proxy）

高级特性（Tree-shaking、sideEffects)

打包过程及打包结果的优化

深度剖析 Webpack 实现原理

其他常见的打包工具（Rollup、Parcel）

什么是脚手架？

脚手架原理讲解

脚手架开发流程和难点解析

脚手架本地调试标准流程

脚手架命令注册和参数解析

脚手架项目发布

原生脚手架开发痛点分析

基于lerna搭建脚手架框架

git操作规范

脚手架初始化

脚手架命令注册

通用脚手架命令Command类封装.

脚手架初始化项目模板开发.

自定义项目模板开发

规范与标准建立

自动化构建

自动部署平台

自动部署测试

持续集成